mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
⚡ Add performance enhancements to copy-button
react component
This commit is contained in:
parent
a3faca910f
commit
20b651560d
2 changed files with 44 additions and 21 deletions
|
@ -8,32 +8,40 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.events :as-alias ev]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.timers :as timers]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.timers :as tm]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.v2.core :as rx]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc copy-button [{:keys [data on-copied children class]}]
|
||||
(let [just-copied (mf/use-state false)]
|
||||
(mf/use-effect
|
||||
(mf/deps @just-copied)
|
||||
(fn []
|
||||
(when @just-copied
|
||||
(when (fn? on-copied)
|
||||
(on-copied))
|
||||
(let [sub (timers/schedule 1000 #(reset! just-copied false))]
|
||||
;; On unmount we dispose the timer
|
||||
#(rx/-dispose sub)))))
|
||||
[:button {:class (dm/str class " " (stl/css-case :copy-button (not (some? children))
|
||||
:copy-wrapper (some? children)))
|
||||
:on-click #(when-not @just-copied
|
||||
(reset! just-copied true)
|
||||
(wapi/write-to-clipboard (if (fn? data) (data) data)))}
|
||||
(mf/defc copy-button
|
||||
{::mf/props :obj}
|
||||
[{:keys [data on-copied children class]}]
|
||||
(let [active* (mf/use-state false)
|
||||
active? (deref active*)
|
||||
|
||||
(when children
|
||||
children)
|
||||
class (dm/str class " "
|
||||
(stl/css-case
|
||||
:copy-button (not (some? children))
|
||||
:copy-wrapper (some? children)))
|
||||
|
||||
on-click
|
||||
(mf/use-fn
|
||||
(mf/deps data)
|
||||
(fn [event]
|
||||
(when-not (dom/get-boolean-data event "active")
|
||||
(reset! active* true)
|
||||
(tm/schedule 1000 #(reset! active* false))
|
||||
(when (fn? on-copied) (on-copied event))
|
||||
(wapi/write-to-clipboard
|
||||
(if (fn? data) (data) data)))))]
|
||||
|
||||
[:button {:class class
|
||||
:data-active (dm/str active?)
|
||||
:on-click on-click}
|
||||
children
|
||||
[:span {:class (stl/css :icon-btn)}
|
||||
(if @just-copied
|
||||
(if active?
|
||||
i/tick-refactor
|
||||
i/clipboard-refactor)]]))
|
||||
|
|
|
@ -607,6 +607,21 @@
|
|||
(when (some? node)
|
||||
(.getAttribute node (dm/str "data-" attr))))
|
||||
|
||||
(defn- resolve-node
|
||||
[event]
|
||||
(cond
|
||||
(instance? js/Element event)
|
||||
event
|
||||
|
||||
:else
|
||||
(get-current-target event)))
|
||||
|
||||
(defn get-boolean-data
|
||||
[node attr]
|
||||
(some-> (resolve-node node)
|
||||
(get-data attr)
|
||||
(parse-boolean)))
|
||||
|
||||
(defn set-data!
|
||||
[^js node ^string attr value]
|
||||
(when (some? node)
|
||||
|
|
Loading…
Add table
Reference in a new issue