mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
♻️ Add minor refactor to radio buttons components
This commit is contained in:
Andrey Antukh
parent
397ada1f78
commit
a44f2c5788
2 changed files with 91 additions and 56 deletions
|
|
@ -5,58 +5,73 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.components.radio-buttons
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.math :as math]
|
||||
[app.main.ui.formats :as fmt]
|
||||
[app.util.dom :as dom]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ctx-radio-button (mf/create-context nil))
|
||||
(def context
|
||||
(mf/create-context nil))
|
||||
|
||||
(mf/defc radio-button
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [ctx (mf/use-ctx ctx-radio-button)
|
||||
icon (unchecked-get props "icon")
|
||||
id (unchecked-get props "id")
|
||||
on-change (:on-change ctx)
|
||||
selected (:selected ctx)
|
||||
value (unchecked-get props "value")
|
||||
checked? (= selected value)
|
||||
name (:name ctx)]
|
||||
(let [context (mf/use-ctx context)
|
||||
|
||||
icon (unchecked-get props "icon")
|
||||
id (unchecked-get props "id")
|
||||
value (unchecked-get props "value")
|
||||
|
||||
on-change (unchecked-get context "on-change")
|
||||
selected (unchecked-get context "selected")
|
||||
name (unchecked-get context "name")
|
||||
|
||||
encode-fn (unchecked-get context "encode-fn")
|
||||
checked? (= selected value)]
|
||||
|
||||
[:label {:for id
|
||||
:class (dom/classnames (css :radio-icon) true
|
||||
(css :checked) checked?)}
|
||||
icon
|
||||
:class (stl/css-case
|
||||
:radio-icon true
|
||||
:checked checked?)}
|
||||
|
||||
(when (some? icon) icon)
|
||||
|
||||
[:input {:id id
|
||||
:on-change on-change
|
||||
:type "radio"
|
||||
:name name
|
||||
:value value
|
||||
:checked checked?}]]))
|
||||
:value (encode-fn value)
|
||||
:checked checked?}]]))
|
||||
|
||||
(mf/defc nilable-option
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [ctx (mf/use-ctx ctx-radio-button)
|
||||
icon (unchecked-get props "icon")
|
||||
id (unchecked-get props "id")
|
||||
on-change (:on-change ctx)
|
||||
selected (:selected ctx)
|
||||
value (unchecked-get props "value")
|
||||
checked? (= selected value)
|
||||
name (:name ctx)]
|
||||
(let [context (mf/use-ctx context)
|
||||
icon (unchecked-get props "icon")
|
||||
id (unchecked-get props "id")
|
||||
value (unchecked-get props "value")
|
||||
|
||||
on-change (unchecked-get context "on-change")
|
||||
selected (unchecked-get context "selected")
|
||||
name (unchecked-get context "name")
|
||||
|
||||
encode-fn (unchecked-get context "encode-fn")
|
||||
checked? (= selected value)]
|
||||
|
||||
[:label {:for id
|
||||
:class (dom/classnames (css :radio-icon) true
|
||||
(css :checked) checked?)}
|
||||
:class (stl/css-case
|
||||
:radio-icon true
|
||||
:checked checked?)}
|
||||
icon
|
||||
[:input {:id id
|
||||
:on-change on-change
|
||||
:type "checkbox"
|
||||
:name name
|
||||
:value value
|
||||
:checked checked?}]]))
|
||||
:value (encode-fn value)
|
||||
:checked checked?}]]))
|
||||
|
||||
(mf/defc radio-buttons
|
||||
{::mf/wrap-props false}
|
||||
|
|
@ -65,14 +80,36 @@
|
|||
on-change (unchecked-get props "on-change")
|
||||
selected (unchecked-get props "selected")
|
||||
name (unchecked-get props "name")
|
||||
calculate-width (fmt/format-pixels (+ (math/pow 2 (count children)) (* 28 (count children))))
|
||||
handle-change
|
||||
|
||||
encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
|
||||
decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
|
||||
|
||||
nitems (if (array? children)
|
||||
(alength children)
|
||||
1)
|
||||
|
||||
width (mf/with-memo [nitems]
|
||||
(fmt/format-pixels
|
||||
(+ (math/pow 2 nitems)
|
||||
(* 28 nitems))))
|
||||
|
||||
on-change'
|
||||
(mf/use-fn
|
||||
(mf/deps on-change)
|
||||
(fn [event]
|
||||
(let [value (dom/get-target-val event)]
|
||||
(on-change value event))))]
|
||||
[:& (mf/provider ctx-radio-button) {:value {:selected selected :on-change handle-change :name name}}
|
||||
[:div {:class (css :radio-btn-wrapper)
|
||||
:style {:width calculate-width}}
|
||||
(when (fn? on-change)
|
||||
(on-change (decode-fn value) event)))))
|
||||
|
||||
context-value
|
||||
(mf/with-memo [selected on-change' name encode-fn decode-fn]
|
||||
#js {:selected selected
|
||||
:on-change on-change'
|
||||
:name name
|
||||
:encode-fn encode-fn
|
||||
:decode-fn decode-fn})]
|
||||
|
||||
[:& (mf/provider context) {:value context-value}
|
||||
[:div {:class (stl/css :radio-btn-wrapper)
|
||||
:style {:width width}}
|
||||
children]]))
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.assets.components
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require-macros [app.main.style :as stl :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
|
|
@ -569,29 +569,27 @@
|
|||
:open? open?}
|
||||
(if ^boolean new-css-system
|
||||
[:& cmm/asset-section-block {:role :title-button}
|
||||
[:*
|
||||
(when open?
|
||||
[:div {:class (stl/css :listing-options)}
|
||||
[:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
|
||||
:on-change toggle-list-style
|
||||
:name "listing-style"}
|
||||
[:& radio-button {:icon i/view-as-list-refactor
|
||||
:value "list"
|
||||
:id :list}]
|
||||
[:& radio-button {:icon i/flex-grid-refactor
|
||||
:value "grid"
|
||||
:id :grid}]]])
|
||||
|
||||
(when open?
|
||||
[:div {:class (dom/classnames (css :listing-options) true)}
|
||||
(let [option-selected (if listing-thumbs?
|
||||
"grid"
|
||||
"list")]
|
||||
[:& radio-buttons {:selected option-selected
|
||||
:on-change toggle-list-style
|
||||
:name "listing-style"}
|
||||
[:& radio-button {:icon (mf/html i/view-as-list-refactor)
|
||||
:value "list"
|
||||
:id :list}]
|
||||
[:& radio-button {:icon (mf/html i/flex-grid-refactor)
|
||||
:value "grid"
|
||||
:id :grid}]])])
|
||||
(when (and components-v2 (not read-only?) local?)
|
||||
[:div {:on-click add-component
|
||||
:class (dom/classnames (css :add-component) true)}
|
||||
i/add-refactor
|
||||
[:& file-uploader {:accept cm/str-image-types
|
||||
:multi true
|
||||
:ref input-ref
|
||||
:on-selected on-file-selected}]])]
|
||||
(when (and components-v2 (not read-only?) local?)
|
||||
[:div {:on-click add-component
|
||||
:class (dom/classnames (css :add-component) true)}
|
||||
i/add-refactor
|
||||
[:& file-uploader {:accept cm/str-image-types
|
||||
:multi true
|
||||
:ref input-ref
|
||||
:on-selected on-file-selected}]])]]
|
||||
(when local?
|
||||
[:& cmm/asset-section-block {:role :title-button}
|
||||
(when (and components-v2 (not read-only?))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue