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

Dont show error when unfocusing name input field, but keep form disabled

Browse source
This commit is contained in:
Florian Schroedl 2024-06-24 15:58:19 +02:00
parent c98162d0bf
commit e0be30bb79
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,8 +39,14 @@
(defn finalize-name [name] (defn finalize-name [name]
(str/trim name)) (str/trim name))
(defn finalize-value [name] (defn valid-name? [name]
(str/trim name)) (seq (finalize-name name)))
(defn finalize-value [value]
(str/trim value))
(defn valid-value? [value]
(seq (finalize-value value)))
;; Component ------------------------------------------------------------------- ;; Component -------------------------------------------------------------------
@ -117,12 +123,17 @@
;; Name ;; Name
name (mf/use-var (or (:name token) "")) name (mf/use-var (or (:name token) ""))
name-touched? (mf/use-state (some? (:name token)))
on-name-touch (mf/use-callback
#(when (valid-name? (dom/get-target-val %))
(reset! name-touched? true)))
name-errors (mf/use-state nil) name-errors (mf/use-state nil)
name-schema (mf/use-memo name-schema (mf/use-memo
(mf/deps existing-token-names) (mf/deps existing-token-names)
#(token-name-schema existing-token-names)) #(token-name-schema existing-token-names))
on-update-name (mf/use-callback on-update-name (mf/use-callback
(debounce (fn [e] (debounce (fn [e]
(on-name-touch e)
(let [value (dom/get-target-val e) (let [value (dom/get-target-val e)
errors (->> (finalize-name value) errors (->> (finalize-name value)
(m/explain name-schema))] (m/explain name-schema))]
@ -147,7 +158,7 @@
disabled? (or disabled? (or
@name-errors @name-errors
value-error? value-error?
(empty? (finalize-name (mf/ref-val name))))] (not @name-touched?))]
;; on-submit (fn [e] ;; on-submit (fn [e]
;; (dom/prevent-default e) ;; (dom/prevent-default e)
@ -169,6 +180,7 @@
:error? @name-errors :error? @name-errors
:input-props {:default-value @name :input-props {:default-value @name
:auto-focus true :auto-focus true
:on-blur on-name-touch
:on-change on-update-name}}] :on-change on-update-name}}]
(when @name-errors (when @name-errors
[:p {:class (stl/css :error)} [:p {:class (stl/css :error)}