Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 08:09:14 -05:00
Code Issues Activity

Allow tokens sets component to be controlled

Browse source
This commit is contained in:
Florian Schroedl 2024-08-23 16:34:33 +02:00
parent 1c0233098d
commit 8a20e3a698
2 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -96,9 +96,24 @@
(mf/defc edit-theme (mf/defc edit-theme
[{:keys [state]}] [{:keys [state]}]
(let [{:keys [theme]} @state] (let [{:keys [theme]} @state
token-sets (mf/deref refs/workspace-token-sets)
selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
token-set-selected? (mf/use-callback
(mf/deps selected-token-set-id)
(fn [id]
(= id selected-token-set-id)))
active-token-set-ids (mf/deref refs/workspace-active-set-ids)
token-set-active? (mf/use-callback
(mf/deps active-token-set-ids)
(fn [id]
(get active-token-set-ids id)))]
[:div {:class (stl/css :sets-list-wrapper)} [:div {:class (stl/css :sets-list-wrapper)}
[:& wts/sets-list]])) [:& wts/controlled-sets-list
{:token-sets token-sets
:selected-token-set-id selected-token-set-id
:token-set-selected? token-set-selected?
:token-set-active? token-set-active?}]]))
(mf/defc themes (mf/defc themes
[{:keys [] :as _args}] [{:keys [] :as _args}]

18
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -64,6 +64,15 @@
:set-id child-id :set-id child-id
:selected-set-id selected-token-set-id)])])])) :selected-set-id selected-token-set-id)])])]))
(mf/defc controlled-sets-list
[{:keys [token-sets] :as props}]
[:ul {:class (stl/css :sets-list)}
(for [[id token-set] token-sets]
[:& sets-tree (-> (assoc props
:key id
:token-set token-set)
(dissoc :token-sets))])])
(mf/defc sets-list (mf/defc sets-list
[{:keys []}] [{:keys []}]
(let [token-sets (mf/deref refs/workspace-token-sets) (let [token-sets (mf/deref refs/workspace-token-sets)
@ -77,11 +86,8 @@
(mf/deps active-token-set-ids) (mf/deps active-token-set-ids)
(fn [id] (fn [id]
(get active-token-set-ids id)))] (get active-token-set-ids id)))]
[:ul {:class (stl/css :sets-list)} [:& controlled-sets-list
(for [[id token-set] token-sets] {:token-sets token-sets
[:& sets-tree
{:key id
:token-set token-set
:selected-token-set-id selected-token-set-id :selected-token-set-id selected-token-set-id
:token-set-selected? token-set-selected? :token-set-selected? token-set-selected?
:token-set-active? token-set-active?}])])) :token-set-active? token-set-active?}]))