Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 20:09:04 -05:00
Code Issues Activity

Extract key down handler

Browse source
This commit is contained in:
Florian Schroedl 2024-05-17 10:16:01 +02:00
parent ced325e009
commit b61a59d375
1 changed files with 29 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/app/main/ui/workspace/tokens/editable_select.cljs
View file

@ -19,11 +19,30 @@
[app.util.timers :as timers] [app.util.timers :as timers]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn on-number-input-key-down [{:keys [event min-val max-val set-value!]}]
(let [up? (kbd/up-arrow? event)
down? (kbd/down-arrow? event)]
(when (or up? down?)
(dom/prevent-default event)
(let [value (-> event dom/get-target dom/get-value)
value (or (d/parse-double value) value)
increment (cond
(kbd/shift? event) (if up? 10 -10)
(kbd/alt? event) (if up? 0.1 -0.1)
:else (if up? 1 -1))
new-value (+ value increment)
new-value (cond
(and (d/num? min-val) (< new-value min-val)) min-val
(and (d/num? max-val) (> new-value max-val)) max-val
:else new-value)]
(set-value! new-value)))))
(mf/defc editable-select (mf/defc editable-select
[{:keys [value type options class on-change placeholder on-blur input-class] :as params}] [{:keys [value type options class on-change placeholder on-blur input-class] :as params}]
(let [state* (mf/use-state {:id (uuid/next) (let [state* (mf/use-state {:id (uuid/next)
:is-open? false :is-open? false
:current-value value :current-value value
:current-item nil
:top nil :top nil
:left nil :left nil
:bottom nil}) :bottom nil})
@ -98,34 +117,17 @@
handle-key-down handle-key-down
(mf/use-fn (mf/use-fn
(mf/deps set-value) (mf/deps set-value is-open?)
(fn [event] (fn [event]
(when (= type "number") (cond
(let [up? (kbd/up-arrow? event) is-open? (let [up? (kbd/up-arrow? event)
down? (kbd/down-arrow? event)] down? (kbd/down-arrow? event)]
(when (or up? down?) (dom/prevent-default event)
(dom/prevent-default event) (js/console.log "up? down?" up? down?))
(let [value (-> event dom/get-target dom/get-value) (= type "number") (on-number-input-key-down {:event event
value (or (d/parse-double value) value) :min-val min-val
:max-val max-val
increment (cond :set-value! set-value}))))
(kbd/shift? event)
(if up? 10 -10)
(kbd/alt? event)
(if up? 0.1 -0.1)
:else
(if up? 1 -1))
new-value (+ value increment)
new-value (cond
(and (d/num? min-val) (< new-value min-val)) min-val
(and (d/num? max-val) (> new-value max-val)) max-val
:else new-value)]
(set-value new-value)))))))
handle-focus handle-focus
(mf/use-fn (mf/use-fn