mirror of
https://github.com/penpot/penpot.git
synced 2025-05-21 09:26:12 +02:00
⚡ Add performance enhacenements to layout-container menu (part 2)
Refactor and improve performance of padding related react components
This commit is contained in:
Andrey Antukh
parent
35f3c6e90f
commit
897968939d
1 changed files with 198 additions and 128 deletions
|
|
@ -284,58 +284,71 @@
|
||||||
:title "Justify content space-evenly"
|
:title "Justify content space-evenly"
|
||||||
:id "justify-content-space-evenly"}]])
|
:id "justify-content-space-evenly"}]])
|
||||||
|
|
||||||
(mf/defc padding-section
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
;; PADDING
|
||||||
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
|
(defn- select-padding
|
||||||
|
([p]
|
||||||
|
(select-padding (= p :p1) (= p :p2) (= p :p3) (= p :p4)))
|
||||||
|
([p1? p2? p3? p4?]
|
||||||
|
(st/emit! (udw/set-paddings-selected {:p1 p1? :p2 p2? :p3 p3? :p4 p4?}))))
|
||||||
|
|
||||||
|
(defn- on-padding-blur
|
||||||
|
[_event]
|
||||||
|
(select-padding false false false false))
|
||||||
|
|
||||||
|
(mf/defc simple-padding-selection
|
||||||
{::mf/props :obj}
|
{::mf/props :obj}
|
||||||
[{:keys [values on-change-style on-change]}]
|
[{:keys [padding on-change]}]
|
||||||
(let [padding-type (:layout-padding-type values)
|
(let [p1 (:p1 padding)
|
||||||
|
p2 (:p2 padding)
|
||||||
|
p3 (:p3 padding)
|
||||||
|
p4 (:p4 padding)
|
||||||
|
|
||||||
toggle-padding-mode
|
p1 (if (and (not (= :multiple padding))
|
||||||
|
(= p1 p3))
|
||||||
|
p1
|
||||||
|
"--")
|
||||||
|
|
||||||
|
p2 (if (and (not (= :multiple padding))
|
||||||
|
(= p2 p4))
|
||||||
|
p2
|
||||||
|
"--")
|
||||||
|
|
||||||
|
on-change'
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps padding-type on-change-style)
|
(mf/deps on-change)
|
||||||
(fn []
|
(fn [value event]
|
||||||
(let [padding (if (= padding-type :multiple) :simple :multiple)]
|
(let [attr (-> (dom/get-current-target event)
|
||||||
(on-change-style padding))))
|
(dom/get-data "attr")
|
||||||
|
(keyword))]
|
||||||
|
(on-change :simple attr value event))))
|
||||||
|
|
||||||
p1 (if (and (not (= :multiple (:layout-padding values)))
|
on-focus
|
||||||
(= (dm/get-in values [:layout-padding :p1])
|
(mf/use-fn
|
||||||
(dm/get-in values [:layout-padding :p3])))
|
(fn [event]
|
||||||
(dm/get-in values [:layout-padding :p1])
|
(let [attr (-> (dom/get-current-target event)
|
||||||
"--")
|
(dom/get-data "attr")
|
||||||
|
(keyword))]
|
||||||
|
|
||||||
p2 (if (and (not (= :multiple (:layout-padding values)))
|
(case attr
|
||||||
(= (dm/get-in values [:layout-padding :p2])
|
:p1 (select-padding true false true false)
|
||||||
(dm/get-in values [:layout-padding :p4])))
|
:p2 (select-padding false true false true))
|
||||||
(dm/get-in values [:layout-padding :p2])
|
|
||||||
"--")
|
|
||||||
|
|
||||||
select-paddings
|
(dom/select-target event))))]
|
||||||
(fn [p1? p2? p3? p4?]
|
|
||||||
(st/emit! (udw/set-paddings-selected {:p1 p1? :p2 p2? :p3 p3? :p4 p4?})))
|
|
||||||
|
|
||||||
select-padding #(select-paddings (= % :p1) (= % :p2) (= % :p3) (= % :p4))]
|
|
||||||
|
|
||||||
(mf/use-effect
|
|
||||||
(fn []
|
|
||||||
(fn []
|
|
||||||
;;on destroy component
|
|
||||||
(select-paddings false false false false))))
|
|
||||||
|
|
||||||
[:div {:class (stl/css :padding-group)}
|
|
||||||
[:div {:class (stl/css :padding-inputs)}
|
|
||||||
(cond
|
|
||||||
(= padding-type :simple)
|
|
||||||
[:div {:class (stl/css :paddings-simple)}
|
[:div {:class (stl/css :paddings-simple)}
|
||||||
[:div {:class (stl/css :padding-simple)
|
[:div {:class (stl/css :padding-simple)
|
||||||
:title "Vertical padding"}
|
:title "Vertical padding"}
|
||||||
[:span {:class (stl/css :icon)}
|
[:span {:class (stl/css :icon)}
|
||||||
i/padding-top-bottom-refactor]
|
i/padding-top-bottom-refactor]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-change (partial on-change :simple :p1)
|
:data-attr "p1"
|
||||||
:on-focus #(do
|
:on-change on-change'
|
||||||
(dom/select-target %)
|
:on-focus on-focus
|
||||||
(select-paddings true false true false))
|
|
||||||
:nillable true
|
:nillable true
|
||||||
:min 0
|
:min 0
|
||||||
:value p1}]]
|
:value p1}]]
|
||||||
|
|
@ -347,78 +360,135 @@
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:className (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-change (partial on-change :simple :p2)
|
:data-attr "p2"
|
||||||
:on-focus #(do (dom/select-target %)
|
:on-change on-change'
|
||||||
(select-paddings false true false true))
|
:on-focus on-focus
|
||||||
:on-blur #(select-paddings false false false false)
|
:on-blur on-padding-blur
|
||||||
:nillable true
|
:nillable true
|
||||||
:min 0
|
:min 0
|
||||||
:value p2}]]]
|
:value p2}]]]))
|
||||||
(= padding-type :multiple)
|
|
||||||
[:div {:class (stl/css :paddings-multiple)}
|
|
||||||
|
|
||||||
|
(mf/defc multiple-padding-selection
|
||||||
|
{::mf/props :obj}
|
||||||
|
[{:keys [padding on-change]}]
|
||||||
|
(let [p1 (:p1 padding)
|
||||||
|
p2 (:p2 padding)
|
||||||
|
p3 (:p3 padding)
|
||||||
|
p4 (:p4 padding)
|
||||||
|
|
||||||
|
on-change'
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps on-change)
|
||||||
|
(fn [value event]
|
||||||
|
(let [attr (-> (dom/get-current-target event)
|
||||||
|
(dom/get-data "attr")
|
||||||
|
(keyword))]
|
||||||
|
(on-change :multiple attr value event))))
|
||||||
|
|
||||||
|
on-focus
|
||||||
|
(mf/use-fn
|
||||||
|
(fn [event]
|
||||||
|
(let [attr (-> (dom/get-current-target event)
|
||||||
|
(dom/get-data "attr")
|
||||||
|
(keyword))]
|
||||||
|
|
||||||
|
(select-padding attr)
|
||||||
|
(dom/select-target event))))]
|
||||||
|
|
||||||
|
[:div {:class (stl/css :paddings-multiple)}
|
||||||
[:div {:class (stl/css :padding-multiple)
|
[:div {:class (stl/css :padding-multiple)
|
||||||
:title "Top padding"}
|
:title "Top padding"}
|
||||||
[:span {:class (stl/css :icon)}
|
[:span {:class (stl/css :icon)}
|
||||||
i/padding-top-refactor]
|
i/padding-top-refactor]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-change (partial on-change :multiple :p1)
|
:data-attr "p1"
|
||||||
:on-focus #(do (dom/select-target %)
|
:on-change on-change'
|
||||||
(select-padding :p1))
|
:on-focus on-focus
|
||||||
:on-blur #(select-paddings false false false false)
|
:on-blur on-padding-blur
|
||||||
:nillable true
|
:nillable true
|
||||||
:min 0
|
:min 0
|
||||||
:value (:p1 (:layout-padding values))}]]
|
:value p1}]]
|
||||||
|
|
||||||
[:div {:class (stl/css :padding-multiple)
|
[:div {:class (stl/css :padding-multiple)
|
||||||
:title "Right padding"}
|
:title "Right padding"}
|
||||||
[:span {:class (stl/css :icon)}
|
[:span {:class (stl/css :icon)}
|
||||||
i/padding-right-refactor]
|
i/padding-right-refactor]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-change (partial on-change :multiple :p2)
|
:data-attr "p2"
|
||||||
:on-focus #(do (dom/select-target %)
|
:on-change on-change'
|
||||||
(select-padding :p2))
|
:on-focus on-focus
|
||||||
:on-blur #(select-paddings false false false false)
|
:on-blur on-padding-blur
|
||||||
:nillable true
|
:nillable true
|
||||||
:min 0
|
:min 0
|
||||||
:value (:p2 (:layout-padding values))}]]
|
:value p2}]]
|
||||||
|
|
||||||
[:div {:class (stl/css :padding-multiple)
|
[:div {:class (stl/css :padding-multiple)
|
||||||
:title "Bottom padding"}
|
:title "Bottom padding"}
|
||||||
[:span {:class (stl/css :icon)}
|
[:span {:class (stl/css :icon)}
|
||||||
i/padding-bottom-refactor]
|
i/padding-bottom-refactor]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-change (partial on-change :multiple :p3)
|
:data-attr "p3"
|
||||||
:on-focus #(do (dom/select-target %)
|
:on-change on-change'
|
||||||
(select-padding :p3))
|
:on-focus on-focus
|
||||||
:on-blur #(select-paddings false false false false)
|
:on-blur on-padding-blur
|
||||||
:nillable true
|
:nillable true
|
||||||
:min 0
|
:min 0
|
||||||
:value (:p3 (:layout-padding values))}]]
|
:value p3}]]
|
||||||
|
|
||||||
[:div {:class (stl/css :padding-multiple)
|
[:div {:class (stl/css :padding-multiple)
|
||||||
:title "Left padding"}
|
:title "Left padding"}
|
||||||
[:span {:class (stl/css :icon)}
|
[:span {:class (stl/css :icon)}
|
||||||
i/padding-left-refactor]
|
i/padding-left-refactor]
|
||||||
[:> numeric-input*
|
[:> numeric-input*
|
||||||
{:className (stl/css :numeric-input)
|
{:class (stl/css :numeric-input)
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-change (partial on-change :multiple :p4)
|
:data-attr "p4"
|
||||||
:on-focus #(do (dom/select-target %)
|
:on-change on-change'
|
||||||
(select-padding :p4))
|
:on-focus on-focus
|
||||||
:on-blur #(select-paddings false false false false)
|
:on-blur on-padding-blur
|
||||||
:nillable true
|
:nillable true
|
||||||
:min 0
|
:min 0
|
||||||
:value (:p4 (:layout-padding values))}]]])]
|
:value p4}]]]))
|
||||||
[:button {:class (stl/css-case :padding-toggle true
|
|
||||||
:selected (= padding-type :multiple))
|
(mf/defc padding-section
|
||||||
:on-click toggle-padding-mode}
|
{::mf/props :obj}
|
||||||
|
[{:keys [type on-type-change on-change] :as props}]
|
||||||
|
(let [on-type-change'
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps on-type-change)
|
||||||
|
(fn [event]
|
||||||
|
(let [type (-> (dom/get-current-target event)
|
||||||
|
(dom/get-data "type"))
|
||||||
|
type (if (= type "multiple") :simple :multiple)]
|
||||||
|
(on-type-change type))))
|
||||||
|
|
||||||
|
props (mf/spread-obj props {:on-change on-change})]
|
||||||
|
|
||||||
|
(mf/with-effect []
|
||||||
|
;; on destroy component
|
||||||
|
(fn []
|
||||||
|
(on-padding-blur nil)))
|
||||||
|
|
||||||
|
[:div {:class (stl/css :padding-group)}
|
||||||
|
[:div {:class (stl/css :padding-inputs)}
|
||||||
|
(cond
|
||||||
|
(= type :simple)
|
||||||
|
[:> simple-padding-selection props]
|
||||||
|
|
||||||
|
(= type :multiple)
|
||||||
|
[:> multiple-padding-selection props])]
|
||||||
|
|
||||||
|
[:button {:class (stl/css-case
|
||||||
|
:padding-toggle true
|
||||||
|
:selected (= type :multiple))
|
||||||
|
:data-type (name type)
|
||||||
|
:on-click on-type-change'}
|
||||||
i/padding-extended-refactor]]))
|
i/padding-extended-refactor]]))
|
||||||
|
|
||||||
(mf/defc gap-section
|
(mf/defc gap-section
|
||||||
|
|
@ -439,7 +509,7 @@
|
||||||
:disabled (and (= :nowrap wrap-type) (not is-col?)))
|
:disabled (and (= :nowrap wrap-type) (not is-col?)))
|
||||||
:title "Row gap"}
|
:title "Row gap"}
|
||||||
[:span {:class (stl/css :icon)} i/gap-vertical-refactor]
|
[:span {:class (stl/css :icon)} i/gap-vertical-refactor]
|
||||||
[:> numeric-input* {:className (stl/css :numeric-input true)
|
[:> numeric-input* {:class (stl/css :numeric-input true)
|
||||||
:no-validate true
|
:no-validate true
|
||||||
:placeholder "--"
|
:placeholder "--"
|
||||||
:on-focus (fn [event]
|
:on-focus (fn [event]
|
||||||
|
|
@ -988,11 +1058,11 @@
|
||||||
:on-change set-gap
|
:on-change set-gap
|
||||||
:gap-value (:layout-gap values)}]
|
:gap-value (:layout-gap values)}]
|
||||||
|
|
||||||
[:& padding-section {:values values
|
[:& padding-section {:padding (:layout-padding values)
|
||||||
:on-change-style change-padding-type
|
:type (:layout-padding-type values)
|
||||||
|
:on-type-change change-padding-type
|
||||||
:on-change on-padding-change}]]]
|
:on-change on-padding-change}]]]
|
||||||
|
|
||||||
|
|
||||||
:grid
|
:grid
|
||||||
[:div {:class (stl/css :grid-layout-menu)}
|
[:div {:class (stl/css :grid-layout-menu)}
|
||||||
(when (= 1 (count ids))
|
(when (= 1 (count ids))
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue