3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-20 00:06:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Optimize the layout-item-menu react component

Browse source
This commit is contained in:
Andrey Antukh 2024-02-16 12:06:26 +01:00
parent 46fca11b38
commit a1a9519cf5
1 changed files with 42 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -313,8 +313,15 @@
:id "align-self-end"}]]) :id "align-self-end"}]])
(mf/defc layout-item-menu (mf/defc layout-item-menu
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]} {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]
[{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent? is-flex-layout? is-grid-layout?] :as props}] ::mf/props :obj}
[{:keys [ids values
^boolean is-layout-child?
^boolean is-layout-container?
^boolean is-grid-parent?
^boolean is-flex-parent?
^boolean is-flex-layout?
^boolean is-grid-layout?]}]
(let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref) selection-parents (mf/deref selection-parents-ref)
@ -327,8 +334,12 @@
state* (mf/use-state true) state* (mf/use-state true)
open? (deref state*) open? (deref state*)
toggle-content (mf/use-fn #(swap! state* not)) toggle-content (mf/use-fn #(swap! state* not))
has-content? (or is-layout-child? is-flex-parent? is-grid-parent? is-layout-container?) has-content? (or ^boolean is-layout-child?
^boolean is-flex-parent?
^boolean is-grid-parent?
^boolean is-layout-container?)
;; Align self ;; Align self
@ -336,13 +347,18 @@
title title
(cond (cond
(and is-layout-container? (not is-layout-child?) is-flex-layout?) (and is-layout-container?
is-flex-layout?
(not is-layout-child?))
"Flex board" "Flex board"
(and is-layout-container? (not is-layout-child?) is-grid-layout?) (and is-layout-container?
is-grid-layout?
(not is-layout-child?))
"Grid board" "Grid board"
(and is-layout-container? (not is-layout-child?)) (and is-layout-container?
(not is-layout-child?))
"Layout board" "Layout board"
is-flex-parent? is-flex-parent?
@ -365,10 +381,14 @@
;; Margin ;; Margin
on-change-margin-type on-change-margin-type
(mf/use-fn
(mf/deps ids)
(fn [type] (fn [type]
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))))
on-margin-change on-margin-change
(mf/use-fn
(mf/deps ids)
(fn [type prop val] (fn [type prop val]
(cond (cond
(and (= type :simple) (= prop :m1)) (and (= type :simple) (= prop :m1))
@ -378,7 +398,7 @@
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}})) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {:m2 val :m4 val}}))
:else :else
(st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))) (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
;; Behaviour ;; Behaviour