Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-13 07:21:40 -05:00
Code Issues Activity

✨ Refactor select all on input text click

Browse source
This commit is contained in:
Alejandro Alonso 2023-06-27 09:29:43 +02:00 • committed by Andrey Antukh
parent ba4ef66cdc
commit 287213cfaf
12 changed files with 81 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/app/main/ui/components/color_input.cljs
View file

@ -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)

44
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -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)

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

@ -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"

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -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)

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

@ -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}]]

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -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)}]]])])

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -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)}]

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -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}])])]]))

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -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

7
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -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

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
View file

@ -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 "")}])]])

9
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
View file

@ -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))