diff --git a/frontend/src/app/main/ui/workspace/tokens/management.cljs b/frontend/src/app/main/ui/workspace/tokens/management.cljs index 1f124b7b8b..6ca49b90f6 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management.cljs @@ -5,6 +5,7 @@ [app.common.types.shape.layout :as ctsl] [app.common.types.tokens-lib :as ctob] [app.config :as cf] + [app.main.data.modal :as modal] [app.main.data.style-dictionary :as sd] [app.main.data.workspace.tokens.application :as dwta] [app.main.data.workspace.tokens.library-edit :as dwtl] @@ -13,6 +14,7 @@ [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.typography.text :refer [text*]] [app.main.ui.workspace.tokens.management.context-menu :refer [token-context-menu]] + [app.main.ui.workspace.tokens.management.forms.rename-node-modal :refer [rename-node-modal*]] [app.main.ui.workspace.tokens.management.group :refer [token-group*]] [app.main.ui.workspace.tokens.management.node-context-menu :refer [token-node-context-menu*]] [app.util.array :as array] @@ -164,6 +166,17 @@ (st/emit! (dwtl/toggle-token-path (str (name type) "." path))) (st/emit! (dwtl/toggle-token-path (name type))))))) + ;; node-to-rename (mf/use-state nil) + ;; node-to-rename* (deref node-to-rename) + + rename-node + (mf/with-memo [] + (fn [node type] + (mf/portal + (st/emit! (dwtl/assign-token-node-context-menu nil) + (modal/show :tokens/rename-node {:node node + :type type}))))) + delete-node (mf/with-memo [selected-token-set-tokens selected-token-set-id] (fn [node type] @@ -191,7 +204,8 @@ [:* [:& token-context-menu {:on-delete-token delete-token}] - [:> token-node-context-menu* {:on-delete-node delete-node}] + [:> token-node-context-menu* {:on-rename-node rename-node + :on-delete-node delete-node}] [:> selected-set-info* {:tokens-lib tokens-lib :selected-token-set-id selected-token-set-id}] diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.cljs new file mode 100644 index 0000000000..4a7ae1f2bc --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/rename_node_modal.cljs @@ -0,0 +1,30 @@ +(ns app.main.ui.workspace.tokens.management.forms.rename-node-modal + (:require-macros [app.main.style :as stl]) + (:require + [app.main.data.modal :as modal] + [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] + [app.main.ui.ds.foundations.assets.icon :as i] + [app.util.i18n :refer [tr]] + [rumext.v2 :as mf])) + +(mf/defc rename-node-modal* + {::mf/register modal/components + ::mf/register-as :tokens/rename-node} + [{:keys [node type]}] + + (let [on-close + (mf/use-fn + (mf/deps []) + (fn [] + (prn "Close rename node modal")))] + + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog)} + [:> icon-button* {:class (stl/css :close-btn) + :on-click on-close + :aria-label (tr "labels.close") + :variant "ghost" + :icon i/close}] + "Rename node modal for node:" + [:pre (str node)] + [:pre (str type)]]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs index 4e272f7bdd..2d434d5c8a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/node_context_menu.cljs @@ -13,6 +13,7 @@ (def ^:private schema:token-node-context-menu [:map + [:on-rename-node fn?] [:on-delete-node fn?]]) (def ^:private tokens-node-menu-ref @@ -25,7 +26,7 @@ (mf/defc token-node-context-menu* {::mf/schema schema:token-node-context-menu} - [{:keys [on-delete-node]}] + [{:keys [on-rename-node on-delete-node]}] (let [mdata (mf/deref tokens-node-menu-ref) is-open? (boolean mdata) dropdown-ref (mf/use-ref) @@ -35,7 +36,13 @@ dropdown-direction-change* (mf/use-ref 0) top (+ (get-in mdata [:position :y]) 5) left (+ (get-in mdata [:position :x]) 5) - + rename-node (mf/use-fn + (mf/deps mdata) + (fn [] + (let [node (get mdata :node) + type (get mdata :type)] + (when node + on-rename-node node type)))) delete-node (mf/use-fn (mf/deps mdata) (fn [] @@ -75,6 +82,11 @@ :on-context-menu prevent-default} (when mdata [:ul {:class (stl/css :token-node-context-menu-list)} + [:li {:class (stl/css :token-node-context-menu-listitem)} + [:button {:class (stl/css :token-node-context-menu-action) + :type "button" + :on-click rename-node} + (tr "labels.rename")]] [:li {:class (stl/css :token-node-context-menu-listitem)} [:button {:class (stl/css :token-node-context-menu-action) :type "button"