⚡ Add minor optimizations to tab-container react component

frontend/src/app/main/ui/components/tab_container.cljs

@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.icons :as i]
+   [app.util.array :as array]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -17,41 +18,32 @@
 
 (mf/defc tab-element
   {::mf/wrap-props false}
-  [props]
+  [{:keys [children]}]
-  (let [children (unchecked-get props "children")]
+  [:div {:class (stl/css :tab-element)} children])
-    [:div {:class (stl/css :tab-element)}
-     children]))
 
 (mf/defc tab-container
   {::mf/wrap-props false}
-  [props]
+  [{:keys [children selected on-change-tab collapsable handle-collapse header-class content-class]}]
-  (let [children        (->>
+  (let [children  (-> (array/normalize-to-array children)
-                         (unchecked-get props "children")
+                      (array/without-nils))
-                         (filter some?))
-        selected        (unchecked-get props "selected")
-        on-change       (unchecked-get props "on-change-tab")
-        collapsable?    (unchecked-get props "collapsable?")
-        handle-collapse (unchecked-get props "handle-collapse")
-        class           (unchecked-get props "class")
-        content-class   (unchecked-get props "content-class")
 
-        state           (mf/use-state #(or selected (-> children first .-props .-id)))
+        selected* (mf/use-state #(or selected (-> children first .-props .-id)))
-        selected        (or selected @state)
+        selected  (or selected @selected*)
 
-        select-fn
+        on-click  (mf/use-fn
-        (mf/use-fn
+                   (mf/deps on-change-tab)
-         (mf/deps on-change)
                    (fn [event]
                      (let [id (-> event
                                   (dom/get-current-target)
                                   (dom/get-data "id")
                                   (keyword))]
-             (reset! state id)
+                       (reset! selected* id)
-             (when (fn? on-change) (on-change id)))))]
+                       (when (fn? on-change-tab)
+                         (on-change-tab id)))))]
 
     [:div {:class (stl/css :tab-container)}
-     [:div {:class (dm/str class " " (stl/css :tab-container-tabs))}
+     [:div {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
-      (when collapsable?
+      (when ^boolean collapsable
         [:button
          {:on-click handle-collapse
           :class (stl/css :collapse-sidebar)
@@ -61,13 +53,16 @@
        (for [tab children]
          (let [props (.-props tab)
                id    (.-id props)
-               title (.-title props)]
+               title (.-title props)
-           [:div
+               sid   (d/name id)]
-            {:key (str/concat "tab-" (d/name id))
+           [:div {:key (str/concat "tab-" sid)
-             :data-id (d/name id)
+                  :data-id sid
-             :on-click select-fn
+                  :on-click on-click
-             :class  (stl/css-case :tab-container-tab-title true
+                  :class  (stl/css-case
+                           :tab-container-tab-title true
                            :current (= selected id))}
             title]))]]
+
      [:div {:class (dm/str content-class " " (stl/css  :tab-container-content))}
-      (d/seek #(= selected (-> % .-props .-id)) children)]]))
+      (d/seek #(= selected (-> % .-props .-id))
+              children)]]))

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

@@ -311,7 +311,7 @@
          [:& tab-container
           {:on-change-tab set-tab!
            :selected @active-color-tab
-           :collapsable? false}
+           :collapsable false}
 
           [:& tab-element {:id :ramp :title i/rgba-refactor}
            (if picking-color?

frontend/src/app/main/ui/workspace/libraries.cljs

@@ -502,7 +502,7 @@
         [:& tab-container
          {:on-change-tab on-tab-change
           :selected selected-tab
-          :collapsable? false}
+          :collapsable false}
          [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
           [:div {:class (stl/css :libraries-content)}
            [:& libraries-tab {:file-id file-id

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

@@ -83,10 +83,9 @@
          [:& tab-container
           {:on-change-tab on-tab-change
            :selected section
-           :shortcuts? shortcuts?
+           :collapsable true
-           :collapsable? true
            :handle-collapse handle-collapse
-           :class (stl/css :tab-spacing)}
+           :header-class (stl/css :tab-spacing)}
           [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
            [:div {:class (stl/css :layers-tab)
                   :style #js {"--height" (str size-pages "px")}}

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

@@ -103,9 +103,9 @@
      [:& tab-container
       {:on-change-tab on-change-tab
        :selected section
-       :collapsable? false
+       :collapsable false
        :content-class (stl/css :content-class)
-       :class (stl/css :tab-spacing)}
+       :header-class (stl/css :tab-spacing)}
       [:& tab-element {:id :design
                        :title (tr "workspace.options.design")}
        [:div {:class (stl/css :element-options)}

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -299,6 +299,7 @@
                       (not (cfh/is-direct-child-of-root? shape))
                       (empty? (get shape :fills)))))
 
+
              hover-shape
              (->> ids
                   (remove remove-id?)

frontend/src/app/util/array.cljs

@@ -34,3 +34,13 @@
    (.push ^js a v1 v2 v3 v4 v5 v6)
    a))
 
+(defn normalize-to-array
+  "If `o` is an array, returns it as-is, if not, wrap into an array."
+  [o]
+  (if (array? o)
+    o
+    #js [o]))
+
+(defn without-nils
+  [^js/Array o]
+  (.filter o (fn [v] (some? v))))