mirror of
https://github.com/penpot/penpot.git
synced 2025-08-07 14:38:33 +02:00
Merge branch 'main' into develop
This commit is contained in:
Andrey Antukh
commit
fdeaac7f65
11 changed files with 183 additions and 123 deletions
|
|
@ -9,70 +9,84 @@
|
|||
|
||||
(ns app.main.ui.components.forms
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[app.common.data :as d]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.object :as obj]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.forms :as fm]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
["react" :as react]
|
||||
[app.util.dom :as dom]))
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.object :as obj]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def form-ctx (mf/create-context nil))
|
||||
(def use-form fm/use-form)
|
||||
|
||||
(mf/defc input
|
||||
[{:keys [type label help-icon disabled name form hint trim] :as props}]
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
[{:keys [label help-icon disabled form hint trim] :as props}]
|
||||
(let [input-type (get props :type)
|
||||
input-name (get props :name)
|
||||
more-classes (get props :class)
|
||||
|
||||
type' (mf/use-state type)
|
||||
focus? (mf/use-state false)
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
|
||||
touched? (get-in @form [:touched name])
|
||||
error (get-in @form [:errors name])
|
||||
type' (mf/use-state input-type)
|
||||
focus? (mf/use-state false)
|
||||
|
||||
value (get-in @form [:data name] "")
|
||||
is-checkbox? (= @type' "checkbox")
|
||||
is-radio? (= @type' "radio")
|
||||
is-text? (or (= @type' "password")
|
||||
(= @type' "text")
|
||||
(= @type' "email"))
|
||||
|
||||
help-icon' (cond
|
||||
(and (= type "password")
|
||||
(= @type' "password"))
|
||||
i/eye
|
||||
touched? (get-in @form [:touched input-name])
|
||||
error (get-in @form [:errors input-name])
|
||||
|
||||
(and (= type "password")
|
||||
(= @type' "text"))
|
||||
i/eye-closed
|
||||
value (get-in @form [:data input-name] "")
|
||||
|
||||
:else
|
||||
help-icon)
|
||||
help-icon' (cond
|
||||
(and (= input-type "password")
|
||||
(= @type' "password"))
|
||||
i/eye
|
||||
|
||||
klass (dom/classnames
|
||||
:focus @focus?
|
||||
:valid (and touched? (not error))
|
||||
:invalid (and touched? error)
|
||||
:disabled disabled
|
||||
:empty (str/empty? value)
|
||||
:with-icon (not (nil? help-icon')))
|
||||
(and (= input-type "password")
|
||||
(= @type' "text"))
|
||||
i/eye-closed
|
||||
|
||||
:else
|
||||
help-icon)
|
||||
|
||||
klass (str more-classes " "
|
||||
(dom/classnames
|
||||
:focus @focus?
|
||||
:valid (and touched? (not error))
|
||||
:invalid (and touched? error)
|
||||
:disabled disabled
|
||||
:empty (and is-text? (str/empty? value))
|
||||
:with-icon (not (nil? help-icon'))
|
||||
:custom-input is-text?
|
||||
:input-radio is-radio?
|
||||
:input-checkbox is-checkbox?))
|
||||
|
||||
swap-text-password
|
||||
(fn []
|
||||
(swap! type' (fn [type]
|
||||
(if (= "password" type)
|
||||
(swap! type' (fn [input-type]
|
||||
(if (= "password" input-type)
|
||||
"text"
|
||||
"password"))))
|
||||
|
||||
on-focus #(reset! focus? true)
|
||||
on-change (fm/on-input-change form name trim)
|
||||
on-change (fm/on-input-change form input-name trim)
|
||||
|
||||
on-blur
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(reset! focus? false)
|
||||
(when-not (get-in @form [:touched name])
|
||||
(swap! form assoc-in [:touched name] true)))
|
||||
(when-not (get-in @form [:touched input-name])
|
||||
(swap! form assoc-in [:touched input-name] true)))
|
||||
|
||||
props (-> props
|
||||
(dissoc :help-icon :form :trim)
|
||||
(assoc :value value
|
||||
(assoc :id (name input-name)
|
||||
:value value
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:placeholder label
|
||||
|
|
@ -80,15 +94,15 @@
|
|||
:type @type')
|
||||
(obj/clj->props))]
|
||||
|
||||
[:div.custom-input
|
||||
[:div
|
||||
{:class klass}
|
||||
[:*
|
||||
[:label label]
|
||||
[:> :input props]
|
||||
[:label {:for (name input-name)} label]
|
||||
(when help-icon'
|
||||
[:div.help-icon
|
||||
{:style {:cursor "pointer"}
|
||||
:on-click (when (= "password" type)
|
||||
:on-click (when (= "password" input-type)
|
||||
swap-text-password)}
|
||||
help-icon'])
|
||||
(cond
|
||||
|
|
@ -100,16 +114,17 @@
|
|||
|
||||
|
||||
(mf/defc textarea
|
||||
[{:keys [label disabled name form hint trim] :as props}]
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
[{:keys [label disabled form hint trim] :as props}]
|
||||
(let [input-name (get props :name)
|
||||
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
|
||||
type' (mf/use-state type)
|
||||
focus? (mf/use-state false)
|
||||
|
||||
touched? (get-in @form [:touched name])
|
||||
error (get-in @form [:errors name])
|
||||
touched? (get-in @form [:touched input-name])
|
||||
error (get-in @form [:errors input-name])
|
||||
|
||||
value (get-in @form [:data name] "")
|
||||
value (get-in @form [:data input-name] "")
|
||||
|
||||
klass (dom/classnames
|
||||
:focus @focus?
|
||||
|
|
@ -120,13 +135,13 @@
|
|||
)
|
||||
|
||||
on-focus #(reset! focus? true)
|
||||
on-change (fm/on-input-change form name trim)
|
||||
on-change (fm/on-input-change form input-name trim)
|
||||
|
||||
on-blur
|
||||
(fn [event]
|
||||
(fn [_]
|
||||
(reset! focus? false)
|
||||
(when-not (get-in @form [:touched name])
|
||||
(swap! form assoc-in [:touched name] true)))
|
||||
(when-not (get-in @form [:touched input-name])
|
||||
(swap! form assoc-in [:touched input-name] true)))
|
||||
|
||||
props (-> props
|
||||
(dissoc :help-icon :form :trim)
|
||||
|
|
@ -134,8 +149,7 @@
|
|||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
;; :placeholder label
|
||||
:on-change on-change
|
||||
:type @type')
|
||||
:on-change on-change)
|
||||
(obj/clj->props))]
|
||||
|
||||
[:div.custom-input
|
||||
|
|
@ -151,12 +165,14 @@
|
|||
[:span.hint hint])]]))
|
||||
|
||||
(mf/defc select
|
||||
[{:keys [options label name form default]
|
||||
[{:keys [options label form default] :as props
|
||||
:or {default ""}}]
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
value (get-in @form [:data name] default)
|
||||
(let [input-name (get props :name)
|
||||
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
value (or (get-in @form [:data input-name]) default)
|
||||
cvalue (d/seek #(= value (:value %)) options)
|
||||
on-change (fm/on-input-change form name)]
|
||||
on-change (fm/on-input-change form input-name)]
|
||||
|
||||
[:div.custom-select
|
||||
[:select {:value value
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue