mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
♻️ Refactor editable-label component
This commit is contained in:
Andrey Antukh
parent
fb942a9620
commit
08b35e19fb
3 changed files with 105 additions and 67 deletions
|
|
@ -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])))
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue