Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 20:09:04 -05:00
Code Issues Activity

Validate name before submitting

Browse source
This commit is contained in:
Florian Schroedl 2024-06-25 11:52:39 +02:00
parent 5df0cf545e
commit d0f8e9612a
1 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -121,14 +121,15 @@
;; Name ;; Name
name-ref (mf/use-var (:name token)) name-ref (mf/use-var (:name token))
name-errors (mf/use-state nil) name-errors (mf/use-state nil)
name-schema (mf/use-memo validate-name (mf/use-callback
(mf/deps existing-token-names) (mf/deps existing-token-names)
#(token-name-schema existing-token-names)) (fn [value]
(let [schema (token-name-schema existing-token-names)]
(m/explain schema (finalize-name value)))))
on-update-name-debounced (mf/use-callback on-update-name-debounced (mf/use-callback
(debounce (fn [e] (debounce (fn [e]
(let [value (dom/get-target-val e) (let [value (dom/get-target-val e)
errors (->> (finalize-name value) errors (validate-name value)]
(m/explain name-schema))]
(reset! name-errors errors))))) (reset! name-errors errors)))))
on-update-name (mf/use-callback on-update-name (mf/use-callback
(mf/deps on-update-name-debounced) (mf/deps on-update-name-debounced)
@ -184,13 +185,18 @@
on-submit (mf/use-callback on-submit (mf/use-callback
(fn [e] (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(let [name (finalize-name @name-ref)
;; Validate form before submitting
;; As the form might still be evaluating due to debounce and async form state
invalid-form? (or (:errors (validate-name name)))]
(when-not invalid-form?
(let [token (cond-> {:name (finalize-name @name-ref) (let [token (cond-> {:name (finalize-name @name-ref)
:type (or (:type token) token-type) :type (or (:type token) token-type)
:value (finalize-value @value-ref)} :value (finalize-value @value-ref)}
@description-ref (assoc :description @description-ref) @description-ref (assoc :description @description-ref)
(:id token) (assoc :id (:id token)))] (:id token) (assoc :id (:id token)))]
(st/emit! (dt/add-token token)) (st/emit! (dt/add-token token))
(modal/hide!))))] (modal/hide!))))))]
[:form [:form
{:on-submit on-submit} {:on-submit on-submit}
[:div {:class (stl/css :token-rows)} [:div {:class (stl/css :token-rows)}