diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs index 5100482393..7881e86c13 100644 --- a/frontend/src/app/main/ui/components/editable_label.cljs +++ b/frontend/src/app/main/ui/components/editable_label.cljs @@ -14,51 +14,89 @@ [rumext.v2 :as mf])) (mf/defc editable-label - [{:keys [value on-change on-cancel editing? disable-dbl-click? class-name] :as props}] - (let [display-value (get props :display-value value) - tooltip (get props :tooltip) - input (mf/use-ref nil) - state (mf/use-state (:editing false)) - new-css-system (mf/use-ctx ctx/new-css-system) - is-editing (:editing @state) - start-editing (fn [] - (swap! state assoc :editing true) - (timers/schedule 100 #(dom/focus! (mf/ref-val input)))) - stop-editing (fn [] (swap! state assoc :editing false)) - accept-editing (fn [] - (when (:editing @state) - (let [value (-> (mf/ref-val input) dom/get-value)] - (on-change value) - (stop-editing)))) - cancel-editing (fn [] - (stop-editing) - (when on-cancel (on-cancel))) - on-dbl-click (fn [_] (when (not disable-dbl-click?) (start-editing))) - on-key-up (fn [e] - (cond - (kbd/esc? e) - (cancel-editing) + {::mf/wrap-props false} + [props] + (let [display-value (unchecked-get props "display-value") + value (unchecked-get props "value") + on-change (unchecked-get props "on-change") + on-cancel (unchecked-get props "on-cancel") + editing? (unchecked-get props "editing") + dbl-click? (unchecked-get props "disable-dbl-click") + class (unchecked-get props "class") + tooltip (unchecked-get props "tooltip") - (kbd/enter? e) - (accept-editing)))] + new-css-system (mf/use-ctx ctx/new-css-system) + input-ref (mf/use-ref nil) + internal-editing* (mf/use-state false) + internal-editing? (deref internal-editing*) - (mf/use-effect - (mf/deps editing?) - (fn [] - (when (and editing? (not (:editing @state))) - (start-editing)))) + start-edition + (mf/use-fn + (fn [] + (reset! internal-editing* true) + (timers/schedule 100 (fn [] + (when-let [node (mf/ref-val input-ref)] + (dom/focus! node)))))) - (if is-editing - [:div.editable-label {:class class-name} - [:input.editable-label-input {:ref input - :default-value value - :on-key-up on-key-up - :on-blur cancel-editing}] - - [:span.editable-label-close {:on-click cancel-editing} - (if new-css-system + stop-edition + (mf/use-fn #(reset! internal-editing* false)) + + accept-edition + (mf/use-fn + (mf/deps internal-editing? on-change stop-edition) + (fn [] + (when internal-editing? + (let [value (dom/get-value (mf/ref-val input-ref))] + (when (fn? on-change) + (on-change value)) + + (stop-edition))))) + + cancel-edition + (mf/use-fn + (mf/deps stop-edition on-cancel) + (fn [] + (stop-edition) + (when (fn? on-cancel) + (on-cancel)))) + + + on-dbl-click + (mf/use-fn + (mf/deps dbl-click? start-edition) + (fn [_] + (when-not dbl-click? + (start-edition)))) + + on-key-up + (mf/use-fn + (mf/deps cancel-edition accept-edition) + (fn [event] + (cond + (kbd/esc? event) + (cancel-edition) + + (kbd/enter? event) + (accept-edition))))] + + (mf/with-effect [editing? internal-editing? start-edition] + (when (and editing? (not internal-editing?)) + (start-edition))) + + (if ^boolean internal-editing? + [:div.editable-label {:class class} + [:input.editable-label-input + {:ref input-ref + :default-value value + :on-key-up on-key-up + :on-blur cancel-edition}] + + [:span.editable-label-close {:on-click cancel-edition} + (if ^boolean new-css-system i/delete-text-refactor i/close)]] - [:span.editable-label {:class class-name - :title tooltip - :on-double-click on-dbl-click} display-value]))) + [:span.editable-label + {:class class + :title tooltip + :on-double-click on-dbl-click} + display-value]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index 295e2ac6f1..2e8999a068 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -146,15 +146,15 @@ (let [renaming? (= renaming (:id component))] [:* [:& editable-label - {:class-name (dom/classnames - (css :cell-name) listing-thumbs? - (css :item-name) (not listing-thumbs?) - (css :editing) renaming?) + {:class (dom/classnames + (css :cell-name) listing-thumbs? + (css :item-name) (not listing-thumbs?) + (css :editing) renaming?) :value (cph/merge-path-item (:path component) (:name component)) :tooltip (cph/merge-path-item (:path component) (:name component)) :display-value (:name component) - :editing? renaming? - :disable-dbl-click? true + :editing renaming? + :disable-dbl-click true :on-change do-rename :on-cancel cancel-rename}] @@ -185,15 +185,15 @@ (let [renaming? (= renaming (:id component))] [:* [:& editable-label - {:class-name (dom/classnames - :cell-name listing-thumbs? - :item-name (not listing-thumbs?) - :editing renaming?) + {:class (dom/classnames + :cell-name listing-thumbs? + :item-name (not listing-thumbs?) + :editing renaming?) :value (cph/merge-path-item (:path component) (:name component)) :tooltip (cph/merge-path-item (:path component) (:name component)) :display-value (:name component) - :editing? renaming? - :disable-dbl-click? true + :editing renaming? + :disable-dbl-click true :on-change do-rename :on-cancel cancel-rename}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs index cadc9d70ab..37f502b8fd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs @@ -108,15 +108,15 @@ (let [renaming? (= renaming (:id object))] [:* [:& editable-label - {:class-name (dom/classnames - (css :cell-name) listing-thumbs? - (css :item-name) (not listing-thumbs?) - (css :editing) renaming?) + {:class (dom/classnames + (css :cell-name) listing-thumbs? + (css :item-name) (not listing-thumbs?) + (css :editing) renaming?) :value (cph/merge-path-item (:path object) (:name object)) :tooltip (cph/merge-path-item (:path object) (:name object)) :display-value (:name object) - :editing? renaming? - :disable-dbl-click? true + :editing renaming? + :disable-dbl-click true :on-change do-rename :on-cancel cancel-rename}] @@ -145,15 +145,15 @@ (let [renaming? (= renaming (:id object))] [:* [:& editable-label - {:class-name (dom/classnames - :cell-name listing-thumbs? - :item-name (not listing-thumbs?) - :editing renaming?) + {:class (dom/classnames + :cell-name listing-thumbs? + :item-name (not listing-thumbs?) + :editing renaming?) :value (cph/merge-path-item (:path object) (:name object)) :tooltip (cph/merge-path-item (:path object) (:name object)) :display-value (:name object) - :editing? renaming? - :disable-dbl-click? true + :editing renaming? + :disable-dbl-click true :on-change do-rename :on-cancel cancel-rename}]