♻️ Refactor state management of colorpicker & gradients

This commit is contained in:
Andrey Antukh 2022-08-09 13:29:26 +02:00
parent 4cc88bf84f
commit 8d06227d1e
15 changed files with 647 additions and 607 deletions

View file

@ -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))