💄 Convert color-selected-menu component to new style

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

@@ -37,20 +37,19 @@
 (def xf:map-shape-id
   (map :shape-id))
 
-(mf/defc color-selection-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]
-   ::mf/wrap-props false}
-  [{:keys [shapes file-id shared-libs]}]
+(mf/defc color-selection-menu*
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes"]))]}
+  [{:keys [shapes file-id libraries]}]
   (let [{:keys [groups library-colors colors]}
-        (mf/with-memo [shapes file-id shared-libs]
-          (prepare-colors shapes file-id shared-libs))
+        (mf/with-memo [file-id shapes libraries]
+          (prepare-colors shapes file-id libraries))
 
-        state*           (mf/use-state true)
-        open?            (deref state*)
+        open*            (mf/use-state true)
+        open?            (deref open*)
 
         has-colors?      (or (some? (seq colors)) (some? (seq library-colors)))
 
-        toggle-content   (mf/use-fn #(swap! state* not))
+        toggle-content   (mf/use-fn #(swap! open* not))
 
         expand-lib-color (mf/use-state false)
         expand-color     (mf/use-state false)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -10,7 +10,7 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.refs :as refs]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]]
@@ -113,10 +113,10 @@
      [:& stroke-menu {:ids ids
                       :type shape-type
                       :values stroke-values}]
-     [:& color-selection-menu {:type shape-type
-                               :shapes shapes-with-children
-                               :file-id file-id
-                               :shared-libs shared-libs}]
+     [:> color-selection-menu* {:type shape-type
+                                :shapes shapes-with-children
+                                :file-id file-id
+                                :libraries shared-libs}]
      [:& shadow-menu {:ids ids
                       :values (select-keys shape [:shadow])}]
      [:& blur-menu {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -12,7 +12,7 @@
    [app.main.refs :as refs]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
@@ -102,10 +102,11 @@
      (when-not (empty? stroke-ids)
        [:& stroke-menu {:type type :ids stroke-ids :values stroke-values}])
 
-     [:& color-selection-menu {:type type
-                               :shapes (vals objects)
-                               :file-id file-id
-                               :shared-libs shared-libs}]
+     [:> color-selection-menu*
+      {:type type
+       :shapes (vals objects)
+       :file-id file-id
+       :libraries shared-libs}]
 
      (when-not (empty? shadow-ids)
        [:& shadow-menu {:type type :ids ids :values (select-keys shape [:shadow])}])

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -17,7 +17,7 @@
    [app.main.refs :as refs]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.component :refer [component-menu]]
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-attrs exports-menu]]
@@ -394,7 +394,11 @@
                         :disable-stroke-style has-text?}])
 
      (when-not (empty? shapes)
-       [:& color-selection-menu {:file-id file-id :type type :shapes (vals objects-no-measures) :shared-libs shared-libs}])
+       [:> color-selection-menu*
+        {:file-id file-id
+         :type type
+         :shapes (vals objects-no-measures)
+         :libraries shared-libs}])
 
      (when-not (empty? shadow-ids)
        [:& shadow-menu {:type type :ids shadow-ids :values shadow-values}])

frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs

@@ -15,7 +15,7 @@
    [app.main.store :as st]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
-   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu*]]
    [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu fill-attrs]]
    [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell]
@@ -146,7 +146,11 @@
                       :disable-stroke-style true}]
 
      (when (= :multiple (:fills fill-values))
-       [:& color-selection-menu {:type type :shapes [shape] :file-id file-id :shared-libs shared-libs}])
+       [:> color-selection-menu*
+        {:type type
+         :shapes [shape]
+         :file-id file-id
+         :libraries shared-libs}])
 
      [:& shadow-menu
       {:ids ids