mirror of
https://github.com/penpot/penpot.git
synced 2026-04-28 20:58:06 +00:00
144 lines
4.3 KiB
Clojure
144 lines
4.3 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
|
;; defined by the Mozilla Public License, v. 2.0.
|
|
;;
|
|
;; Copyright (c) 2020 UXBOX Labs SL
|
|
|
|
(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.forms :as fm]
|
|
[app.util.i18n :as i18n :refer [t]]
|
|
["react" :as react]
|
|
[app.util.dom :as dom]))
|
|
|
|
(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))
|
|
|
|
type' (mf/use-state type)
|
|
focus? (mf/use-state false)
|
|
locale (mf/deref i18n/locale)
|
|
|
|
touched? (get-in @form [:touched name])
|
|
error (get-in @form [:errors name])
|
|
|
|
value (get-in @form [:data name] "")
|
|
|
|
help-icon' (cond
|
|
(and (= type "password")
|
|
(= @type' "password"))
|
|
i/eye
|
|
|
|
(and (= type "password")
|
|
(= @type' "text"))
|
|
i/eye-closed
|
|
|
|
:else
|
|
help-icon)
|
|
|
|
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')))
|
|
|
|
swap-text-password
|
|
(fn []
|
|
(swap! type' (fn [type]
|
|
(if (= "password" type)
|
|
"text"
|
|
"password"))))
|
|
|
|
on-focus #(reset! focus? true)
|
|
on-change (fm/on-input-change form name trim)
|
|
|
|
on-blur
|
|
(fn [event]
|
|
(reset! focus? false)
|
|
(when-not (get-in @form [:touched name])
|
|
(swap! form assoc-in [:touched name] true)))
|
|
|
|
props (-> props
|
|
(dissoc :help-icon :form :trim)
|
|
(assoc :value value
|
|
:on-focus on-focus
|
|
:on-blur on-blur
|
|
:placeholder label
|
|
:on-change on-change
|
|
:type @type')
|
|
(obj/clj->props))]
|
|
|
|
[:div.custom-input
|
|
{:class klass}
|
|
[:*
|
|
[:label label]
|
|
[:> :input props]
|
|
(when help-icon'
|
|
[:div.help-icon
|
|
{:style {:cursor "pointer"}
|
|
:on-click (when (= "password" type)
|
|
swap-text-password)}
|
|
help-icon'])
|
|
(cond
|
|
(and touched? (:message error))
|
|
[:span.error (t locale (:message error))]
|
|
|
|
(string? hint)
|
|
[:span.hint hint])]]))
|
|
|
|
(mf/defc select
|
|
[{:keys [options label name form default]
|
|
:or {default ""}}]
|
|
(let [form (or form (mf/use-ctx form-ctx))
|
|
value (get-in @form [:data name] default)
|
|
cvalue (d/seek #(= value (:value %)) options)
|
|
on-change (fm/on-input-change form name)]
|
|
|
|
[:div.custom-select
|
|
[:select {:value value
|
|
:on-change on-change}
|
|
(for [item options]
|
|
[:option {:key (:value item) :value (:value item)} (:label item)])]
|
|
|
|
[:div.input-container
|
|
[:div.main-content
|
|
[:label label]
|
|
[:span.value (:label cvalue "")]]
|
|
|
|
[:div.icon
|
|
i/arrow-slide]]]))
|
|
|
|
(mf/defc submit-button
|
|
[{:keys [label form on-click disabled] :as props}]
|
|
(let [form (or form (mf/use-ctx form-ctx))]
|
|
[:input.btn-primary.btn-large
|
|
{:name "submit"
|
|
:class (when-not (:valid @form) "btn-disabled")
|
|
:disabled (or (not (:valid @form)) (true? disabled))
|
|
:on-click on-click
|
|
:value label
|
|
:type "submit"}]))
|
|
|
|
(mf/defc form
|
|
[{:keys [on-submit form children class] :as props}]
|
|
(let [on-submit (or on-submit (constantly nil))]
|
|
[:& (mf/provider form-ctx) {:value form}
|
|
[:form {:class class
|
|
:on-submit (fn [event]
|
|
(dom/prevent-default event)
|
|
(on-submit form event))}
|
|
children]]))
|