From 287213cfafc03d2e12b93ea222fc30616385a2be Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 27 Jun 2023 09:29:43 +0200 Subject: [PATCH] :sparkles: Refactor select all on input text click --- .../app/main/ui/components/color_input.cljs | 38 ++++++++++++---- .../app/main/ui/components/numeric_input.cljs | 44 ++++++++++++++----- .../workspace/sidebar/options/menus/blur.cljs | 5 --- .../workspace/sidebar/options/menus/fill.cljs | 7 ++- .../sidebar/options/menus/layer.cljs | 6 --- .../sidebar/options/menus/measures.cljs | 15 +------ .../sidebar/options/menus/shadow.cljs | 11 ----- .../sidebar/options/menus/stroke.cljs | 7 ++- .../sidebar/options/menus/typography.cljs | 6 --- .../sidebar/options/rows/color_row.cljs | 7 +-- .../sidebar/options/rows/input_row.cljs | 4 +- .../sidebar/options/rows/stroke_row.cljs | 9 ++-- 12 files changed, 81 insertions(+), 78 deletions(-) diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index 415472f6f..2882ce8da 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -27,19 +27,21 @@ {::mf/wrap-props false ::mf/forward-ref true} [props external-ref] - (let [value (obj/get props "value") - on-change (obj/get props "onChange") - on-blur (obj/get props "onBlur") + (let [value (obj/get props "value") + on-change (obj/get props "onChange") + on-blur (obj/get props "onBlur") + on-focus (obj/get props "onFocus") + select-on-focus? (obj/get props "data-select-on-focus" true) ;; We need a ref pointing to the input dom element, but the user ;; of this component may provide one (that is forwarded here). ;; So we use the external ref if provided, and the local one if not. - local-ref (mf/use-ref) - ref (or external-ref local-ref) + local-ref (mf/use-ref) + ref (or external-ref local-ref) ;; We need to store the handle-blur ref so we can call it on unmount - handle-blur-ref (mf/use-ref nil) - dirty-ref (mf/use-ref false) + handle-blur-ref (mf/use-ref nil) + dirty-ref (mf/use-ref false) parse-value (mf/use-callback @@ -109,14 +111,32 @@ (when (and (some? current) (not (.contains current target))) (dom/blur! current))))))) + on-mouse-up + (mf/use-callback + (fn [event] + (dom/prevent-default event))) + + handle-focus + (mf/use-callback + (fn [event] + (let [target (dom/get-target event)] + (when on-focus + (on-focus event)) + + (when select-on-focus? + (-> event (dom/get-target) (.select)) + ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect + (.addEventListener target "mouseup" on-mouse-up #js {"once" true}))))) + props (-> props - (obj/without ["value" "onChange"]) + (obj/without ["value" "onChange" "onFocus"]) (obj/set! "type" "text") (obj/set! "ref" ref) ;; (obj/set! "list" list-id) (obj/set! "defaultValue" value) (obj/set! "onKeyDown" handle-key-down) - (obj/set! "onBlur" handle-blur))] + (obj/set! "onBlur" handle-blur) + (obj/set! "onFocus" handle-focus))] (mf/use-effect (mf/deps value) diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs index 4218a6b37..cdc4ad970 100644 --- a/frontend/src/app/main/ui/components/numeric_input.cljs +++ b/frontend/src/app/main/ui/components/numeric_input.cljs @@ -23,16 +23,18 @@ {::mf/wrap-props false ::mf/forward-ref true} [props external-ref] - (let [value-str (obj/get props "value") - min-val-str (obj/get props "min") - max-val-str (obj/get props "max") - step-val-str (obj/get props "step") - wrap-value? (obj/get props "data-wrap") - on-change (obj/get props "onChange") - on-blur (obj/get props "onBlur") - title (obj/get props "title") - default-val (obj/get props "default") - nillable (obj/get props "nillable") + (let [value-str (obj/get props "value") + min-val-str (obj/get props "min") + max-val-str (obj/get props "max") + step-val-str (obj/get props "step") + wrap-value? (obj/get props "data-wrap") + on-change (obj/get props "onChange") + on-blur (obj/get props "onBlur") + on-focus (obj/get props "onFocus") + title (obj/get props "title") + default-val (obj/get props "default") + nillable (obj/get props "nillable") + select-on-focus? (obj/get props "data-select-on-focus" true) ;; We need a ref pointing to the input dom element, but the user ;; of this component may provide one (that is forwarded here). @@ -197,15 +199,33 @@ (when (and (some? current) (not (.contains current target))) (dom/blur! current))))))) + on-mouse-up + (mf/use-callback + (fn [event] + (dom/prevent-default event))) + + handle-focus + (mf/use-callback + (fn [event] + (let [target (dom/get-target event)] + (when on-focus + (on-focus event)) + + (when select-on-focus? + (-> event (dom/get-target) (.select)) + ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect + (.addEventListener target "mouseup" on-mouse-up #js {"once" true}))))) + props (-> props - (obj/without ["value" "onChange" "nillable"]) + (obj/without ["value" "onChange" "nillable" "onFocus"]) (obj/set! "className" "input-text") (obj/set! "type" "text") (obj/set! "ref" ref) (obj/set! "defaultValue" (fmt/format-number value)) (obj/set! "title" title) (obj/set! "onKeyDown" handle-key-down) - (obj/set! "onBlur" handle-blur))] + (obj/set! "onBlur" handle-blur) + (obj/set! "onFocus" handle-focus))] (mf/use-effect (mf/deps value) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index 25873fd56..8b6eb7895 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -11,15 +11,11 @@ [app.main.store :as st] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (def blur-attrs [:blur]) -(defn select-all [event] - (dom/select-text! (dom/get-target event))) - (defn create-blur [] (let [id (uuid/next)] {:id id @@ -86,7 +82,6 @@ (cond has-value? [:div.element-set-content - {:on-focus select-all} [:& input-row {:label "Value" :class "pixels" :min "0" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 4da297586..d6e82eeea 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -102,9 +102,7 @@ disable-drag (mf/use-state false) - select-all (fn [event] - (when (not @disable-drag) - (dom/select-text! (dom/get-target event))) + on-focus (fn [_] (reset! disable-drag true)) on-blur (fn [_] @@ -152,7 +150,8 @@ :on-detach (on-detach index) :on-remove (on-remove index) :disable-drag disable-drag - :select-all select-all + :on-focus on-focus + :data-select-on-focus (not @disable-drag) :on-blur on-blur}])]) (when (or (= type :frame) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 2c057eb5b..f8c8bb32d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -14,7 +14,6 @@ [app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.components.select :refer [select]] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -29,10 +28,6 @@ (d/coalesce 1) (* 100))))) -(defn select-all! - [event] - (some-> event dom/get-target dom/select-text!)) - (mf/defc layer-menu {::mf/wrap-props false} [props] @@ -170,7 +165,6 @@ [:> numeric-input {:value (opacity->string current-opacity) :placeholder (tr "settings.multiple") - :on-focus select-all! :on-change handle-opacity-change :min 0 :max 100}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 3169f5aef..1e3b1ec68 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -268,9 +268,7 @@ ;; interactions that navigate to it. (apply st/emit! (map #(dwi/remove-all-interactions-nav-to %) ids))) - (st/emit! (dwu/commit-undo-transaction undo-id)))))) - - select-all #(-> % (dom/get-target) (.select))] + (st/emit! (dwu/commit-undo-transaction undo-id))))))] (mf/use-layout-effect (mf/deps radius-mode @radius-multi?) @@ -316,7 +314,6 @@ [:> numeric-input {:min 0.01 :no-validate true :placeholder "--" - :on-focus select-all :on-change on-width-change :disabled disabled-width-sizing? :value (:width values)}]] @@ -325,7 +322,6 @@ [:> numeric-input {:min 0.01 :no-validate true :placeholder "--" - :on-focus select-all :on-change on-height-change :disabled disabled-height-sizing? :value (:height values)}]] @@ -345,14 +341,12 @@ [:div.input-element.Xaxis {:title (tr "workspace.options.x")} [:> numeric-input {:no-validate true :placeholder "--" - :on-focus select-all :on-change on-pos-x-change :disabled disabled-position-x? :value (:x values)}]] [:div.input-element.Yaxis {:title (tr "workspace.options.y")} [:> numeric-input {:no-validate true :placeholder "--" - :on-focus select-all :disabled disabled-position-y? :on-change on-pos-y-change :value (:y values)}]]]) @@ -368,7 +362,6 @@ :max 359 :data-wrap true :placeholder "--" - :on-focus select-all :on-change on-rotation-change :value (:rotation values)}]]]) @@ -396,7 +389,6 @@ {:placeholder "--" :ref radius-input-ref :min 0 - :on-focus select-all :on-change on-radius-1-change :value (:rx values)}]] @@ -406,7 +398,6 @@ {:type "number" :placeholder "--" :min 0 - :on-focus select-all :on-change on-radius-multi-change :value ""}]] @@ -416,7 +407,6 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-focus select-all :on-change on-radius-r1-change :value (:r1 values)}]] @@ -424,7 +414,6 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-focus select-all :on-change on-radius-r2-change :value (:r2 values)}]] @@ -432,7 +421,6 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-focus select-all :on-change on-radius-r3-change :value (:r3 values)}]] @@ -440,7 +428,6 @@ [:> numeric-input {:placeholder "--" :min 0 - :on-focus select-all :on-change on-radius-r4-change :value (:r4 values)}]]])]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 83cc9a414..3d4e635fb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -104,13 +104,6 @@ (when-let [update-node (and update-ref (mf/ref-val update-ref))] (dom/set-value! update-node value)))))) - ;; FIXME: the same as previous function, imposible to - ;; implement efficiently because of numeric-input component - ;; and probably this affects all callbacks that that component - ;; receives - select-text - (fn [ref] (fn [_] (dom/select-text! (mf/ref-val ref)))) - update-color (fn [index] (fn [color] @@ -188,7 +181,6 @@ [:> numeric-input {:ref adv-offset-x-ref :no-validate true :placeholder "--" - :on-focus (select-text adv-offset-x-ref) :on-change (update-attr index :offset-x basic-offset-x-ref) :on-blur on-blur :value (:offset-x value)}] @@ -198,7 +190,6 @@ [:> numeric-input {:ref adv-offset-y-ref :no-validate true :placeholder "--" - :on-focus (select-text adv-offset-y-ref) :on-change (update-attr index :offset-y basic-offset-y-ref) :on-blur on-blur :value (:offset-y value)}] @@ -209,7 +200,6 @@ [:> numeric-input {:ref adv-blur-ref :no-validate true :placeholder "--" - :on-focus (select-text adv-blur-ref) :on-change (update-attr index :blur basic-blur-ref) :on-blur on-blur :min 0 @@ -220,7 +210,6 @@ [:> numeric-input {:ref adv-spread-ref :no-validate true :placeholder "--" - :on-focus (select-text adv-spread-ref) :on-change (update-attr index :spread) :on-blur on-blur :value (:spread value)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 4fecb88d8..dba1339cc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -146,9 +146,7 @@ disable-drag (mf/use-state false) - select-all (fn [event] - (when (not @disable-drag) - (dom/select-text! (dom/get-target event))) + on-focus (fn [_] (reset! disable-drag true)) on-blur (fn [_] @@ -190,6 +188,7 @@ :on-remove handle-remove :on-reorder (handle-reorder index) :disable-drag disable-drag - :select-all select-all + :on-focus on-focus + :data-select-on-focus (not @disable-drag) :on-blur on-blur :disable-stroke-style disable-stroke-style}])])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 81fbcbe22..5041899b5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -36,9 +36,6 @@ "" (ust/format-precision value 2))) -(defn select-all [event] - (some-> event dom/get-target dom/select-text!)) - (defn- get-next-font [{:keys [id] :as current} fonts] (if (seq fonts) @@ -343,7 +340,6 @@ [:div.row-flex - {:on-focus select-all} (let [size-options [8 9 10 11 12 14 16 18 24 36 48 72] size-options (if (= font-size :multiple) (into [""] size-options) size-options)] [:& editable-select @@ -399,7 +395,6 @@ :placeholder (tr "settings.multiple") :nillable line-height-nillable :on-change #(handle-change % :line-height) - :on-focus select-all :on-blur on-blur}]] [:div.input-icon @@ -413,7 +408,6 @@ :value (attr->string letter-spacing) :placeholder (tr "settings.multiple") :on-change #(handle-change % :letter-spacing) - :on-focus select-all :on-blur on-blur}]]])) (mf/defc text-transform-options diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 5c652acf7..7bd25df76 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -41,7 +41,7 @@ (mf/defc color-row [{:keys [index color disable-gradient disable-opacity on-change on-reorder on-detach on-open on-close title on-remove - disable-drag select-all on-blur select-only]}] + disable-drag on-focus on-blur select-only data-select-on-focus]}] (let [current-file-id (mf/use-ctx ctx/current-file-id) file-colors (mf/deref refs/workspace-file-colors) shared-libs (mf/deref refs/workspace-libraries) @@ -197,7 +197,7 @@ "" (-> color :color uc/remove-hash)) :placeholder (tr "settings.multiple") - :on-focus select-all + :on-focus on-focus :on-blur on-blur :on-change handle-value-change}]] @@ -207,7 +207,8 @@ {:class (dom/classnames :percentail (not= (:opacity color) :multiple))} [:> numeric-input {:value (-> color :opacity opacity->string) :placeholder (tr "settings.multiple") - :on-focus select-all + :data-select-on-focus data-select-on-focus + :on-focus on-focus :on-blur on-blur :on-change handle-opacity-change :min 0 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs index 44ba32735..4fde23197 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs @@ -12,7 +12,7 @@ [app.util.object :as obj] [rumext.v2 :as mf])) -(mf/defc input-row [{:keys [label options value class min max on-change type placeholder default nillable]}] +(mf/defc input-row [{:keys [label options value class min max on-change type placeholder default nillable on-focus data-select-on-focus]}] [:div.row-flex.input-row [:span.element-set-subtitle label] [:div.input-element {:class class} @@ -46,6 +46,8 @@ :default default :nillable nillable :on-change on-change + :on-focus on-focus + :data-select-on-focus data-select-on-focus :value (or value "")}])]]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs index 62189be57..7f30ce039 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs @@ -48,7 +48,8 @@ (second)))) (mf/defc stroke-row - [{:keys [index stroke title show-caps on-color-change on-reorder on-color-detach on-remove on-stroke-width-change on-stroke-style-change on-stroke-alignment-change open-caps-select close-caps-select on-stroke-cap-start-change on-stroke-cap-end-change on-stroke-cap-switch disable-drag select-all on-blur disable-stroke-style]}] + {::mf/wrap-props false} + [{:keys [index stroke title show-caps on-color-change on-reorder on-color-detach on-remove on-stroke-width-change on-stroke-style-change on-stroke-alignment-change open-caps-select close-caps-select on-stroke-cap-start-change on-stroke-cap-end-change on-stroke-cap-switch disable-drag on-focus on-blur disable-stroke-style data-select-on-focus]}] (let [start-caps-state (mf/use-state {:open? false :top 0 :left 0}) @@ -86,7 +87,8 @@ :on-detach (on-color-detach index) :on-remove (on-remove index) :disable-drag disable-drag - :select-all select-all + :on-focus on-focus + :data-select-on-focus data-select-on-focus :on-blur on-blur}] ;; Stroke Width, Alignment & Style @@ -100,7 +102,8 @@ :value (-> (:stroke-width stroke) width->string) :placeholder (tr "settings.multiple") :on-change (on-stroke-width-change index) - :on-focus select-all + :on-focus on-focus + :data-select-on-focus data-select-on-focus :on-blur on-blur}]] [:select#style.input-select {:value (enum->string (:stroke-alignment stroke))