mirror of
https://github.com/penpot/penpot.git
synced 2025-01-06 14:50:20 -05:00
Use context
This commit is contained in:
Florian Schroedl
parent
db22beb857
commit
4f96550bca
4 changed files with 88 additions and 41 deletions
|
|
@ -31,3 +31,5 @@
|
|||
(def workspace-read-only? (mf/create-context nil))
|
||||
(def is-component? (mf/create-context false))
|
||||
(def sidebar (mf/create-context nil))
|
||||
|
||||
(def token-sets (mf/create-context nil))
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
[rumext.v2 :as mf]
|
||||
[app.main.ui.workspace.tokens.sets-context :as sets-context]))
|
||||
|
||||
(def ^:private chevron-icon
|
||||
(i/icon-xref :arrow (stl/css :chevron-icon)))
|
||||
|
|
@ -29,9 +30,8 @@
|
|||
(dom/stop-propagation event)
|
||||
(st/emit! (wdt/delete-token-set id)))
|
||||
|
||||
(defn on-rename-token-set [name token-set]
|
||||
(let [new-token-set (assoc token-set :name name)]
|
||||
(st/emit! (wdt/update-token-set new-token-set))))
|
||||
(defn on-update-token-set [token-set]
|
||||
(st/emit! (wdt/update-token-set token-set)))
|
||||
|
||||
(mf/defc editing-node
|
||||
[{:keys [default-value on-cancel on-submit]}]
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
:default-value default-value}]))
|
||||
|
||||
(mf/defc sets-tree
|
||||
[{:keys [token-set token-set-active? token-set-selected? on-select on-toggle editing? set-editing-node on-rename] :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
|
||||
selected? (and set? (token-set-selected? id))
|
||||
visible? (token-set-active? id)
|
||||
|
|
@ -71,15 +71,10 @@
|
|||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(when-not editing-node?
|
||||
(on-select id))))
|
||||
on-edit (mf/use-callback
|
||||
(mf/deps editing-node?)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(set-editing-node id)))]
|
||||
(on-select id))))]
|
||||
[:div {:class (stl/css :set-item-container)
|
||||
:on-click on-select
|
||||
:on-double-click on-edit}
|
||||
:on-double-click #(on-edit id)}
|
||||
[:div {:class (stl/css-case :set-item-group group?
|
||||
:set-item-set set?
|
||||
:selected-set selected?)}
|
||||
|
|
@ -92,10 +87,8 @@
|
|||
(if set? i/document i/group)]
|
||||
(if editing-node?
|
||||
[:& editing-node {:default-value name
|
||||
:on-submit #(do
|
||||
(on-rename % token-set)
|
||||
(set-editing-node nil))
|
||||
:on-cancel #(set-editing-node nil)}]
|
||||
:on-submit #(on-submit (assoc token-set :name %))
|
||||
:on-cancel on-cancel}]
|
||||
[:*
|
||||
[:div {:class (stl/css :set-name)} name]
|
||||
[:div {:class (stl/css :delete-set)}
|
||||
|
|
@ -118,20 +111,29 @@
|
|||
:selected-set-id selected-token-set-id)])]))])]]))
|
||||
|
||||
(mf/defc controlled-sets-list
|
||||
[{:keys [token-sets] :as props}]
|
||||
(let [editing-id (mf/use-state nil)
|
||||
editing? (mf/use-callback
|
||||
(mf/deps editing-id)
|
||||
#(= @editing-id %))
|
||||
set-editing-node #(reset! editing-id %)]
|
||||
[{:keys [token-sets on-rename] :as props}]
|
||||
(let [{:keys [editing? new? on-edit on-reset]} (sets-context/use-context)]
|
||||
[:ul {:class (stl/css :sets-list)}
|
||||
(for [[id token-set] token-sets]
|
||||
[:& sets-tree (-> (assoc props
|
||||
:key id
|
||||
:token-set token-set
|
||||
:editing? editing?
|
||||
:set-editing-node set-editing-node)
|
||||
(dissoc :token-sets))])]))
|
||||
:set-editing-node on-edit
|
||||
:on-edit on-edit
|
||||
:on-submit #(do
|
||||
(on-rename %)
|
||||
(on-reset))
|
||||
:on-cancel on-reset)
|
||||
(dissoc :token-sets))])
|
||||
(when new?
|
||||
[:& sets-tree {:token-set {}
|
||||
:token-set-active? (constantly true)
|
||||
:token-set-selected? (constantly true)
|
||||
:on-select identity
|
||||
:editing? (constantly true)
|
||||
:set-editing-node on-edit}])]))
|
||||
|
||||
|
||||
(mf/defc sets-list
|
||||
[{:keys []}]
|
||||
|
|
@ -153,4 +155,4 @@
|
|||
:token-set-active? token-set-active?
|
||||
:on-select on-select-token-set-click
|
||||
:on-toggle on-toggle-token-set-click
|
||||
:on-rename on-rename-token-set}]))
|
||||
:on-rename on-update-token-set}]))
|
||||
|
|
|
|||
34
frontend/src/app/main/ui/workspace/tokens/sets_context.cljs
Normal file
34
frontend/src/app/main/ui/workspace/tokens/sets_context.cljs
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
(ns app.main.ui.workspace.tokens.sets-context
|
||||
(:require
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def initial {:editing-id nil
|
||||
:new? false})
|
||||
|
||||
(def context (mf/create-context initial))
|
||||
|
||||
(mf/defc provider
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [children (unchecked-get props "children")
|
||||
state (mf/use-state initial)]
|
||||
[:& (mf/provider context) {:value state}
|
||||
children]))
|
||||
|
||||
(defn use-context []
|
||||
(let [ctx (mf/use-ctx context)
|
||||
{:keys [editing-id new?]} @ctx
|
||||
editing? (mf/use-callback
|
||||
(mf/deps editing-id)
|
||||
#(= editing-id %))
|
||||
on-edit (mf/use-fn
|
||||
#(swap! ctx assoc :editing-id %))
|
||||
on-create (mf/use-fn
|
||||
#(swap! ctx assoc :editing-id (random-uuid) :new? true))
|
||||
on-reset (mf/use-fn
|
||||
#(reset! ctx initial))]
|
||||
{:editing? editing?
|
||||
:new? new?
|
||||
:on-edit on-edit
|
||||
:on-create on-create
|
||||
:on-reset on-reset}))
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.tokens :as wdt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.assets.common :as cmm]
|
||||
[app.main.ui.workspace.tokens.changes :as wtch]
|
||||
|
|
@ -22,7 +22,9 @@
|
|||
[app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
|
||||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[app.main.ui.workspace.tokens.sets :refer [sets-list]]
|
||||
[app.main.ui.workspace.tokens.sets-context :as sets-context]
|
||||
[app.main.ui.workspace.tokens.style-dictionary :as sd]
|
||||
[app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[app.main.ui.workspace.tokens.token-types :as wtty]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -198,23 +200,30 @@
|
|||
[:& theme-select]
|
||||
[:& edit-button {:create? (empty? ordered-themes)}]]]))
|
||||
|
||||
(mf/defc add-set-button
|
||||
[{:keys [on-open]}]
|
||||
(let [{:keys [on-create]} (sets-context/use-context)]
|
||||
[:button {:class (stl/css :add-set)
|
||||
:on-click #(do
|
||||
(on-open)
|
||||
(on-create))}
|
||||
i/add]))
|
||||
|
||||
(mf/defc sets-sidebar
|
||||
[]
|
||||
(let [open? (mf/use-state true)]
|
||||
[:div {:class (stl/css :sets-sidebar)}
|
||||
[:div {:class (stl/css :sidebar-header)}
|
||||
[:& title-bar {:collapsable true
|
||||
:collapsed (not @open?)
|
||||
:all-clickable true
|
||||
:title "SETS"
|
||||
:on-collapsed #(swap! open? not)}]
|
||||
[:button {:class (stl/css :add-set)
|
||||
:on-click #(do
|
||||
(reset! open? true)
|
||||
(on-set-add-click %))}
|
||||
i/add]]
|
||||
(when @open?
|
||||
[:& sets-list])]))
|
||||
(let [open? (mf/use-state true)
|
||||
on-open (mf/use-fn #(reset! open? true))]
|
||||
[:& sets-context/provider {}
|
||||
[:div {:class (stl/css :sets-sidebar)}
|
||||
[:div {:class (stl/css :sidebar-header)}
|
||||
[:& title-bar {:collapsable true
|
||||
:collapsed (not @open?)
|
||||
:all-clickable true
|
||||
:title "SETS"
|
||||
:on-collapsed #(swap! open? not)}
|
||||
[:& add-set-button {:on-open on-open}]]]
|
||||
(when @open?
|
||||
[:& sets-list])]]))
|
||||
|
||||
(mf/defc tokens-explorer
|
||||
[_props]
|
||||
|
|
|
|||
Loading…
Reference in a new issue