3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-04 18:11:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Validate token name while typing

Browse source
This commit is contained in:
Xavier Julian 2025-03-18 12:17:21 +01:00 • committed by Xaviju
parent 567fdd9619
commit 99d7672284
1 changed files with 20 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -260,7 +260,8 @@
touched-name? (deref touched-name*)
warning-name-change* (mf/use-state false)
warning-name-change? (deref warning-name-change*)
name-ref (mf/use-var (:name token))
token-name-ref (mf/use-var (:name token))
name-ref (mf/use-ref nil)
name-errors (mf/use-state nil)
validate-name
(mf/use-fn
@ -285,23 +286,26 @@
on-update-name-debounced
(mf/use-fn
(uf/debounce (fn [e]
(let [value (dom/get-target-val e)
errors (validate-name value)]
(mf/deps touched-name? validate-name)
(uf/debounce (fn [token-name]
(let [errors (validate-name token-name)]
(when touched-name?
(reset! name-errors errors))))))
(reset! name-errors errors))))
300))
on-update-name
(mf/use-fn
(mf/deps on-update-name-debounced)
(fn [e]
(reset! touched-name* true)
(reset! name-ref (dom/get-target-val e))
(on-update-name-debounced e)))
(mf/deps on-update-name-debounced name-ref)
(fn []
(let [ref (mf/ref-val name-ref)
token-name (dom/get-value ref)]
(reset! touched-name* true)
(reset! token-name-ref token-name)
(on-update-name-debounced token-name))))
valid-name-field? (and
(not @name-errors)
(valid-name? @name-ref))
(valid-name? @token-name-ref))
;; Value
color (mf/use-state (when color? (:value token)))
@ -330,7 +334,7 @@
(when color? (reset! color (if error? nil v)))
(reset! token-resolve-result* v))))
on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
on-update-value-debounced (use-debonced-resolve-callback token-name-ref token active-theme-tokens set-resolve-value)
on-update-value (mf/use-fn
(mf/deps on-update-value-debounced)
(fn [e]
@ -401,7 +405,7 @@
;; because the validation is asynchronous/debounced
;; and the user might have edited a valid form to make it invalid,
;; and press enter before the next validations could return.
(let [final-name (finalize-name @name-ref)
(let [final-name (finalize-name @token-name-ref)
valid-name?+ (-> (validate-name final-name) schema-validation->promise)
final-value (finalize-value @value-ref)
final-description @description-ref
@ -476,7 +480,7 @@
(when (and (not create?)
(not token-resolve-result)
resolved-tokens)
(-> (get resolved-tokens @name-ref)
(-> (get resolved-tokens @token-name-ref)
(set-resolve-value)))))
[:form {:class (stl/css :form-wrapper)
@ -495,7 +499,8 @@
:error (boolean @name-errors)
:auto-focus true
:label (tr "workspace.token.token-name")
:default-value @name-ref
:default-value @token-name-ref
:ref name-ref
:max-length 256
:on-blur on-blur-name
:on-change on-update-name}])