mirror of
https://github.com/penpot/penpot.git
synced 2025-06-04 18:21:38 +02:00
♻️ remove new css from other elements
This commit is contained in:
Eva
Andrey Antukh
parent
480251c41c
commit
c14fe661df
19 changed files with 702 additions and 1539 deletions
|
|
@ -8,7 +8,6 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.timers :as timers]
|
||||
[app.util.webapi :as wapi]
|
||||
|
|
@ -16,8 +15,7 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc copy-button [{:keys [data on-copied children class]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
just-copied (mf/use-state false)]
|
||||
(let [just-copied (mf/use-state false)]
|
||||
(mf/use-effect
|
||||
(mf/deps @just-copied)
|
||||
(fn []
|
||||
|
|
@ -27,24 +25,15 @@
|
|||
(let [sub (timers/schedule 1000 #(reset! just-copied false))]
|
||||
;; On unmount we dispose the timer
|
||||
#(rx/-dispose sub)))))
|
||||
(if new-css-system
|
||||
[:button {:class (dm/str class " " (stl/css-case :copy-button true
|
||||
:copy-wrapper (some? children)))
|
||||
:on-click #(when-not @just-copied
|
||||
(reset! just-copied true)
|
||||
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
|
||||
[:button {:class (dm/str class " " (stl/css-case :copy-button true
|
||||
:copy-wrapper (some? children)))
|
||||
:on-click #(when-not @just-copied
|
||||
(reset! just-copied true)
|
||||
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
|
||||
|
||||
(when children
|
||||
children)
|
||||
[:span {:class (stl/css :icon-btn)}
|
||||
(if @just-copied
|
||||
i/tick-refactor
|
||||
i/clipboard-refactor)]]
|
||||
|
||||
[:button.copy-button
|
||||
{:on-click #(when-not @just-copied
|
||||
(reset! just-copied true)
|
||||
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
|
||||
(if @just-copied
|
||||
i/tick
|
||||
i/copy)])))
|
||||
(when children
|
||||
children)
|
||||
[:span {:class (stl/css :icon-btn)}
|
||||
(if @just-copied
|
||||
i/tick-refactor
|
||||
i/clipboard-refactor)]]))
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.editable-label
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -16,16 +17,14 @@
|
|||
(mf/defc editable-label
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [display-value (unchecked-get props "display-value")
|
||||
value (unchecked-get props "value")
|
||||
(let [value (unchecked-get props "value")
|
||||
on-change (unchecked-get props "on-change")
|
||||
on-cancel (unchecked-get props "on-cancel")
|
||||
editing? (unchecked-get props "editing")
|
||||
dbl-click? (unchecked-get props "disable-dbl-click")
|
||||
class (unchecked-get props "class")
|
||||
tooltip (unchecked-get props "tooltip")
|
||||
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
final-class (dm/str class " " (stl/css :editable-label))
|
||||
input-ref (mf/use-ref nil)
|
||||
internal-editing* (mf/use-state false)
|
||||
internal-editing? (deref internal-editing*)
|
||||
|
|
@ -83,20 +82,15 @@
|
|||
(when (and editing? (not internal-editing?))
|
||||
(start-edition)))
|
||||
|
||||
(if ^boolean internal-editing?
|
||||
[:div.editable-label {:class class}
|
||||
[:input.editable-label-input
|
||||
{:ref input-ref
|
||||
:default-value value
|
||||
:on-key-up on-key-up
|
||||
:on-blur cancel-edition}]
|
||||
[:div {:class final-class}
|
||||
[:input
|
||||
{:class (stl/css :editable-label-input)
|
||||
:ref input-ref
|
||||
:default-value value
|
||||
:on-key-up on-key-up
|
||||
:on-double-click on-dbl-click
|
||||
:on-blur cancel-edition}]
|
||||
|
||||
[:span.editable-label-close {:on-click cancel-edition}
|
||||
(if ^boolean new-css-system
|
||||
i/delete-text-refactor
|
||||
i/close)]]
|
||||
[:span.editable-label
|
||||
{:class class
|
||||
:title tooltip
|
||||
:on-double-click on-dbl-click}
|
||||
display-value])))
|
||||
[:span {:class (stl/css :editable-label-close)
|
||||
:on-click cancel-edition}
|
||||
i/delete-text-refactor]]))
|
||||
|
|
|
|||
|
|
@ -19,3 +19,23 @@
|
|||
border: $s-1 solid var(--input-border-color-focus);
|
||||
color: var(--layer-row-foreground-color);
|
||||
}
|
||||
|
||||
.editable-label {
|
||||
display: flex;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-label-close {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
stroke: var(--icon-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -22,8 +21,7 @@
|
|||
|
||||
(mf/defc editable-select
|
||||
[{:keys [value type options class on-change placeholder on-blur input-class] :as params}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
state* (mf/use-state {:id (uuid/next)
|
||||
(let [state* (mf/use-state {:id (uuid/next)
|
||||
:is-open? false
|
||||
:current-value value
|
||||
:top nil
|
||||
|
|
@ -32,9 +30,6 @@
|
|||
state (deref state*)
|
||||
is-open? (:is-open? state)
|
||||
current-value (:current-value state)
|
||||
top-value (:top state)
|
||||
left-value (:left state)
|
||||
bottom-value (:bottom state)
|
||||
element-id (:id state)
|
||||
|
||||
min-val (get params :min)
|
||||
|
|
@ -43,11 +38,6 @@
|
|||
emit-blur? (mf/use-ref nil)
|
||||
font-size-wrapper-ref (mf/use-ref)
|
||||
|
||||
open-dropdown
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! state* assoc :is-open? true))
|
||||
|
||||
toggle-dropdown
|
||||
(mf/use-fn
|
||||
(mf/deps state)
|
||||
|
|
@ -170,81 +160,43 @@
|
|||
(mf/set-ref-val! emit-blur? (not is-open?)))
|
||||
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (dm/str class " " (stl/css :editable-select))
|
||||
:ref on-node-load}
|
||||
(if (= type "number")
|
||||
[:> numeric-input* {:value (or (some-> current-value value->label) "")
|
||||
:className input-class
|
||||
:on-change set-value
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder placeholder}]
|
||||
[:input {:value (or (some-> current-value value->label) "")
|
||||
:class input-class
|
||||
:on-change handle-change-input
|
||||
:on-key-down handle-key-down
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder placeholder
|
||||
:type type}])
|
||||
[:div {:class (dm/str class " " (stl/css :editable-select))
|
||||
:ref on-node-load}
|
||||
(if (= type "number")
|
||||
[:> numeric-input* {:value (or (some-> current-value value->label) "")
|
||||
:className input-class
|
||||
:on-change set-value
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder placeholder}]
|
||||
[:input {:value (or (some-> current-value value->label) "")
|
||||
:class input-class
|
||||
:on-change handle-change-input
|
||||
:on-key-down handle-key-down
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder placeholder
|
||||
:type type}])
|
||||
|
||||
[:span {:class (stl/css :dropdown-button)
|
||||
:on-click toggle-dropdown}
|
||||
i/arrow-refactor]
|
||||
[:span {:class (stl/css :dropdown-button)
|
||||
:on-click toggle-dropdown}
|
||||
i/arrow-refactor]
|
||||
|
||||
[:& dropdown {:show (or is-open? false)
|
||||
:on-close close-dropdown}
|
||||
[:ul {:class (stl/css :custom-select-dropdown)
|
||||
:ref font-size-wrapper-ref}
|
||||
(for [[index item] (map-indexed vector options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (stl/css :separator)
|
||||
:key (dm/str element-id "-" index)}]
|
||||
(let [[value label] (as-key-value item)]
|
||||
[:li
|
||||
{:key (str element-id "-" index)
|
||||
:class (stl/css-case :dropdown-element true
|
||||
:is-selected (= (dm/str value) current-value))
|
||||
:data-value value
|
||||
:on-click select-item}
|
||||
[:span {:class (stl/css :label)} label]
|
||||
[:span {:class (stl/css :check-icon)}
|
||||
i/tick-refactor]])))]]]
|
||||
|
||||
|
||||
[:div.editable-select {:class class
|
||||
:ref on-node-load}
|
||||
(if (= type "number")
|
||||
[:> numeric-input* {:value (or (some-> current-value value->label) "")
|
||||
:on-change set-value
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder placeholder}]
|
||||
[:input.input-text {:value (or (some-> current-value value->label) "")
|
||||
:on-change handle-change-input
|
||||
:on-key-down handle-key-down
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder placeholder
|
||||
:type type}])
|
||||
[:span.dropdown-button {:on-click open-dropdown} i/arrow-down]
|
||||
|
||||
[:& dropdown {:show (or is-open? false)
|
||||
:on-close close-dropdown}
|
||||
[:ul.custom-select-dropdown {:style {:position "fixed"
|
||||
:top top-value
|
||||
:left left-value
|
||||
:bottom bottom-value}
|
||||
:ref font-size-wrapper-ref}
|
||||
(for [[index item] (map-indexed vector options)]
|
||||
(if (= :separator item)
|
||||
[:hr {:key (str element-id "-" index)}]
|
||||
(let [[value label] (as-key-value item)]
|
||||
[:li.checked-element
|
||||
{:key (str element-id "-" index)
|
||||
:class (when (= (str value) current-value) "is-selected")
|
||||
:data-value value
|
||||
:on-click select-item}
|
||||
[:span.check-icon i/tick]
|
||||
[:span.checked-element-value label]])))]]])))
|
||||
[:& dropdown {:show (or is-open? false)
|
||||
:on-close close-dropdown}
|
||||
[:ul {:class (stl/css :custom-select-dropdown)
|
||||
:ref font-size-wrapper-ref}
|
||||
(for [[index item] (map-indexed vector options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (stl/css :separator)
|
||||
:key (dm/str element-id "-" index)}]
|
||||
(let [[value label] (as-key-value item)]
|
||||
[:li
|
||||
{:key (str element-id "-" index)
|
||||
:class (stl/css-case :dropdown-element true
|
||||
:is-selected (= (dm/str value) current-value))
|
||||
:data-value value
|
||||
:on-click select-item}
|
||||
[:span {:class (stl/css :label)} label]
|
||||
[:span {:class (stl/css :check-icon)}
|
||||
i/tick-refactor]])))]]]))
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.components.select :as cs]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -28,9 +27,7 @@
|
|||
|
||||
(mf/defc input
|
||||
[{:keys [label help-icon disabled form hint trim children data-test on-change-value placeholder show-success?] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
|
||||
input-type (get props :type "text")
|
||||
(let [input-type (get props :type "text")
|
||||
input-name (get props :name)
|
||||
more-classes (get props :class)
|
||||
auto-focus? (get props :auto-focus? false)
|
||||
|
|
@ -111,98 +108,61 @@
|
|||
show-valid? (and show-success? touched? (not error))
|
||||
show-invalid? (and touched? error)]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (dm/str more-classes " "
|
||||
(stl/css-case
|
||||
:input-wrapper true
|
||||
:valid show-valid?
|
||||
:invalid show-invalid?
|
||||
:checkbox is-checkbox?
|
||||
:disabled disabled))}
|
||||
[:*
|
||||
(cond
|
||||
(some? label)
|
||||
[:label {:class (stl/css-case :input-with-label (not is-checkbox?)
|
||||
:input-label is-text?
|
||||
:radio-label is-radio?
|
||||
:checkbox-label is-checkbox?)
|
||||
:tab-index "-1"
|
||||
:for (name input-name)} label
|
||||
[:div {:class (dm/str more-classes " "
|
||||
(stl/css-case
|
||||
:input-wrapper true
|
||||
:valid show-valid?
|
||||
:invalid show-invalid?
|
||||
:checkbox is-checkbox?
|
||||
:disabled disabled))}
|
||||
[:*
|
||||
(cond
|
||||
(some? label)
|
||||
[:label {:class (stl/css-case :input-with-label (not is-checkbox?)
|
||||
:input-label is-text?
|
||||
:radio-label is-radio?
|
||||
:checkbox-label is-checkbox?)
|
||||
:tab-index "-1"
|
||||
:for (name input-name)} label
|
||||
|
||||
(when is-checkbox?
|
||||
[:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor])
|
||||
(when is-checkbox?
|
||||
[:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor])
|
||||
|
||||
(if is-checkbox?
|
||||
[:> :input props]
|
||||
|
||||
[:div {:class (stl/css :input-and-icon)}
|
||||
[:> :input props]
|
||||
(when help-icon'
|
||||
[:span {:class (stl/css :help-icon)
|
||||
:on-click (when (= "password" input-type)
|
||||
swap-text-password)}
|
||||
help-icon'])
|
||||
|
||||
(when show-valid?
|
||||
[:span {:class (stl/css :valid-icon)}
|
||||
i/tick-refactor])
|
||||
|
||||
(when show-invalid?
|
||||
[:span {:class (stl/css :invalid-icon)}
|
||||
i/close-refactor])])]
|
||||
|
||||
(some? children)
|
||||
[:label {:for (name input-name)}
|
||||
(if is-checkbox?
|
||||
[:> :input props]
|
||||
children])
|
||||
|
||||
[:div {:class (stl/css :input-and-icon)}
|
||||
[:> :input props]
|
||||
(when help-icon'
|
||||
[:span {:class (stl/css :help-icon)
|
||||
:on-click (when (= "password" input-type)
|
||||
swap-text-password)}
|
||||
help-icon'])
|
||||
|
||||
(when show-valid?
|
||||
[:span {:class (stl/css :valid-icon)}
|
||||
i/tick-refactor])
|
||||
|
||||
(when show-invalid?
|
||||
[:span {:class (stl/css :invalid-icon)}
|
||||
i/close-refactor])])]
|
||||
|
||||
(some? children)
|
||||
[:label {:for (name input-name)}
|
||||
[:> :input props]
|
||||
children])
|
||||
|
||||
|
||||
|
||||
(cond
|
||||
(and touched? (:message error))
|
||||
[:div {:id (dm/str "error-" input-name)
|
||||
:class (stl/css :error)
|
||||
:data-test (clojure.string/join [data-test "-error"])}
|
||||
(tr (:message error))]
|
||||
(cond
|
||||
(and touched? (:message error))
|
||||
[:div {:id (dm/str "error-" input-name)
|
||||
:class (stl/css :error)
|
||||
:data-test (clojure.string/join [data-test "-error"])}
|
||||
(tr (:message error))]
|
||||
|
||||
(string? hint)
|
||||
[:div {:class (stl/css :hint)} hint])]]
|
||||
|
||||
;;OLD
|
||||
[:div
|
||||
{:class (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?))}
|
||||
[:*
|
||||
[:> :input props]
|
||||
(cond
|
||||
(some? label)
|
||||
[:label {:for (name input-name)} label]
|
||||
|
||||
(some? children)
|
||||
[:label {:for (name input-name)} children])
|
||||
|
||||
(when help-icon'
|
||||
[:div.help-icon
|
||||
{:style {:cursor "pointer"}
|
||||
:on-click (when (= "password" input-type)
|
||||
swap-text-password)}
|
||||
help-icon'])
|
||||
(cond
|
||||
(and touched? (:message error))
|
||||
[:span.error {:id (dm/str "error-" input-name)
|
||||
:data-test (clojure.string/join [data-test "-error"])} (tr (:message error))]
|
||||
|
||||
(string? hint)
|
||||
[:span.hint hint])]])))
|
||||
(string? hint)
|
||||
[:div {:class (stl/css :hint)} hint])]]))
|
||||
|
||||
(mf/defc textarea
|
||||
[{:keys [label disabled form hint trim] :as props}]
|
||||
|
|
@ -259,62 +219,28 @@
|
|||
[:span.hint hint])]]))
|
||||
|
||||
(mf/defc select
|
||||
[{:keys [options disabled label form default data-test] :as props
|
||||
[{:keys [options disabled form default] :as props
|
||||
:or {default ""}}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
input-name (get props :name)
|
||||
(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)
|
||||
focus? (mf/use-state false)
|
||||
|
||||
handle-change
|
||||
(fn [event]
|
||||
(let [value (if (string? event) event (dom/get-target-val event))]
|
||||
(fm/on-input-change form input-name value)))
|
||||
(fm/on-input-change form input-name value)))]
|
||||
|
||||
on-focus
|
||||
(fn [_]
|
||||
(reset! focus? true))
|
||||
|
||||
on-blur
|
||||
(fn [_]
|
||||
(reset! focus? false))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :select-wrapper)}
|
||||
[:& cs/select
|
||||
{:default-value value
|
||||
:options options
|
||||
:on-change handle-change}]]
|
||||
|
||||
|
||||
[:div.custom-select
|
||||
[:select {:value value
|
||||
:on-change handle-change
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:disabled disabled
|
||||
:data-test data-test}
|
||||
(for [item options]
|
||||
[:> :option (clj->js (cond-> {:key (:value item) :value (:value item)}
|
||||
(:disabled item) (assoc :disabled "disabled")
|
||||
(:hidden item) (assoc :style {:display "none"})))
|
||||
(:label item)])]
|
||||
|
||||
[:div.input-container {:class (dom/classnames :disabled disabled :focus @focus?)}
|
||||
[:div.main-content
|
||||
[:label label]
|
||||
[:span.value (:label cvalue "")]]
|
||||
|
||||
[:div.icon
|
||||
i/arrow-slide]]])))
|
||||
[:div {:class (stl/css :select-wrapper)}
|
||||
[:& cs/select
|
||||
{:default-value value
|
||||
:disabled disabled
|
||||
:options options
|
||||
:on-change handle-change}]]))
|
||||
|
||||
(mf/defc radio-buttons
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
form (or (unchecked-get props "form")
|
||||
(let [form (or (unchecked-get props "form")
|
||||
(mf/use-ctx form-ctx))
|
||||
name (unchecked-get props "name")
|
||||
|
||||
|
|
@ -337,51 +263,31 @@
|
|||
|
||||
(when (fn? on-change)
|
||||
(on-change name value)))))]
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :custom-radio)}
|
||||
(for [{:keys [image value label]} options]
|
||||
(let [image? (some? image)
|
||||
value' (encode-fn value)
|
||||
checked? (= value current-value)
|
||||
key (str/ffmt "%-%" name value')]
|
||||
[:label {:for key
|
||||
:key key
|
||||
:style {:background-image (when image? (str/ffmt "url(%)" image))}
|
||||
:class (stl/css-case :radio-label true
|
||||
:global/checked checked?
|
||||
:with-image image?)}
|
||||
[:input {:on-change on-change'
|
||||
:type "radio"
|
||||
:class (stl/css :radio-input)
|
||||
:id key
|
||||
:name name
|
||||
:value value'
|
||||
:checked checked?}]
|
||||
(when (not image?)
|
||||
[:span {:class (stl/css-case :radio-icon true
|
||||
:global/checked checked?)}
|
||||
(when checked? [:span {:class (stl/css :radio-dot)}])])
|
||||
[:div {:class (stl/css :custom-radio)}
|
||||
(for [{:keys [image value label]} options]
|
||||
(let [image? (some? image)
|
||||
value' (encode-fn value)
|
||||
checked? (= value current-value)
|
||||
key (str/ffmt "%-%" name value')]
|
||||
[:label {:for key
|
||||
:key key
|
||||
:style {:background-image (when image? (str/ffmt "url(%)" image))}
|
||||
:class (stl/css-case :radio-label true
|
||||
:global/checked checked?
|
||||
:with-image image?)}
|
||||
[:input {:on-change on-change'
|
||||
:type "radio"
|
||||
:class (stl/css :radio-input)
|
||||
:id key
|
||||
:name name
|
||||
:value value'
|
||||
:checked checked?}]
|
||||
(when (not image?)
|
||||
[:span {:class (stl/css-case :radio-icon true
|
||||
:global/checked checked?)}
|
||||
(when checked? [:span {:class (stl/css :radio-dot)}])])
|
||||
|
||||
label]))]
|
||||
|
||||
|
||||
|
||||
[:div.custom-radio
|
||||
(for [{:keys [image value label]} options]
|
||||
(let [image? (some? image)
|
||||
value' (encode-fn value)
|
||||
key (str/ffmt "%-%" name value')]
|
||||
[:div.input-radio {:key key :class (when image? "with-image")}
|
||||
[:input {:on-change on-change'
|
||||
:type "radio"
|
||||
:id key
|
||||
:name name
|
||||
:value value'
|
||||
:checked (= value current-value)}]
|
||||
[:label {:for key
|
||||
:style {:background-image (when image? (str/ffmt "url(%)" image))}
|
||||
:class (when image? "with-image")}
|
||||
label]]))])))
|
||||
label]))]))
|
||||
|
||||
(mf/defc submit-button*
|
||||
{::mf/wrap-props false}
|
||||
|
|
@ -393,12 +299,11 @@
|
|||
on-click (unchecked-get props "onClick")
|
||||
children (unchecked-get props "children")
|
||||
|
||||
class (unchecked-get props "className")
|
||||
class (d/nilv (unchecked-get props "className") "btn-primary btn-large")
|
||||
name (d/nilv (unchecked-get props "name") "submit")
|
||||
|
||||
disabled? (or (and (some? form) (not (:valid @form)))
|
||||
(true? (unchecked-get props "disabled")))
|
||||
|
||||
new-klass (dm/str class " " (if disabled? (stl/css :btn-disabled) ""))
|
||||
|
||||
on-key-down
|
||||
|
|
@ -442,8 +347,7 @@
|
|||
|
||||
(mf/defc multi-input
|
||||
[{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
form (or form (mf/use-ctx form-ctx))
|
||||
(let [form (or form (mf/use-ctx form-ctx))
|
||||
input-name (get props :name)
|
||||
touched? (get-in @form [:touched input-name])
|
||||
error (get-in @form [:errors input-name])
|
||||
|
|
@ -456,17 +360,7 @@
|
|||
empty? (and (str/empty? @value)
|
||||
(zero? (count @items)))
|
||||
|
||||
klass (str (get props :class) " "
|
||||
(dom/classnames
|
||||
:focus @focus?
|
||||
:valid (and touched? (not error))
|
||||
:invalid (and touched? error)
|
||||
:empty empty?
|
||||
:custom-multi-input true
|
||||
:custom-input true))
|
||||
|
||||
|
||||
new-css-klass (str (get props :class) " "
|
||||
klass (str (get props :class) " "
|
||||
(stl/css-case
|
||||
:focus @focus?
|
||||
:valid (and touched? (not error))
|
||||
|
|
@ -474,11 +368,7 @@
|
|||
:empty empty?
|
||||
:custom-multi-input true))
|
||||
|
||||
in-klass (str class " "
|
||||
(dom/classnames
|
||||
:no-padding (pos? (count @items))))
|
||||
|
||||
new-css-in-klass (str class " "
|
||||
in-klass (str class " "
|
||||
(stl/css-case
|
||||
:inside-input true
|
||||
:no-padding (pos? (count @items))))
|
||||
|
|
@ -549,59 +439,32 @@
|
|||
values (filterv #(:valid %) values)]
|
||||
(update-form! values)))
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class new-css-klass}
|
||||
[:input {:id (name input-name)
|
||||
:class new-css-in-klass
|
||||
:type "text"
|
||||
:auto-focus true
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-key-down on-key-down
|
||||
:value @value
|
||||
:on-change on-change
|
||||
:placeholder (when empty? label)}]
|
||||
[:label {:for (name input-name)} label]
|
||||
[:div {:class klass}
|
||||
[:input {:id (name input-name)
|
||||
:class in-klass
|
||||
:type "text"
|
||||
:auto-focus true
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-key-down on-key-down
|
||||
:value @value
|
||||
:on-change on-change
|
||||
:placeholder (when empty? label)}]
|
||||
[:label {:for (name input-name)} label]
|
||||
|
||||
(when-let [items (seq @items)]
|
||||
[:div {:class (stl/css :selected-items)}
|
||||
(for [item items]
|
||||
[:div {:class (stl/css :selected-item)
|
||||
:key (:text item)
|
||||
:tab-index "0"
|
||||
:on-key-down (partial manage-key-down item)}
|
||||
[:span {:class (stl/css-case :around true
|
||||
:invalid (not (:valid item))
|
||||
:caution (:caution item))}
|
||||
[:span {:class (stl/css :text)} (:text item)]
|
||||
[:button {:class (stl/css :icon)
|
||||
:on-click #(remove-item! item)} i/close-refactor]]])])]
|
||||
|
||||
|
||||
|
||||
[:div {:class klass}
|
||||
[:input {:id (name input-name)
|
||||
:class in-klass
|
||||
:type "text"
|
||||
:auto-focus true
|
||||
:on-focus on-focus
|
||||
:on-blur on-blur
|
||||
:on-key-down on-key-down
|
||||
:value @value
|
||||
:on-change on-change
|
||||
:placeholder (when empty? label)}]
|
||||
[:label {:for (name input-name)} label]
|
||||
|
||||
(when-let [items (seq @items)]
|
||||
[:div.selected-items
|
||||
(for [item items]
|
||||
[:div.selected-item {:key (:text item)
|
||||
:tab-index "0"
|
||||
:on-key-down (partial manage-key-down item)}
|
||||
[:span.around {:class (dom/classnames "invalid" (not (:valid item))
|
||||
"caution" (:caution item))}
|
||||
[:span.text (:text item)]
|
||||
[:span.icon {:on-click #(remove-item! item)} i/cross]]])])])))
|
||||
(when-let [items (seq @items)]
|
||||
[:div {:class (stl/css :selected-items)}
|
||||
(for [item items]
|
||||
[:div {:class (stl/css :selected-item)
|
||||
:key (:text item)
|
||||
:tab-index "0"
|
||||
:on-key-down (partial manage-key-down item)}
|
||||
[:span {:class (stl/css-case :around true
|
||||
:invalid (not (:valid item))
|
||||
:caution (:caution item))}
|
||||
[:span {:class (stl/css :text)} (:text item)]
|
||||
[:button {:class (stl/css :icon)
|
||||
:on-click #(remove-item! item)} i/close-refactor]]])])]))
|
||||
|
||||
;; --- Validators
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.common.uuid :as uuid]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -24,8 +23,7 @@
|
|||
|
||||
(mf/defc select
|
||||
[{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
label-index (mf/with-memo [options]
|
||||
(let [label-index (mf/with-memo [options]
|
||||
(into {} (map as-key-value) options))
|
||||
|
||||
state* (mf/use-state
|
||||
|
|
@ -83,53 +81,33 @@
|
|||
(mf/with-effect [default-value]
|
||||
(swap! state* assoc :current-value default-value))
|
||||
|
||||
(if new-css-system
|
||||
[:div {:on-click open-dropdown
|
||||
:class (dm/str class " " (stl/css-case :custom-select true
|
||||
:disabled disabled))}
|
||||
(let [selected-option (first (filter #(= (:value %) default-value) options))
|
||||
current-icon (:icon selected-option)
|
||||
current-icon-ref (i/key->icon current-icon)]
|
||||
(when (and current-icon current-icon-ref)
|
||||
[:span {:class (stl/css :current-icon)} @current-icon-ref]))
|
||||
[:span {:class (stl/css :current-label)} current-label]
|
||||
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
|
||||
[:& dropdown {:show is-open? :on-close close-dropdown}
|
||||
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
|
||||
(for [[index item] (d/enumerate options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (dom/classnames (stl/css :separator) true)
|
||||
:key (dm/str current-id "-" index)}]
|
||||
(let [[value label icon] (as-key-value item)
|
||||
icon-ref (i/key->icon icon)]
|
||||
[:li
|
||||
{:key (dm/str current-id "-" index)
|
||||
:class (dom/classnames
|
||||
(stl/css :checked-element) true
|
||||
(stl/css :is-selected) (= value current-value))
|
||||
:data-value (pr-str value)
|
||||
:on-pointer-enter highlight-item
|
||||
:on-pointer-leave unhighlight-item
|
||||
:on-click select-item}
|
||||
(when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref])
|
||||
[:span {:class (stl/css :label)} label]
|
||||
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]
|
||||
|
||||
[:div.custom-select {:on-click open-dropdown :class class}
|
||||
[:span current-label]
|
||||
[:span.dropdown-button i/arrow-down]
|
||||
[:& dropdown {:show is-open? :on-close close-dropdown}
|
||||
[:ul.custom-select-dropdown
|
||||
(for [[index item] (d/enumerate options)]
|
||||
(if (= :separator item)
|
||||
[:hr {:key (dm/str current-id "-" index)}]
|
||||
(let [[value label] (as-key-value item)]
|
||||
[:li.checked-element
|
||||
{:key (dm/str current-id "-" index)
|
||||
:class (when (= value current-value) "is-selected")
|
||||
:data-value (pr-str value)
|
||||
:on-pointer-enter highlight-item
|
||||
:on-pointer-leave unhighlight-item
|
||||
:on-click select-item}
|
||||
[:span.check-icon i/tick]
|
||||
[:span label]])))]]])))
|
||||
[:div {:on-click open-dropdown
|
||||
:class (dm/str class " " (stl/css-case :custom-select true
|
||||
:disabled disabled))}
|
||||
(let [selected-option (first (filter #(= (:value %) default-value) options))
|
||||
current-icon (:icon selected-option)
|
||||
current-icon-ref (i/key->icon current-icon)]
|
||||
(when (and current-icon current-icon-ref)
|
||||
[:span {:class (stl/css :current-icon)} @current-icon-ref]))
|
||||
[:span {:class (stl/css :current-label)} current-label]
|
||||
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
|
||||
[:& dropdown {:show is-open? :on-close close-dropdown}
|
||||
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
|
||||
(for [[index item] (d/enumerate options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (dom/classnames (stl/css :separator) true)
|
||||
:key (dm/str current-id "-" index)}]
|
||||
(let [[value label icon] (as-key-value item)
|
||||
icon-ref (i/key->icon icon)]
|
||||
[:li
|
||||
{:key (dm/str current-id "-" index)
|
||||
:class (dom/classnames
|
||||
(stl/css :checked-element) true
|
||||
(stl/css :is-selected) (= value current-value))
|
||||
:data-value (pr-str value)
|
||||
:on-pointer-enter highlight-item
|
||||
:on-pointer-leave unhighlight-item
|
||||
:on-click select-item}
|
||||
(when (and icon icon-ref) [:span {:class (stl/css :icon)} @icon-ref])
|
||||
[:span {:class (stl/css :label)} label]
|
||||
[:span {:class (stl/css :check-icon)} i/tick-refactor]])))]]]))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue