mirror of
https://github.com/penpot/penpot.git
synced 2025-06-13 01:01:43 +02:00
♻️ Refactor state management of colorpicker & gradients
This commit is contained in:
parent
4cc88bf84f
commit
8d06227d1e
15 changed files with 647 additions and 607 deletions
|
@ -7,16 +7,25 @@
|
|||
(ns app.main.ui.hooks
|
||||
"A collection of general purpose react hooks."
|
||||
(:require
|
||||
[app.common.uuid :as uuid]
|
||||
[app.common.data.macros :as dm]
|
||||
[app.common.pages :as cp]
|
||||
[app.main.data.shortcuts :as dsc]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.storage :refer [storage]]
|
||||
[app.util.timers :as ts]
|
||||
[beicon.core :as rx]
|
||||
[goog.functions :as f]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn use-id
|
||||
"Get a stable id value across rerenders."
|
||||
[]
|
||||
(mf/use-memo #(dm/str (uuid/next))))
|
||||
|
||||
(defn use-rxsub
|
||||
[ob]
|
||||
(let [[state reset-state!] (mf/useState @ob)]
|
||||
|
@ -191,7 +200,6 @@
|
|||
|
||||
[(deref state) ref]))
|
||||
|
||||
|
||||
(defn use-stream
|
||||
"Wraps the subscription to a stream into a `use-effect` call"
|
||||
([stream on-subscribe]
|
||||
|
@ -205,6 +213,7 @@
|
|||
|
||||
;; https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
|
||||
(defn use-previous
|
||||
"Returns the value from previuous render cycle."
|
||||
[value]
|
||||
(let [ref (mf/use-ref value)]
|
||||
(mf/use-effect
|
||||
|
@ -214,13 +223,27 @@
|
|||
(mf/ref-val ref)))
|
||||
|
||||
(defn use-update-var
|
||||
"Returns a var pointer what automatically updates with latest values."
|
||||
[value]
|
||||
(let [ref (mf/use-var value)]
|
||||
(mf/use-effect
|
||||
(mf/deps value)
|
||||
(fn []
|
||||
(reset! ref value)))
|
||||
ref))
|
||||
(let [ptr (mf/use-var value)]
|
||||
(mf/with-effect [value]
|
||||
(reset! ptr value))
|
||||
ptr))
|
||||
|
||||
(defn use-ref-callback
|
||||
"Returns a stable callback pointer what calls the interned
|
||||
callback. The interned callback will be automatically updated on
|
||||
each reander if the reference changes and works as noop if the
|
||||
pointer references to nil value."
|
||||
[f]
|
||||
(let [ptr (mf/use-ref nil)]
|
||||
(mf/with-effect [f]
|
||||
(mf/set-ref-val! ptr #js {:f f}))
|
||||
(mf/use-fn
|
||||
(fn [& args]
|
||||
(let [obj (mf/ref-val ptr)]
|
||||
(when ^boolean obj
|
||||
(apply (.-f obj) args)))))))
|
||||
|
||||
(defn use-equal-memo
|
||||
[val]
|
||||
|
@ -258,4 +281,17 @@
|
|||
#(cp/focus-objects objects focus))]
|
||||
objects)))
|
||||
|
||||
(defn use-debounce
|
||||
[ms value]
|
||||
(let [[state update-state-fn] (mf/useState value)
|
||||
update-fn (mf/use-memo (mf/deps ms) #(f/debounce update-state-fn ms))]
|
||||
(mf/with-effect [value]
|
||||
(update-fn value))
|
||||
state))
|
||||
|
||||
(defn use-persistent-state
|
||||
[key default]
|
||||
(let [state (mf/use-state (get @storage key default))]
|
||||
(mf/with-effect [@state key]
|
||||
(swap! storage assoc key @state))
|
||||
state))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue