Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 04:49:03 -05:00
Code Issues Activity

⚡ Add minor performance improvements to asset-section react component

Browse source
This commit is contained in:
Andrey Antukh 2024-01-08 18:05:35 +01:00
parent eeaee5ad42
commit a179f73deb
2 changed files with 44 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

@ -26,6 +26,7 @@
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.array :as array]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.dom.dnd :as dnd] [app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -120,7 +121,8 @@
:workspace? true}]) :workspace? true}])
(mf/defc section-icon (mf/defc section-icon
[{:keys [section] :as props}] {::mf/wrap-props false}
[{:keys [section]}]
(case section (case section
:colors i/drop-refactor :colors i/drop-refactor
:components i/component-refactor :components i/component-refactor
@ -130,28 +132,42 @@
(mf/defc asset-section (mf/defc asset-section
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [children file-id title section assets-count open?]}] [{:keys [children file-id title section assets-count open?]}]
(let [children (->> (if (array? children) children [children]) (let [children (-> (array/normalize-to-array children)
(filter some?)) (array/without-nils))
get-role #(.. % -props -role)
title-buttons (filter #(= (get-role %) :title-button) children)
content (filter #(= (get-role %) :content) children)]
[:div {:class (stl/css :asset-section)}
[:& title-bar {:collapsable true
:collapsed (not open?)
:all-clickable true
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
:class (stl/css :title-spacing)
:title (mf/html [:span {:class (stl/css :title-name)}
[:span {:class (stl/css :section-icon)}
[:& section-icon {:section section}]]
[:span {:class (stl/css :section-name)}
title]
[:span {:class (stl/css :num-assets)} is-button? #(= :title-button (.. % -props -role))
assets-count]])} is-content? #(= :content (.. % -props -role))
title-buttons]
(when ^boolean open? buttons (array/filter is-button? children)
content)])) content (array/filter is-content? children)
on-collapsed
(mf/use-fn
(mf/deps file-id section open?)
(fn [_]
(st/emit! (dw/set-assets-section-open file-id section (not open?)))))
title
(mf/html
[:span {:class (stl/css :title-name)}
[:span {:class (stl/css :section-icon)}
[:& section-icon {:section section}]]
[:span {:class (stl/css :section-name)}
title]
[:span {:class (stl/css :num-assets)}
assets-count]])]
[:div {:class (stl/css :asset-section)}
[:& title-bar
{:collapsable true
:collapsed (not open?)
:all-clickable true
:on-collapsed on-collapsed
:class (stl/css :title-spacing)
:title title}
buttons]
(when ^boolean open? content)]))
(mf/defc asset-section-block (mf/defc asset-section-block
{::mf/wrap-props false} {::mf/wrap-props false}

7
frontend/src/app/util/array.cljs
View file

@ -6,7 +6,7 @@
(ns app.util.array (ns app.util.array
"A collection of helpers for work with javascript arrays." "A collection of helpers for work with javascript arrays."
(:refer-clojure :exclude [conj! conj])) (:refer-clojure :exclude [conj! conj filter]))
(defn conj (defn conj
"A conj like function for js arrays." "A conj like function for js arrays."
@ -44,3 +44,8 @@
(defn without-nils (defn without-nils
[^js/Array o] [^js/Array o]
(.filter o (fn [v] (some? v)))) (.filter o (fn [v] (some? v))))
(defn filter
"A specific filter for js arrays."
[pred ^js/Array o]
(.filter o pred))