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

♻️ Move card width calculation to hook

Browse source
This commit is contained in:
alonso.torres 2023-11-24 15:33:59 +01:00
parent a9fc46f7e6
commit 58afa7498e
5 changed files with 45 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/app/main/ui/dashboard/files.cljs
View file

@ -6,7 +6,6 @@
(ns app.main.ui.dashboard.files (ns app.main.ui.dashboard.files
(:require (:require
[app.common.math :as mth]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -14,13 +13,12 @@
[app.main.ui.dashboard.grid :refer [grid]] [app.main.ui.dashboard.grid :refer [grid]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.project-menu :refer [project-menu]] [app.main.ui.dashboard.project-menu :refer [project-menu]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.router :as rt] [app.util.router :as rt]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -126,16 +124,8 @@
[{:keys [project team] :as props}] [{:keys [project team] :as props}]
(let [files-map (mf/deref refs/dashboard-files) (let [files-map (mf/deref refs/dashboard-files)
project-id (:id project) project-id (:id project)
width (mf/use-state nil)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0) [rowref limit] (hooks/use-dynamic-grid-item-width)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)
files (mf/with-memo [project-id files-map] files (mf/with-memo [project-id files-map]
(->> (vals files-map) (->> (vals files-map)
@ -160,21 +150,6 @@
(st/emit! (-> (dd/create-file (with-meta params mdata)) (st/emit! (-> (dd/create-file (with-meta params mdata))
(with-meta {::ev/origin origin}))))))] (with-meta {::ev/origin origin}))))))]
(mf/with-effect []
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
(rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
(reset! width row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub))))
(mf/with-effect [project] (mf/with-effect [project]
(when project (when project
(let [pname (if (:is-default project) (let [pname (if (:is-default project)

30
frontend/src/app/main/ui/dashboard/libraries.cljs
View file

@ -7,16 +7,14 @@
(ns app.main.ui.dashboard.libraries (ns app.main.ui.dashboard.libraries
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.math :as mth]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.features :as features] [app.main.features :as features]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.dashboard.grid :refer [grid]] [app.main.ui.dashboard.grid :refer [grid]]
[app.main.ui.hooks :as hooks]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc libraries-page (mf/defc libraries-page
@ -35,16 +33,7 @@
components-v2 (features/use-feature "components/v2") components-v2 (features/use-feature "components/v2")
width (mf/use-state nil) [rowref limit] (hooks/use-dynamic-grid-item-width 350)]
rowref (mf/use-ref)
itemsize (if components-v2
350
(if (>= @width 1030) 280 230))
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)]
(mf/with-effect [team] (mf/with-effect [team]
(when team (when team
@ -57,21 +46,6 @@
(st/emit! (dd/fetch-shared-files) (st/emit! (dd/fetch-shared-files)
(dd/clear-selected-files))) (dd/clear-selected-files)))
(mf/with-effect []
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
(rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
(reset! width row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub))))
[:* [:*
[:header.dashboard-header {:ref rowref} [:header.dashboard-header {:ref rowref}
[:div.dashboard-title#dashboard-libraries-title [:div.dashboard-title#dashboard-libraries-title

30
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -8,7 +8,6 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.math :as mth]
[app.config :as cf] [app.config :as cf]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.events :as ev] [app.main.data.events :as ev]
@ -20,14 +19,13 @@
[app.main.ui.dashboard.grid :refer [line-grid]] [app.main.ui.dashboard.grid :refer [line-grid]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.project-menu :refer [project-menu]] [app.main.ui.dashboard.project-menu :refer [project-menu]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.router :as rt] [app.util.router :as rt]
[app.util.time :as dt] [app.util.time :as dt]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l] [okulary.core :as l]
[potok.core :as ptk] [potok.core :as ptk]
@ -168,16 +166,7 @@
:menu-pos nil :menu-pos nil
:edition? (= (:id project) edit-id)}) :edition? (= (:id project) edit-id)})
width (mf/use-state nil) [rowref limit] (hooks/use-dynamic-grid-item-width)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)
on-nav on-nav
(mf/use-fn (mf/use-fn
@ -258,21 +247,6 @@
(dd/fetch-projects (:id team)) (dd/fetch-projects (:id team))
(dd/clear-selected-files))))] (dd/clear-selected-files))))]
(mf/with-effect
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
(rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
(reset! width row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub))))
[:article.dashboard-project-row [:article.dashboard-project-row
{:class (when first? "first")} {:class (when first? "first")}
[:header.project {:ref rowref} [:header.project {:ref rowref}

30
frontend/src/app/main/ui/dashboard/search.cljs
View file

@ -6,16 +6,14 @@
(ns app.main.ui.dashboard.search (ns app.main.ui.dashboard.search
(:require (:require
[app.common.math :as mth]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.dashboard.grid :refer [grid]] [app.main.ui.dashboard.grid :refer [grid]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.webapi :as wapi]
[beicon.core :as rx]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(mf/defc search-page (mf/defc search-page
@ -37,31 +35,7 @@
(dd/clear-selected-files)))) (dd/clear-selected-files))))
(let [result (mf/deref refs/dashboard-search-result) (let [result (mf/deref refs/dashboard-search-result)
width (mf/use-state nil) [rowref limit] (hooks/use-dynamic-grid-item-width)]
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)]
(mf/use-effect
(fn []
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
(rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
(reset! width row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub)))))
[:* [:*
[:header.dashboard-header [:header.dashboard-header
[:div.dashboard-title#dashboard-search-title [:div.dashboard-title#dashboard-search-title

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

@ -8,6 +8,7 @@
"A collection of general purpose react hooks." "A collection of general purpose react hooks."
(:require (:require
[app.common.files.focus :as cpf] [app.common.files.focus :as cpf]
[app.common.math :as mth]
[app.main.broadcast :as mbc] [app.main.broadcast :as mbc]
[app.main.data.shortcuts :as dsc] [app.main.data.shortcuts :as dsc]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -16,6 +17,7 @@
[app.util.dom.dnd :as dnd] [app.util.dom.dnd :as dnd]
[app.util.storage :refer [storage]] [app.util.storage :refer [storage]]
[app.util.timers :as ts] [app.util.timers :as ts]
[app.util.webapi :as wapi]
[beicon.core :as rx] [beicon.core :as rx]
[goog.functions :as f] [goog.functions :as f]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -345,3 +347,38 @@
state)) state))
(defn use-dynamic-grid-item-width
([]
(use-dynamic-grid-item-width nil))
([itemsize]
(let [width (mf/use-state (:items-width @storage))
rowref (mf/use-ref)
itemsize (cond
(some? itemsize) itemsize
(>= @width 1030) 280
:else 230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)]
(mf/with-effect
(let [node (mf/ref-val rowref)
mnt? (volatile! true)
sub (->> (wapi/observe-resize node)
(rx/observe-on :af)
(rx/subs (fn [entries]
(let [row (first entries)
row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(when @mnt?
(reset! width row-width)
(swap! storage assoc :items-width row-width))))))]
(fn []
(vreset! mnt? false)
(rx/dispose! sub))))
[rowref limit])))