Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 15:41:25 -05:00
Code Issues Activity

🐛 Fix okulary and tab component

Browse source
This commit is contained in:
Andrey Antukh 2022-04-07 23:52:00 +02:00
parent f2c0683803
commit 4143573868
3 changed files with 38 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/deps.edn
View file

@ -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"}

54
frontend/src/app/main/ui/components/tab_container.cljs
View file

@ -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)]]))

2
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -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)