3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-16 10:01:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add minor cosmetic changes to the use-dynamic-grid-item-width hook

Browse source
This commit is contained in:
Andrey Antukh 2023-11-28 13:37:39 +01:00
parent 82dc1526d4
commit 0977799960
1 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/app/main/ui/hooks.cljs
View file

@ -348,24 +348,26 @@
state)) state))
(defn use-dynamic-grid-item-width (defn use-dynamic-grid-item-width
([] ([] (use-dynamic-grid-item-width nil))
(use-dynamic-grid-item-width nil))
([itemsize] ([itemsize]
(let [width (mf/use-state (:items-width @storage)) (let [;; NOTE: we pass a function to use-state for avoid repeatedly
;; lookup `:items-width` on storage on each render
width* (mf/use-state #(:items-width @storage))
width (deref width*)
rowref (mf/use-ref) rowref (mf/use-ref)
itemsize (cond itemsize (cond
(some? itemsize) itemsize (some? itemsize) itemsize
(>= @width 1030) 280 (>= width 1030) 280
:else 230) :else 230)
ratio (if (some? @width) (/ @width itemsize) 0) ratio (if (some? width) (/ width itemsize) 0)
nitems (mth/floor ratio) nitems (mth/floor ratio)
limit (min 10 nitems) limit (mth/min 10 nitems)
limit (max 1 limit)] limit (mth/max 1 limit)]
(mf/with-effect (mf/with-effect []
(let [node (mf/ref-val rowref) (let [node (mf/ref-val rowref)
mnt? (volatile! true) mnt? (volatile! true)
sub (->> (wapi/observe-resize node) sub (->> (wapi/observe-resize node)
@ -375,7 +377,7 @@
row-rect (.-contentRect ^js row) row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)] row-width (.-width ^js row-rect)]
(when @mnt? (when @mnt?
(reset! width row-width) (reset! width* row-width)
(swap! storage assoc :items-width row-width))))))] (swap! storage assoc :items-width row-width))))))]
(fn [] (fn []
(vreset! mnt? false) (vreset! mnt? false)