3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +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

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

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