mirror of
https://github.com/penpot/penpot.git
synced 2026-08-14 16:58:35 +00:00
116 lines
3.6 KiB
Clojure
116 lines
3.6 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/.
|
|
;;
|
|
;; Copyright (c) KALEIDOS INC Sucursal en España SL
|
|
|
|
(ns app.main.ui.forms
|
|
(:require
|
|
[app.main.ui.ds.buttons.button :refer [button*]]
|
|
[app.main.ui.ds.controls.input :refer [input*]]
|
|
[app.main.ui.ds.controls.select :refer [select*]]
|
|
[app.util.dom :as dom]
|
|
[app.util.forms :as fm]
|
|
[app.util.keyboard :as k]
|
|
[rumext.v2 :as mf]))
|
|
|
|
(def context (mf/create-context nil))
|
|
|
|
(mf/defc form-input*
|
|
[{:keys [name trim] :rest props}]
|
|
|
|
(let [form (mf/use-ctx context)
|
|
input-name name
|
|
|
|
touched? (and (contains? (:data @form) input-name)
|
|
(get-in @form [:touched input-name]))
|
|
|
|
error (get-in @form [:errors input-name])
|
|
extra-error (get-in @form [:extra-errors input-name])
|
|
|
|
value (get-in @form [:data input-name] "")
|
|
|
|
on-change
|
|
(mf/use-fn
|
|
(mf/deps input-name)
|
|
(fn [event]
|
|
(let [value (-> event dom/get-target dom/get-input-value)]
|
|
(fm/on-input-change form input-name value trim))))
|
|
|
|
props
|
|
(mf/spread-props props {:on-change on-change
|
|
:value value})
|
|
|
|
props
|
|
(if (or extra-error (and error touched?))
|
|
(mf/spread-props props {:hint-type "error"
|
|
:hint-message (:message (or error extra-error))})
|
|
props)]
|
|
|
|
[:> input* props]))
|
|
|
|
(mf/defc form-select*
|
|
[{:keys [name] :as props}]
|
|
(let [select-name name
|
|
form (mf/use-ctx context)
|
|
value (get-in @form [:data select-name] "")
|
|
|
|
handle-change
|
|
(fn [event]
|
|
(let [value (if (string? event) event (dom/get-target-val event))]
|
|
(fm/on-input-change form select-name value)))
|
|
|
|
props
|
|
(mf/spread-props props {:on-change handle-change
|
|
:value value})]
|
|
|
|
[:> select* props]))
|
|
|
|
(mf/defc form-submit*
|
|
[{:keys [disabled on-submit] :rest props}]
|
|
|
|
(let [form (mf/use-ctx context)
|
|
form-state (when form @form)
|
|
|
|
disabled? (mf/use-memo
|
|
(mf/deps form form-state disabled)
|
|
(fn []
|
|
(boolean
|
|
(or (nil? form)
|
|
(true? disabled)
|
|
(not (:valid form-state))
|
|
(seq (:async-errors form-state))
|
|
(seq (:extra-errors form-state))))))
|
|
|
|
handle-key-down-save
|
|
(mf/use-fn
|
|
(mf/deps on-submit form disabled?)
|
|
(fn [e]
|
|
(when (and (or (k/enter? e) (k/space? e)) (not disabled?))
|
|
(dom/prevent-default e)
|
|
(on-submit form e))))
|
|
|
|
props
|
|
(mf/spread-props props {:on-key-down handle-key-down-save
|
|
:type "submit"})
|
|
|
|
props
|
|
(if disabled?
|
|
(mf/spread-props props {:disabled true
|
|
:on-key-down handle-key-down-save
|
|
:type "submit"})
|
|
props)]
|
|
|
|
[:> button* props]))
|
|
|
|
(mf/defc form*
|
|
[{:keys [on-submit form children class]}]
|
|
(let [on-submit' (mf/use-fn
|
|
(mf/deps on-submit)
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(when (fn? on-submit)
|
|
(on-submit form event))))]
|
|
[:> (mf/provider context) {:value form}
|
|
[:form {:class class :on-submit on-submit'} children]]))
|