mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -05:00
♻️ Move card width calculation to hook
This commit is contained in:
alonso.torres
parent
a9fc46f7e6
commit
58afa7498e
5 changed files with 45 additions and 111 deletions
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
(ns app.main.ui.dashboard.files
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.events :as ev]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -14,13 +13,12 @@
|
|||
[app.main.ui.dashboard.grid :refer [grid]]
|
||||
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
|
||||
[app.main.ui.dashboard.project-menu :refer [project-menu]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.router :as rt]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -126,16 +124,8 @@
|
|||
[{:keys [project team] :as props}]
|
||||
(let [files-map (mf/deref refs/dashboard-files)
|
||||
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)
|
||||
nitems (mth/floor ratio)
|
||||
limit (min 10 nitems)
|
||||
limit (max 1 limit)
|
||||
[rowref limit] (hooks/use-dynamic-grid-item-width)
|
||||
|
||||
files (mf/with-memo [project-id files-map]
|
||||
(->> (vals files-map)
|
||||
|
|
@ -160,21 +150,6 @@
|
|||
(st/emit! (-> (dd/create-file (with-meta params mdata))
|
||||
(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]
|
||||
(when project
|
||||
(let [pname (if (:is-default project)
|
||||
|
|
|
|||
|
|
@ -7,16 +7,14 @@
|
|||
(ns app.main.ui.dashboard.libraries
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.features :as features]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.dashboard.grid :refer [grid]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc libraries-page
|
||||
|
|
@ -35,16 +33,7 @@
|
|||
|
||||
components-v2 (features/use-feature "components/v2")
|
||||
|
||||
width (mf/use-state nil)
|
||||
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)]
|
||||
[rowref limit] (hooks/use-dynamic-grid-item-width 350)]
|
||||
|
||||
(mf/with-effect [team]
|
||||
(when team
|
||||
|
|
@ -57,21 +46,6 @@
|
|||
(st/emit! (dd/fetch-shared-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}
|
||||
[:div.dashboard-title#dashboard-libraries-title
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.math :as mth]
|
||||
[app.config :as cf]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.events :as ev]
|
||||
|
|
@ -20,14 +19,13 @@
|
|||
[app.main.ui.dashboard.grid :refer [line-grid]]
|
||||
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
|
||||
[app.main.ui.dashboard.project-menu :refer [project-menu]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.router :as rt]
|
||||
[app.util.time :as dt]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
[potok.core :as ptk]
|
||||
|
|
@ -168,16 +166,7 @@
|
|||
:menu-pos nil
|
||||
:edition? (= (:id project) edit-id)})
|
||||
|
||||
width (mf/use-state nil)
|
||||
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)
|
||||
[rowref limit] (hooks/use-dynamic-grid-item-width)
|
||||
|
||||
on-nav
|
||||
(mf/use-fn
|
||||
|
|
@ -258,21 +247,6 @@
|
|||
(dd/fetch-projects (:id team))
|
||||
(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
|
||||
{:class (when first? "first")}
|
||||
[:header.project {:ref rowref}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,14 @@
|
|||
|
||||
(ns app.main.ui.dashboard.search
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.dashboard.grid :refer [grid]]
|
||||
[app.main.ui.hooks :as hooks]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc search-page
|
||||
|
|
@ -37,31 +35,7 @@
|
|||
(dd/clear-selected-files))))
|
||||
|
||||
(let [result (mf/deref refs/dashboard-search-result)
|
||||
width (mf/use-state nil)
|
||||
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)))))
|
||||
[rowref limit] (hooks/use-dynamic-grid-item-width)]
|
||||
[:*
|
||||
[:header.dashboard-header
|
||||
[:div.dashboard-title#dashboard-search-title
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
"A collection of general purpose react hooks."
|
||||
(:require
|
||||
[app.common.files.focus :as cpf]
|
||||
[app.common.math :as mth]
|
||||
[app.main.broadcast :as mbc]
|
||||
[app.main.data.shortcuts :as dsc]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.storage :refer [storage]]
|
||||
[app.util.timers :as ts]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[goog.functions :as f]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -345,3 +347,38 @@
|
|||
|
||||
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])))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue