3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 11:01:45 +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

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

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