Unlink token when pressing backspace on empty input field

This commit is contained in:
Florian Schroedl 2024-05-22 10:23:57 +02:00
parent 7da382dfed
commit 019759392c
2 changed files with 17 additions and 4 deletions

View file

@ -291,6 +291,16 @@
(on-switch-to-radius-4) (on-switch-to-radius-4)
(on-switch-to-radius-1)))) (on-switch-to-radius-1))))
on-border-radius-token-unlink
(mf/use-fn
(mf/deps ids change-radius border-radius-tokens)
(fn [token]
(let [token-value (some-> token wtc/resolve-token-value)]
(st/emit!
(change-radius (fn [shape]
(-> (update shape :applied-tokens d/without-keys #{:rx :ry :r1 :r2 :r3 :r4})
(ctsr/set-radius-1 token-value))))))))
on-radius-1-change on-radius-1-change
(mf/use-fn (mf/use-fn
(mf/deps ids change-radius border-radius-tokens) (mf/deps ids change-radius border-radius-tokens)
@ -302,6 +312,7 @@
(-> (dt/maybe-apply-token-to-shape {:token token (-> (dt/maybe-apply-token-to-shape {:token token
:shape shape :shape shape
:attributes (wtc/token-attributes :border-radius)}) :attributes (wtc/token-attributes :border-radius)})
(doto js/console.log)
(ctsr/set-radius-1 (or token-value value))))))))) (ctsr/set-radius-1 (or token-value value)))))))))
on-radius-multi-change on-radius-multi-change
@ -488,6 +499,7 @@
[:span {:class (stl/css :icon)} i/corner-radius] [:span {:class (stl/css :icon)} i/corner-radius]
[:& editable-select [:& editable-select
{:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--") {:placeholder (if (= :multiple (:rx values)) (tr "settings.multiple") "--")
:on-token-remove on-border-radius-token-unlink
:class (stl/css :token-select) :class (stl/css :token-select)
:type "number" :type "number"
:min 0 :min 0

View file

@ -59,7 +59,7 @@
[:span {:class (stl/css :check-icon)} i/tick]])))]]]) [:span {:class (stl/css :check-icon)} i/tick]])))]]])
(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 on-token-remove] :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
@ -79,7 +79,6 @@
multiple? (= :multiple value) multiple? (= :multiple value)
token (when-not multiple? token (when-not multiple?
(-> (filter :selected? options) (first))) (-> (filter :selected? options) (first)))
_ (js/console.log "token" token)
emit-blur? (mf/use-ref nil) emit-blur? (mf/use-ref nil)
select-wrapper-ref (mf/use-ref) select-wrapper-ref (mf/use-ref)
@ -156,9 +155,11 @@
(cond (cond
token (let [backspace? (kbd/backspace? event) token (let [backspace? (kbd/backspace? event)
value (-> event dom/get-target dom/get-value) value (-> event dom/get-target dom/get-value)
caret-at-beginning? (= 0 (.. event -target -selectionStart))] caret-at-beginning? (nil? (.. event -target -selectionStart))]
(cond (cond
(and backspace? caret-at-beginning?) (set-value "") (and backspace? caret-at-beginning?) (do
(dom/prevent-default event)
(on-token-remove token))
:else (set-token-value! value)) :else (set-token-value! value))
(js/console.log "backspace?" caret-at-beginning? (.. event -target))) (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)