♻️ 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,10 +58,9 @@
         prev-colors-ref  (mf/use-ref nil)
 
         initial-color-keys
-        (mf/use-memo
-         #(->> (concat colors library-colors)
-               (reduce
-                (fn [result color]
+        (mf/with-memo []
+          (->> (concat colors library-colors)
+               (reduce (fn [result color]
                          (assoc result color (dm/str (uuid/next))))
                        {})))
 
@@ -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,7 +168,7 @@
           (seq fills)
           [:& h/sortable-container {}
            (for [[index value] (d/enumerate (:fills values []))]
-             [:& color-row {:color (ctc/fill->shape-color value)
+             [:> color-row* {:color (ctc/fill->shape-color value)
                              :key index
                              :index index
                              :title (tr "workspace.options.fill")

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,7 +196,7 @@
         (when (= :square type)
           [:div {:class (stl/css :square-row)}
            [:div {:class (stl/css :advanced-row)}
-            [:& color-row {:color (:color params)
+            [:> color-row* {:color (:color params)
                             :title (tr "workspace.options.grid.params.color")
                             :disable-gradient true
                             :disable-image true
@@ -237,7 +237,7 @@
                          :on-change (handle-change :params :type)}]]
 
             [:div {:class (stl/css :color-wrapper)}
-             [:& color-row {:color (:color params)
+             [:> color-row* {:color (:color params)
                              :title (tr "workspace.options.grid.params.color")
                              :disable-gradient true
                              :disable-image true

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,7 +235,9 @@
                                :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))
+
+          ;; FIXME: memoize color
+          [:> color-row* {:color (if (string? (:color value))
                                    ;; Support for old format colors
                                    {:color (:color value) :opacity (:opacity value)}
                                    (:color value))

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,7 +148,8 @@
        [:& reorder-handler {:ref dref}])
 
      ;; Stroke Color
-     [:& color-row {:color (ctc/stroke->shape-color stroke)
+     ;; FIXME: memorize stroke color
+     [:> color-row* {:color (ctc/stroke->shape-color stroke)
                      :index index
                      :title title
                      :on-change on-color-change-refactor