♻️ Refactor editable-label component

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}]
+  {::mf/wrap-props false}
-  (let [display-value (get props :display-value value)
+  [props]
-        tooltip (get props :tooltip)
+  (let [display-value     (unchecked-get props "display-value")
-        input (mf/use-ref nil)
+        value             (unchecked-get props "value")
-        state (mf/use-state (:editing false))
+        on-change         (unchecked-get props "on-change")
-        new-css-system (mf/use-ctx ctx/new-css-system)
+        on-cancel         (unchecked-get props "on-cancel")
-        is-editing (:editing @state)
+        editing?          (unchecked-get props "editing")
-        start-editing (fn []
+        dbl-click?        (unchecked-get props "disable-dbl-click")
-                        (swap! state assoc :editing true)
+        class             (unchecked-get props "class")
-                        (timers/schedule 100 #(dom/focus! (mf/ref-val input))))
+        tooltip           (unchecked-get props "tooltip")
-        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)
 
-                      (kbd/enter? e)
+        new-css-system    (mf/use-ctx ctx/new-css-system)
-                      (accept-editing)))]
+        input-ref         (mf/use-ref nil)
+        internal-editing* (mf/use-state false)
+        internal-editing? (deref internal-editing*)
 
-    (mf/use-effect
+        start-edition
-     (mf/deps editing?)
+        (mf/use-fn
-     (fn []
+         (fn []
-       (when (and editing? (not (:editing @state)))
+           (reset! internal-editing* true)
-         (start-editing))))
+           (timers/schedule 100 (fn []
+                                  (when-let [node (mf/ref-val input-ref)]
+                                    (dom/focus! node))))))
 
-    (if is-editing
+        stop-edition
-      [:div.editable-label {:class class-name}
+        (mf/use-fn #(reset! internal-editing* false))
-       [: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}
+        accept-edition
-        (if new-css-system
+        (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
+      [:span.editable-label
-                             :title tooltip
+       {:class class
-                             :on-double-click on-dbl-click} display-value])))
+        :title tooltip
+        :on-double-click on-dbl-click}
+       display-value])))

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
+              {:class (dom/classnames
-                            (css :cell-name) listing-thumbs?
+                       (css :cell-name) listing-thumbs?
-                            (css :item-name) (not listing-thumbs?)
+                       (css :item-name) (not listing-thumbs?)
-                            (css :editing) renaming?)
+                       (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?
+               :editing renaming?
-               :disable-dbl-click? true
+               :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
+              {:class (dom/classnames
-                            :cell-name listing-thumbs?
+                       :cell-name listing-thumbs?
-                            :item-name (not listing-thumbs?)
+                       :item-name (not listing-thumbs?)
-                            :editing renaming?)
+                       :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?
+               :editing renaming?
-               :disable-dbl-click? true
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 

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
+              {:class (dom/classnames
-                            (css :cell-name) listing-thumbs?
+                       (css :cell-name) listing-thumbs?
-                            (css :item-name) (not listing-thumbs?)
+                       (css :item-name) (not listing-thumbs?)
-                            (css :editing) renaming?)
+                       (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?
+               :editing renaming?
-               :disable-dbl-click? true
+               :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
+              {:class (dom/classnames
-                            :cell-name listing-thumbs?
+                       :cell-name listing-thumbs?
-                            :item-name (not listing-thumbs?)
+                       :item-name (not listing-thumbs?)
-                            :editing renaming?)
+                       :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?
+               :editing renaming?
-               :disable-dbl-click? true
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]