🐛 Fix okulary and tab component

frontend/deps.edn

@@ -8,7 +8,7 @@
   metosin/reitit-core {:mvn/version "0.5.17"}
 
   funcool/beicon {:mvn/version "2021.07.05-1"}
-  funcool/okulary {:mvn/version "2022.04.01-10"}
+  funcool/okulary {:mvn/version "2022.04.07-12"}
   funcool/potok {:mvn/version "2021.09.20-0"}
   funcool/rumext {:mvn/version "2022.03.31-133"}
   funcool/tubax {:mvn/version "2021.05.20-0"}

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

@@ -5,29 +5,47 @@
 ;; Copyright (c) UXBOX Labs SL
 
 (ns app.main.ui.components.tab-container
-  (:require [rumext.alpha :as mf]))
+  (:require
+   [app.common.data :as d]
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]))
 
 (mf/defc tab-element
-  [{:keys [children]}]
+  {::mf/wrap-props false}
-  [:div.tab-element
+  [props]
-   [:div.tab-element-content children]])
+  (let [children (unchecked-get props "children")]
+    [:div.tab-element
+     [:div.tab-element-content children]]))
 
 (mf/defc tab-container
-  [{:keys [children selected on-change-tab]}]
+  {::mf/wrap-props false}
-  (let [first-id (-> children first .-props .-id)
+  [props]
-        state (mf/use-state {:selected first-id})
+  (let [children  (unchecked-get props "children")
-        selected (or selected (:selected @state))
+        selected  (unchecked-get props "selected")
-        handle-select (fn [tab]
+        on-change (unchecked-get props "on-change-tab")
-                        (let [id (-> tab .-props .-id)]
+
-                          (swap! state assoc :selected id)
+        state     (mf/use-state #(or selected (-> children first .-props .-id)))
-                          (when on-change-tab (on-change-tab id))))]
+        selected  (or selected @state)
+
+        select-fn
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [event]
+           (let [id (d/read-string (.. event -target -dataset -id))]
+             (reset! state id)
+             (when (fn? on-change) (on-change id)))))]
+
     [:div.tab-container
      [:div.tab-container-tabs
       (for [tab children]
-        [:div.tab-container-tab-title
+        (let [props (.-props tab)
-         {:key (str "tab-" (-> tab .-props .-id))
+              id    (.-id props)
-          :on-click (partial handle-select tab)
+              title (.-title props)]
-          :class (when (= selected (-> tab .-props .-id)) "current")}
+          [:div.tab-container-tab-title
-         (-> tab .-props .-title)])]
+           {:key (str/concat "tab-" (d/name id))
+            :data-id (pr-str id)
+            :on-click select-fn
+            :class (when (= selected id) "current")}
+           title]))]
      [:div.tab-container-content
-      (filter #(= selected (-> % .-props .-id)) children)]]))
+      (d/seek #(= selected (-> % .-props .-id)) children)]]))

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

@@ -27,7 +27,7 @@
 
 (mf/defc left-sidebar
   {:wrap [mf/memo]}
-  [{:keys [layout ] :as props}]
+  [{:keys [layout] :as props}]
   (let [section (cond (contains? layout :layers) :layers
                       (contains? layout :assets) :assets)