0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 23:35:58 -05:00

Use new call convention on all components of tokens sidebar

This commit is contained in:
Andrey Antukh 2025-02-05 18:04:46 +01:00
parent d46d80bd5c
commit 2bac94ad5c

View file

@ -19,6 +19,7 @@
[app.main.ui.components.dropdown-menu :refer [dropdown-menu [app.main.ui.components.dropdown-menu :refer [dropdown-menu
dropdown-menu-item*]] dropdown-menu-item*]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.ds.foundations.typography.text :refer [text*]]
@ -161,15 +162,24 @@
[(seq (array/sort! empty)) [(seq (array/sort! empty))
(seq (array/sort! filled))]))) (seq (array/sort! filled))])))
(mf/defc themes-header (mf/defc themes-header*
[_props] {::mf/private true}
(let [ordered-themes (mf/deref refs/workspace-token-themes-no-hidden) []
can-edit? (:can-edit (deref refs/permissions)) (let [ordered-themes
(mf/deref refs/workspace-token-themes-no-hidden)
permissions
(mf/use-ctx ctx/permissions)
can-edit?
(get permissions :can-edit)
open-modal open-modal
(mf/use-fn (mf/use-fn
(fn [e] (fn [e]
(dom/stop-propagation e) (dom/stop-propagation e)
(modal/show! :tokens/themes {})))] (modal/show! :tokens/themes {})))]
[:div {:class (stl/css :themes-wrapper)} [:div {:class (stl/css :themes-wrapper)}
[:span {:class (stl/css :themes-header)} (tr "labels.themes")] [:span {:class (stl/css :themes-header)} (tr "labels.themes")]
(if (empty? ordered-themes) (if (empty? ordered-themes)
@ -191,13 +201,24 @@
(tr "workspace.token.no-permission-themes"))} (tr "workspace.token.no-permission-themes"))}
[:& theme-select]]))])) [:& theme-select]]))]))
(mf/defc add-set-button (mf/defc add-set-button*
[{:keys [on-open style]}] {::mf/private true}
(let [{:keys [on-create new-path]} (sets-context/use-context) [{:keys [style]}]
on-click #(do (let [{:keys [on-create new-path]}
(on-open) (sets-context/use-context)
(on-create []))
can-edit? (:can-edit (deref refs/permissions))] permissions
(mf/use-ctx ctx/permissions)
can-edit?
(get permissions :can-edit)
on-click
(mf/use-fn
(mf/deps on-create)
(fn []
(on-create [])))]
(if (= style "inline") (if (= style "inline")
(when-not new-path (when-not new-path
(if can-edit? (if can-edit?
@ -216,36 +237,39 @@
:on-click on-click :on-click on-click
:aria-label (tr "workspace.token.add set")}])))) :aria-label (tr "workspace.token.add set")}]))))
(mf/defc theme-sets-list (mf/defc theme-sets-list*
[{:keys [on-open]}] {::mf/private true}
[]
(let [token-sets (mf/deref refs/workspace-ordered-token-sets) (let [token-sets (mf/deref refs/workspace-ordered-token-sets)
{:keys [new-path] :as ctx} (sets-context/use-context)] {:keys [new-path] :as ctx} (sets-context/use-context)]
(if (and (empty? token-sets) (if (and (empty? token-sets)
(not new-path)) (not new-path))
[:& add-set-button {:on-open on-open [:> add-set-button* {:style "inline"}]
:style "inline"}]
[:& h/sortable-container {} [:& h/sortable-container {}
[:& sets-list]]))) [:& sets-list]])))
(mf/defc themes-sets-tab* (mf/defc themes-sets-tab*
{::mf/private true} {::mf/private true}
[{:keys [resize-height]}] [{:keys [resize-height]}]
(let [open? (mf/use-state true) (let [permissions
on-open (mf/use-fn #(reset! open? true)) (mf/use-ctx ctx/permissions)
can-edit? (:can-edit (deref refs/permissions))]
can-edit?
(get permissions :can-edit)]
[:& sets-context/provider {} [:& sets-context/provider {}
[:& sets-context-menu] [:& sets-context-menu]
[:article {:data-testid "token-themes-sets-sidebar" [:article {:data-testid "token-themes-sets-sidebar"
:class (stl/css :sets-section-wrapper) :class (stl/css :sets-section-wrapper)
:style {"--resize-height" (str resize-height "px")}} :style {"--resize-height" (str resize-height "px")}}
[:div {:class (stl/css :sets-sidebar)} [:div {:class (stl/css :sets-sidebar)}
[:& themes-header] [:> themes-header*]
[:div {:class (stl/css :sidebar-header)} [:div {:class (stl/css :sidebar-header)}
[:& title-bar {:title (tr "labels.sets")} [:& title-bar {:title (tr "labels.sets")}
(when can-edit? (when can-edit?
[:& add-set-button {:on-open on-open [:> add-set-button* {:style "header"}])]]
:style "header"}])]]
[:& theme-sets-list {:on-open on-open}]]]])) [:> theme-sets-list* {}]]]]))
(mf/defc tokens-tab* (mf/defc tokens-tab*
[] []