mirror of
https://github.com/penpot/penpot.git
synced 2025-05-01 17:26:20 +02:00
Use custom input value logic when token is applied
This commit is contained in:
parent
50354ccb71
commit
35f384ce9b
1 changed files with 17 additions and 4 deletions
|
@ -63,6 +63,7 @@
|
||||||
(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
|
||||||
|
:token-value nil
|
||||||
:current-item nil
|
:current-item nil
|
||||||
:top nil
|
:top nil
|
||||||
:left nil
|
:left nil
|
||||||
|
@ -98,9 +99,15 @@
|
||||||
options)
|
options)
|
||||||
(into {}))
|
(into {}))
|
||||||
|
|
||||||
|
set-token-value!
|
||||||
|
(fn [value]
|
||||||
|
(swap! state* assoc :token-value value))
|
||||||
|
|
||||||
set-value
|
set-value
|
||||||
(fn [value]
|
(fn [value]
|
||||||
(swap! state* assoc :current-value value)
|
(swap! state* assoc
|
||||||
|
:current-value value
|
||||||
|
:token-value value)
|
||||||
(when on-change (on-change value)))
|
(when on-change (on-change value)))
|
||||||
|
|
||||||
select-item
|
select-item
|
||||||
|
@ -114,6 +121,7 @@
|
||||||
{:keys [value] :as item} (get labels-map label)]
|
{:keys [value] :as item} (get labels-map label)]
|
||||||
(swap! state* assoc
|
(swap! state* assoc
|
||||||
:current-value value
|
:current-value value
|
||||||
|
:token-value nil
|
||||||
:current-item item)
|
:current-item item)
|
||||||
(when on-change (on-change item))
|
(when on-change (on-change item))
|
||||||
(when on-blur (on-blur)))))
|
(when on-blur (on-blur)))))
|
||||||
|
@ -143,9 +151,14 @@
|
||||||
|
|
||||||
handle-key-down
|
handle-key-down
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps set-value is-open?)
|
(mf/deps set-value is-open? token)
|
||||||
(fn [event]
|
(fn [^js event]
|
||||||
(cond
|
(cond
|
||||||
|
token (let [backspace? (kbd/backspace? event)
|
||||||
|
value (-> event dom/get-target dom/get-value)
|
||||||
|
caret-at-beginning? (= 0 (.. event -target -selectionStart))]
|
||||||
|
(set-token-value! value)
|
||||||
|
(js/console.log "backspace?" caret-at-beginning? (.. event -target)))
|
||||||
is-open? (let [up? (kbd/up-arrow? event)
|
is-open? (let [up? (kbd/up-arrow? event)
|
||||||
down? (kbd/down-arrow? event)]
|
down? (kbd/down-arrow? event)]
|
||||||
(dom/prevent-default event)
|
(dom/prevent-default event)
|
||||||
|
@ -196,7 +209,7 @@
|
||||||
[:div {:class (stl/css :token-pill)}
|
[:div {:class (stl/css :token-pill)}
|
||||||
(:label token)])
|
(:label token)])
|
||||||
(cond
|
(cond
|
||||||
token [:input {:value ""
|
token [:input {:value (or (:token-value state) "")
|
||||||
:class input-class
|
:class input-class
|
||||||
:on-change handle-change-input
|
:on-change handle-change-input
|
||||||
:on-key-down handle-key-down
|
:on-key-down handle-key-down
|
||||||
|
|
Loading…
Add table
Reference in a new issue