♻️ Refactor color-row component to new style

frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs

@@ -17,7 +17,7 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
@@ -153,7 +153,8 @@
         :on-focus handle-focus-stop-offset
         :on-blur handle-blur-stop-offset}]]
 
-     [:& color-row
+     ;; FIXME: memoize color
+     [:> color-row*
       {:disable-gradient true
        :disable-picker true
        :color {:color color

frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs

@@ -16,7 +16,7 @@
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.hooks :as h]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -58,12 +58,11 @@
         prev-colors-ref  (mf/use-ref nil)
 
         initial-color-keys
-        (mf/use-memo
-         #(->> (concat colors library-colors)
-               (reduce
-                (fn [result color]
-                  (assoc result color (dm/str (uuid/next))))
-                {})))
+        (mf/with-memo []
+          (->> (concat colors library-colors)
+               (reduce (fn [result color]
+                         (assoc result color (dm/str (uuid/next))))
+                       {})))
 
         color-keys*  (mf/use-var initial-color-keys)
 
@@ -138,7 +137,7 @@
          (let [lib-colors (cond->> library-colors (not @expand-lib-color) (take 3))
                lib-colors (concat lib-colors colors)]
            (for [[index color] (d/enumerate lib-colors)]
-             [:& color-row
+             [:> color-row*
               {:key (get @color-keys* color)
                :color color
                :index index
@@ -155,7 +154,7 @@
 
         [:div {:class (stl/css :selected-color-group)}
          (for [[index color] (d/enumerate (cond->> colors (not @expand-color) (take 3)))]
-           [:& color-row
+           [:> color-row*
             {:key (get @color-keys* color)
              :color color
              :index index

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs

@@ -17,7 +17,7 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -168,18 +168,18 @@
           (seq fills)
           [:& h/sortable-container {}
            (for [[index value] (d/enumerate (:fills values []))]
-             [:& color-row {:color (ctc/fill->shape-color value)
-                            :key index
-                            :index index
-                            :title (tr "workspace.options.fill")
-                            :on-change (on-change index)
-                            :on-reorder (on-reorder index)
-                            :on-detach (on-detach index)
-                            :on-remove (on-remove index)
-                            :disable-drag disable-drag
-                            :on-focus on-focus
-                            :select-on-focus (not @disable-drag)
-                            :on-blur on-blur}])])
+             [:> color-row* {:color (ctc/fill->shape-color value)
+                             :key index
+                             :index index
+                             :title (tr "workspace.options.fill")
+                             :on-change (on-change index)
+                             :on-reorder (on-reorder index)
+                             :on-detach (on-detach index)
+                             :on-remove (on-remove index)
+                             :disable-drag disable-drag
+                             :on-focus on-focus
+                             :select-on-focus (not @disable-drag)
+                             :on-blur on-blur}])])
 
         (when (or (= type :frame)
                   (and (= type :multiple) (some? (:hide-fill-on-export values))))

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs

@@ -19,7 +19,7 @@
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -196,12 +196,12 @@
         (when (= :square type)
           [:div {:class (stl/css :square-row)}
            [:div {:class (stl/css :advanced-row)}
-            [:& color-row {:color (:color params)
-                           :title (tr "workspace.options.grid.params.color")
-                           :disable-gradient true
-                           :disable-image true
-                           :on-change handle-change-color
-                           :on-detach handle-detach-color}]
+            [:> color-row* {:color (:color params)
+                            :title (tr "workspace.options.grid.params.color")
+                            :disable-gradient true
+                            :disable-image true
+                            :on-change handle-change-color
+                            :on-detach handle-detach-color}]
             [:button {:class (stl/css-case :show-more-options true
                                            :selected show-more-options?)
                       :on-click toggle-more-options}
@@ -237,12 +237,12 @@
                          :on-change (handle-change :params :type)}]]
 
             [:div {:class (stl/css :color-wrapper)}
-             [:& color-row {:color (:color params)
-                            :title (tr "workspace.options.grid.params.color")
-                            :disable-gradient true
-                            :disable-image true
-                            :on-change handle-change-color
-                            :on-detach handle-detach-color}]]]
+             [:> color-row* {:color (:color params)
+                             :title (tr "workspace.options.grid.params.color")
+                             :disable-gradient true
+                             :disable-image true
+                             :on-change handle-change-color
+                             :on-detach handle-detach-color}]]]
 
            [:div {:class (stl/css :advanced-row)}
             [:div {:class (stl/css :height)

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -24,7 +24,7 @@
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [okulary.core :as l]
@@ -235,17 +235,19 @@
                                :on-change (update-attr index :offset-y basic-offset-y-ref)
                                :on-blur on-blur
                                :value (:offset-y value)}]]
-          [:& color-row {:color (if (string? (:color value))
-                                                ;; Support for old format colors
-                                  {:color (:color value) :opacity (:opacity value)}
-                                  (:color value))
-                         :title (tr "workspace.options.shadow-options.color")
-                         :disable-gradient true
-                         :disable-image true
-                         :on-change update-color
-                         :on-detach detach-color
-                         :on-open manage-on-open
-                         :on-close manage-on-close}]]])]]))
+
+          ;; FIXME: memoize color
+          [:> color-row* {:color (if (string? (:color value))
+                                   ;; Support for old format colors
+                                   {:color (:color value) :opacity (:opacity value)}
+                                   (:color value))
+                          :title (tr "workspace.options.shadow-options.color")
+                          :disable-gradient true
+                          :disable-image true
+                          :on-change update-color
+                          :on-detach detach-color
+                          :on-open manage-on-open
+                          :on-close manage-on-close}]]])]]))
 
 (mf/defc shadow-menu
   {::mf/wrap-props false}

frontend/src/app/main/ui/workspace/sidebar/options/page.cljs

@@ -15,7 +15,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [okulary.core :as l]
    [rumext.v2 :as mf]))
@@ -38,7 +38,9 @@
                      :title       (tr "workspace.options.canvas-background")
                      :class       (stl/css :title-spacing-page)}]]
      [:div {:class (stl/css :element-content)}
-      [:& color-row
+
+      ;; FIXME: memoize color
+      [:> color-row*
        {:disable-gradient true
         :disable-opacity true
         :disable-image true

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -44,7 +44,7 @@
   [v]
   (if (= v :multiple) nil v))
 
-(mf/defc color-row
+(mf/defc color-row*
   [{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden
            on-change on-reorder on-detach on-open on-close on-remove
            disable-drag on-focus on-blur select-only select-on-focus]}]

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs

@@ -14,7 +14,7 @@
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
-   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
+   [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -148,16 +148,17 @@
        [:& reorder-handler {:ref dref}])
 
      ;; Stroke Color
-     [:& color-row {:color (ctc/stroke->shape-color stroke)
-                    :index index
-                    :title title
-                    :on-change on-color-change-refactor
-                    :on-detach on-color-detach
-                    :on-remove on-remove
-                    :disable-drag disable-drag
-                    :on-focus on-focus
-                    :select-on-focus select-on-focus
-                    :on-blur on-blur}]
+     ;; FIXME: memorize stroke color
+     [:> color-row* {:color (ctc/stroke->shape-color stroke)
+                     :index index
+                     :title title
+                     :on-change on-color-change-refactor
+                     :on-detach on-color-detach
+                     :on-remove on-remove
+                     :disable-drag disable-drag
+                     :on-focus on-focus
+                     :select-on-focus select-on-focus
+                     :on-blur on-blur}]
 
            ;; Stroke Width, Alignment & Style
      [:div {:class (stl/css :stroke-options)}