Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 14:39:45 -05:00
Code Issues Activity

Allow creating token sets

Browse source
This commit is contained in:
Florian Schroedl 2024-08-27 14:26:06 +02:00
parent d4910ce2fc
commit 4dd3367bdd
1 changed files with 42 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -33,6 +33,9 @@
(defn on-update-token-set [token-set] (defn on-update-token-set [token-set]
(st/emit! (wdt/update-token-set token-set))) (st/emit! (wdt/update-token-set token-set)))
(defn on-create-token-set [token-set]
(st/emit! (wdt/create-token-set token-set)))
(mf/defc editing-node (mf/defc editing-node
[{:keys [default-value on-cancel on-submit]}] [{:keys [default-value on-cancel on-submit]}]
(let [ref (mf/use-ref) (let [ref (mf/use-ref)
@ -58,7 +61,16 @@
:default-value default-value}])) :default-value default-value}]))
(mf/defc sets-tree (mf/defc sets-tree
[{:keys [token-set token-set-active? token-set-selected? editing? on-select on-toggle on-edit on-submit on-cancel] :as _props}] [{:keys [token-set
token-set-active?
token-set-selected?
editing?
on-select
on-toggle
on-edit
on-submit
on-cancel]
:as _props}]
(let [{:keys [id name _children]} token-set (let [{:keys [id name _children]} token-set
selected? (and set? (token-set-selected? id)) selected? (and set? (token-set-selected? id))
visible? (token-set-active? id) visible? (token-set-active? id)
@ -111,29 +123,38 @@
:selected-set-id selected-token-set-id)])]))])]])) :selected-set-id selected-token-set-id)])]))])]]))
(mf/defc controlled-sets-list (mf/defc controlled-sets-list
[{:keys [token-sets on-rename] :as props}] [{:keys [token-sets
(let [{:keys [editing? new? on-edit on-reset]} (sets-context/use-context)] on-update-token-set
token-set-selected?
token-set-active?
on-create-token-set
on-select]
:as _props}]
(let [{:keys [editing? new? on-edit on-create on-reset]} (sets-context/use-context)]
[:ul {:class (stl/css :sets-list)} [:ul {:class (stl/css :sets-list)}
(for [[id token-set] token-sets] (for [[id token-set] token-sets]
[:& sets-tree (-> (assoc props [:& sets-tree {:key id
:key id
:token-set token-set :token-set token-set
:token-set-selected? (if new? (constantly false) token-set-selected?)
:token-set-active? token-set-active?
:editing? editing? :editing? editing?
:set-editing-node on-edit :on-select on-select
:on-edit on-edit :on-edit on-edit
:on-submit #(do :on-submit #(do
(on-rename %) (on-update-token-set %)
(on-reset)) (on-reset))
:on-cancel on-reset) :on-cancel on-reset}])
(dissoc :token-sets))])
(when new? (when new?
[:& sets-tree {:token-set {} [:& sets-tree {:token-set {:name ""}
:token-set-active? (constantly true)
:token-set-selected? (constantly true) :token-set-selected? (constantly true)
:on-select identity :token-set-active? (constantly true)
:editing? (constantly true) :editing? (constantly true)
:set-editing-node on-edit}])])) :on-select (constantly nil)
:on-edit on-create
:on-submit #(do
(on-create-token-set %)
(on-reset))
:on-cancel on-reset}])]))
(mf/defc sets-list (mf/defc sets-list
[{:keys []}] [{:keys []}]
@ -150,9 +171,9 @@
(get active-token-set-ids id)))] (get active-token-set-ids id)))]
[:& controlled-sets-list [:& controlled-sets-list
{:token-sets token-sets {:token-sets token-sets
: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?
:on-select on-select-token-set-click :on-select on-select-token-set-click
:on-toggle on-toggle-token-set-click :on-toggle on-toggle-token-set-click
:on-rename on-update-token-set}])) :on-update-token-set on-update-token-set
:on-create-token-set on-create-token-set}]))