3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 16:47:44 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Increment font size by 10 with shift+arrows

Browse source
This commit is contained in:
Andrés Moya 2021-08-09 18:03:13 +02:00 • committed by Andrés Moya
parent 63259b3f92
commit f8491e9631
5 changed files with 46 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,14 +7,16 @@
(ns app.main.ui.components.editable-select
(:require
[app.common.data :as d]
[app.common.math :as math]
[app.common.uuid :as uuid]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[app.util.keyboard :as kbd]
[app.util.timers :as timers]
[rumext.alpha :as mf]))
(mf/defc editable-select [{:keys [value type options class on-change placeholder on-blur]}]
(mf/defc editable-select [{:keys [value type options class on-change placeholder on-blur] :as params}]
(let [state (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value
@ -22,6 +24,13 @@
:left nil
:bottom nil})
min-val (get params :min)
max-val (get params :max)
num? (fn [val] (and (number? val)
(not (math/nan? val))
(math/finite? val)))
emit-blur? (mf/use-ref nil)
open-dropdown #(swap! state assoc :is-open? true)
@ -38,11 +47,14 @@
value->label (fn [value] (get labels-map value value))
set-value (fn [value]
(swap! state assoc :current-value value)
(when on-change (on-change value)))
handle-change-input (fn [event]
(let [value (-> event dom/get-target dom/get-value)
value (or (d/parse-integer value) value)]
(swap! state assoc :current-value value)
(when on-change (on-change value))))
value (or (d/parse-double value) value)]
(set-value value)))
on-node-load
(fn [node]
@ -61,6 +73,29 @@
:top top
:bottom bottom))))))
handle-key-down
(mf/use-callback
(fn [event]
(when (= type "number")
(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 (if (kbd/shift? event)
(if up? 10 -10)
(if up? 1 -1))
new-value (+ value increment)
new-value (cond
(and (num? min-val) (< new-value min-val)) min-val
(and (num? max-val) (> new-value max-val)) max-val
:else new-value)]
(set-value new-value)))))))
handle-focus
(mf/use-callback
(fn []
@ -89,6 +124,7 @@
:ref on-node-load}
[:input.input-text {:value (or (-> @state :current-value value->label) "")
:on-change handle-change-input
:on-key-down handle-key-down
:on-focus handle-focus
:on-blur handle-blur
:placeholder placeholder