3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-17 23:06:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add micro optimizations to radio button react components

Browse source
This commit is contained in:
Andrey Antukh 2024-02-15 16:09:14 +01:00
parent 443ca0a02c
commit f857836bfa
1 changed files with 28 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/app/main/ui/components/radio_buttons.cljs
View file

@ -18,26 +18,24 @@
(mf/defc radio-button (mf/defc radio-button
{::mf/props :obj} {::mf/props :obj}
[props] [{:keys [icon id value disabled title unique-key icon-class type]}]
(let [context (mf/use-ctx context) (let [context (mf/use-ctx context)
icon (unchecked-get props "icon") allow-empty (unchecked-get context "allow-empty")
id (unchecked-get props "id") type (if ^boolean type
value (unchecked-get props "value") type
disabled (unchecked-get props "disabled") (if ^boolean allow-empty
title (unchecked-get props "title") "checkbox"
unique-key (unchecked-get props "unique-key") "radio"))
icon-class (unchecked-get props "icon-class")
type (or (unchecked-get props "type")
(if (unchecked-get context "allow-empty")
"checkbox"
"radio"))
on-change (unchecked-get context "on-change") on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected") selected (unchecked-get context "selected")
name (unchecked-get context "name") name (unchecked-get context "name")
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)
value (encode-fn value)]
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)]
[:label {:html-for id [:label {:html-for id
:title title :title title
@ -48,33 +46,22 @@
:disabled disabled)} :disabled disabled)}
(if (some? icon) (if (some? icon)
[:span {:class (when icon-class icon-class)} [:span {:class icon-class} icon]
icon] [:span {:class (stl/css :title-name)} value])
[:span {:class (stl/css :title-name)}
(encode-fn value)])
[:input {:id id [:input {:id id
:on-change on-change :on-change on-change
:type type :type type
:name name :name name
:disabled disabled :disabled disabled
:value (encode-fn value) :value value
:checked checked?}]])) :checked checked?}]]))
(mf/defc radio-buttons (mf/defc radio-buttons
{::mf/props :obj} {::mf/props :obj}
[props] [{:keys [children on-change selected class wide encode-fn decode-fn] :as props}]
(let [children (unchecked-get props "children") (let [encode-fn (d/nilv encode-fn identity)
on-change (unchecked-get props "on-change") decode-fn (d/nilv decode-fn identity)
selected (unchecked-get props "selected")
name (unchecked-get props "name")
class (unchecked-get props "class")
wide (unchecked-get props "wide")
allow-empty? (unchecked-get props "allow-empty")
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
nitems (if (array? children) nitems (if (array? children)
(alength children) (alength children)
1) 1)
@ -90,21 +77,17 @@
(mf/use-fn (mf/use-fn
(mf/deps on-change) (mf/deps on-change)
(fn [event] (fn [event]
(let [input-node (dom/get-target event) (let [input (dom/get-target event)
value (dom/get-target-val event) value (dom/get-target-val event)
value (when (not= value selected) value)] value (when (not= value selected) value)]
(when (fn? on-change) (when (fn? on-change)
(do (on-change (decode-fn value) event) (on-change (decode-fn value) event)
(dom/blur! input-node)))))) (dom/blur! input)))))
context-value context-value
(mf/with-memo [selected on-change' name encode-fn decode-fn] (mf/spread-obj props {:on-change on-change'
#js {:selected selected :encode-fn encode-fn
:on-change on-change' :decode-fn decode-fn})]
:name name
:encode-fn encode-fn
:decode-fn decode-fn
:allow-empty allow-empty?})]
[:& (mf/provider context) {:value context-value} [:& (mf/provider context) {:value context-value}
[:div {:class (dm/str class " " (stl/css :radio-btn-wrapper)) [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))