github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-27 23:28:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

⚡ Add performance enhacenements to layout-container menu (part 5)

Browse Source 
Refactor and improve performance of align-grid-row related components
This commit is contained in:
Andrey Antukh 2024-02-21 12:45:50 +01:00
parent 0735fa93f6
commit 87f0e46036
1 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View File

@ -640,27 +640,30 @@
(tr "workspace.layout_grid.editor.options.edit-grid")])) (tr "workspace.layout_grid.editor.options.edit-grid")]))
(mf/defc align-grid-row (mf/defc align-grid-row
{::mf/props :obj} {::mf/props :obj
[{:keys [is-column align-items set-align]}] ::mf/private true}
(let [type (if ^boolean is-column :column :row)] [{:keys [is-column value on-change]}]
[:& radio-buttons {:selected (d/name align-items) (let [type (if ^boolean is-column "column" "row")]
:on-change #(set-align % type) [:& radio-buttons {:selected (name value)
:name (dm/str "flex-align-items-" (d/name type))} :decode-fn keyword
:on-change on-change
:name (dm/str "flex-align-items-" type)}
[:& radio-button {:value "start" [:& radio-button {:value "start"
:icon (get-layout-grid-icon-refactor :align-items :start is-column) :icon (get-layout-grid-icon-refactor :align-items :start is-column)
:title "Align items start" :title "Align items start"
:id (dm/str "align-items-start-" (d/name type))}] :id (dm/str "align-items-start-" type)}]
[:& radio-button {:value "center" [:& radio-button {:value "center"
:icon (get-layout-grid-icon-refactor :align-items :center is-column) :icon (get-layout-grid-icon-refactor :align-items :center is-column)
:title "Align items center" :title "Align items center"
:id (dm/str "align-items-center-" (d/name type))}] :id (dm/str "align-items-center-" type)}]
[:& radio-button {:value "end" [:& radio-button {:value "end"
:icon (get-layout-grid-icon-refactor :align-items :end is-column) :icon (get-layout-grid-icon-refactor :align-items :end is-column)
:title "Align items end" :title "Align items end"
:id (dm/str "align-items-end-" (d/name type))}]])) :id (dm/str "align-items-end-" type)}]]))
(mf/defc justify-grid-row (mf/defc justify-grid-row
{::mf/props :obj} {::mf/props :obj
::mf/private :obj}
[{:keys [is-column value on-change]}] [{:keys [is-column value on-change]}]
(let [type (if ^boolean is-column "column" "row")] (let [type (if ^boolean is-column "column" "row")]
[:& radio-buttons {:selected (name value) [:& radio-buttons {:selected (name value)
@ -993,14 +996,17 @@
align-items-row (:layout-align-items values) align-items-row (:layout-align-items values)
align-items-column (:layout-justify-items values) align-items-column (:layout-justify-items values)
set-align-grid on-column-align-change
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value type] (fn [value]
(let [value (keyword value)] (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))
(if (= type :row)
(st/emit! (dwsl/update-layout ids {:layout-align-items value})) on-row-align-change
(st/emit! (dwsl/update-layout ids {:layout-justify-items value})))))) (mf/use-fn
(mf/deps ids)
(fn [value]
(st/emit! (dwsl/update-layout ids {:layout-align-items value}))))
;; Justify grid ;; Justify grid
grid-justify-content-row (:layout-justify-content values) grid-justify-content-row (:layout-justify-content values)
@ -1139,12 +1145,12 @@
:on-change set-direction}]]] :on-change set-direction}]]]
[:& align-grid-row {:is-column false [:& align-grid-row {:is-column false
:align-items align-items-row :value align-items-row
:set-align set-align-grid}] :on-change on-row-align-change}]
[:& align-grid-row {:is-column true [:& align-grid-row {:is-column true
:align-items align-items-column :value align-items-column
:set-align set-align-grid}]] :on-change on-column-align-change}]]
[:div {:class (stl/css :row :grid-layout-align)} [:div {:class (stl/css :row :grid-layout-align)}
[:& justify-grid-row {:is-column true [:& justify-grid-row {:is-column true
@ -1208,14 +1214,18 @@
align-items-row (:layout-align-items values) align-items-row (:layout-align-items values)
align-items-column (:layout-justify-items values) align-items-column (:layout-justify-items values)
set-align-grid on-column-align-change
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value type] (fn [value]
(let [value (keyword value)] (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))
(if (= type :row)
(st/emit! (dwsl/update-layout ids {:layout-align-items value})) on-row-align-change
(st/emit! (dwsl/update-layout ids {:layout-justify-items value})))))) (mf/use-fn
(mf/deps ids)
(fn [value]
(st/emit! (dwsl/update-layout ids {:layout-align-items value}))))
;; Justify grid ;; Justify grid
grid-justify-content-row (:layout-justify-content values) grid-justify-content-row (:layout-justify-content values)
@ -1318,12 +1328,12 @@
:on-change set-direction}]]] :on-change set-direction}]]]
[:& align-grid-row {:is-column false [:& align-grid-row {:is-column false
:align-items align-items-row :value align-items-row
:set-align set-align-grid}] :on-change on-row-align-change}]
[:& align-grid-row {:is-column true [:& align-grid-row {:is-column true
:align-items align-items-column :value align-items-column
:set-align set-align-grid}]] :on-change on-column-align-change}]]
[:div {:class (stl/css :row :grid-layout-align)} [:div {:class (stl/css :row :grid-layout-align)}
[:& justify-grid-row {:is-column true [:& justify-grid-row {:is-column true