mirror of
https://github.com/penpot/penpot.git
synced 2025-03-09 14:21:42 -05:00
🐛 Fix okulary and tab component
This commit is contained in:
parent
f2c0683803
commit
4143573868
3 changed files with 38 additions and 20 deletions
|
@ -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"}
|
||||
|
|
|
@ -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)]]))
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue