diff --git a/frontend/deps.edn b/frontend/deps.edn index 7e87cafce..0e51afcd2 100644 --- a/frontend/deps.edn +++ b/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"} diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 126acff2d..8c8d07ee0 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/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]}] - [:div.tab-element - [:div.tab-element-content children]]) + {::mf/wrap-props false} + [props] + (let [children (unchecked-get props "children")] + [:div.tab-element + [:div.tab-element-content children]])) (mf/defc tab-container - [{:keys [children selected on-change-tab]}] - (let [first-id (-> children first .-props .-id) - state (mf/use-state {:selected first-id}) - selected (or selected (:selected @state)) - handle-select (fn [tab] - (let [id (-> tab .-props .-id)] - (swap! state assoc :selected id) - (when on-change-tab (on-change-tab id))))] + {::mf/wrap-props false} + [props] + (let [children (unchecked-get props "children") + selected (unchecked-get props "selected") + on-change (unchecked-get props "on-change-tab") + + state (mf/use-state #(or selected (-> children first .-props .-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 - {:key (str "tab-" (-> tab .-props .-id)) - :on-click (partial handle-select tab) - :class (when (= selected (-> tab .-props .-id)) "current")} - (-> tab .-props .-title)])] + (let [props (.-props tab) + id (.-id props) + title (.-title props)] + [:div.tab-container-tab-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)]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 1b77fd22a..deb44f7b9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/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)