3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 07:48:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add memorization to icon-button* ds component

Browse source
This commit is contained in:
Andrey Antukh 2025-06-09 16:17:10 +02:00
parent 10ae4dd3f7
commit fc655224af
2 changed files with 27 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/ds/buttons/button.cljs
View file

@ -36,4 +36,4 @@
(on-ref node)))})]
[:> "button" props
(when icon [:> icon* {:icon-id icon :size "m"}])
[:span {:class (stl/css :label-wrapper)} children]]))
[:span {:class (stl/css :label-wrapper)} children]]))

38
frontend/src/app/main/ui/ds/buttons/icon_button.cljs
View file

@ -9,6 +9,7 @@
[app.common.data.macros :as dm]
[app.main.style :as stl])
(:require
[app.common.data :as d]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
[app.main.ui.ds.tooltip.tooltip :refer [tooltip*]]
[rumext.v2 :as mf]))
@ -24,18 +25,31 @@
[:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]])
(mf/defc icon-button*
{::mf/schema schema:icon-button}
{::mf/schema schema:icon-button
::mf/memo true}
[{:keys [class icon icon-class variant aria-label children] :rest props}]
(let [variant (or variant "primary")
tooltip-id (mf/use-id)
class (dm/str class " " (stl/css-case :icon-button true
:icon-button-primary (= variant "primary")
:icon-button-secondary (= variant "secondary")
:icon-button-ghost (= variant "ghost")
:icon-button-action (= variant "action")
:icon-button-destructive (= variant "destructive")))
props (mf/spread-props props {:class class
:aria-labelledby tooltip-id})]
(let [variant
(d/nilv variant "primary")
tooltip-id
(mf/use-id)
class
(dm/str class " "
(stl/css-case :icon-button true
:icon-button-primary (= variant "primary")
:icon-button-secondary (= variant "secondary")
:icon-button-ghost (= variant "ghost")
:icon-button-action (= variant "action")
:icon-button-destructive (= variant "destructive")))
props
(mf/spread-props props
{:class class
:aria-labelledby tooltip-id})]
[:> tooltip* {:tooltip-content aria-label
:id tooltip-id}
[:> "button" props [:> icon* {:icon-id icon :aria-hidden true :class icon-class}] children]]))
[:> "button" props
[:> icon* {:icon-id icon :aria-hidden true :class icon-class}]
children]]))