Skip to content

Commit

Permalink
[prototype] Sticky row label within a nestedg grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Sep 24, 2024
1 parent f3d6fb7 commit af65e5b
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 17 deletions.
7 changes: 4 additions & 3 deletions src/re_com/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -525,8 +525,8 @@
children))

(defn row-header-wrapper-part
[{:keys [theme children]}]
(into [:div (theme/apply {} {:part ::row-header-wrapper} theme)]
[{:keys [theme children part]}]
(into [:div (theme/apply {} {:part part} theme)]
children))

(defn row-header-part [{:keys [path]}]
Expand Down Expand Up @@ -967,7 +967,8 @@
(not show?) dec))
:position "relative"}}
(u/part row-header-wrapper
(merge props {:children [(u/part row-header props :default row-header-part)]})
(merge props {:part ::row-header-wrapper
:children [(u/part row-header props :default row-header-part)]})
:default row-header-wrapper-part)
(when (and resize-rows? show?)
[resize-button (merge props {:mouse-down-x mouse-down-x
Expand Down
4 changes: 2 additions & 2 deletions src/re_com/theme/default.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@

(def row-header-wrapper-base {:position "relative"
:user-select "none"
:height "100%"})
#_#_:height "100%"})

(defmethod base ::nested-grid/row-header-wrapper [props _]
(update props :style merge row-header-wrapper-base))
Expand Down Expand Up @@ -200,7 +200,7 @@
:color "#666"
:text-align "left"
:font-size "13px"
:overflow "hidden"
#_#_:overflow "hidden"
:white-space "nowrap"
:text-overflow "ellipsis"
:border-left "thin solid #ccc"
Expand Down
88 changes: 76 additions & 12 deletions src/re_demo/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -501,18 +501,85 @@
", more cells get rendered. " [:code "[1]"] " and " [:code "[2]"] " count as "
"branch paths, since they have children in the " [:code ":row-tree"] ". By default, these are not shown."]]])

(defn basic-grid []
[nested-grid
:column-tree [2 4 6]
:row-tree [1 3 5]

:row-header-width 200
:remove-empty-column-space? true
:cell (fn [{:keys [column-path row-path edge]}]
(* (last column-path) (last row-path)))])

(defn lookup-grid []
[nested-grid
:column-tree [0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 17 18 19 20 29 28 27 26 25 24 23 22 21]
:row-tree [0 [1 2 3] 4 [5 6 7] 8 [9 10 11] 12 [13 14 15] 17 18 19 20 29 28 27 26 25 24 23 22 21]
:row-header-wrapper (fn [{:keys [children part theme]}]
[:div (re-com.theme/apply
{:style {:color :red
:position :sticky
:top 0}}
{:part part}
theme)
[:div {:style {:position :sticky
:top 0}}
"X"
(first children)]])
:sticky? true
:cell (fn [{:keys [column-path row-path]}]
(get-in lookup-table [(last column-path)
(last row-path)]))])

(defn not-grid
[]
[:div {:style {:flex 1
:overflow :auto}}
[:div {:style {:width 200
:height 200
:background :blue}}]
"hi"])

(defn layout-demo []
[:div {:style {:display :grid
:grid-template-rows "50px 50px"
:grid-template-columns "50px 50px 50px"}}
[:div {:style {:background :orange :position :sticky :top 0}}]
[:div {:style {:background :yellow}}]
[:div {:style {:background :blue}}]
[:div {:style {:background :red
:display :grid
:grid-template-rows "20px 20px"
:grid-template-columns "20px 20px"}}
[:div {:style {:height 50 :width 50}}
[:div {:style {:position :sticky :top 0}} "HI"]]]
[:div {:style {:background :purple}}]
[:div {:style {:background :black}}]]
#_[:div #_{:style {:resize :both
:overflow :auto}}

[v-box
:style {:height "100%"}
:children
[#_#_[basic-grid]
[not-grid]
[lookup-grid]]]
#_[h-box
:justify :start
:align :start
:children
[[not-grid]
[basic-grid]
[lookup-grid]]]])

(defn basic-demo []
[v-box
:gap "12px"
:children
[[h-box
:justify :between
:children
[[nested-grid
:column-tree [2 4 6]
:row-tree [1 3 5]
:cell (fn [{:keys [column-path row-path edge]}]
(* (last column-path) (last row-path)))]
[[basic-grid]
[:pre {:style {:margin-top "19px"}} "[nested-grid
:column-tree [2 4 6]
:row-tree [1 3 5]
Expand All @@ -527,12 +594,7 @@
[h-box
:justify :between
:children
[[nested-grid
:column-tree [0 1 2]
:row-tree [2 3 4]
:cell (fn [{:keys [column-path row-path]}]
(get-in lookup-table [(last column-path)
(last row-path)]))]
[[lookup-grid]
[:pre {:style {:margin-top "19px"}} "(def lookup-table [[\"🚓\" \"🛵\" \"🚲\" \"🛻\" \"🚚\"]
[\"🍐\" \"🍎\" \"🍌\" \"🥝\" \"🍇\"]
[\"🐕\" \"🐎\" \"🧸\" \"🐈\" \"🐟\"]])
Expand Down Expand Up @@ -709,10 +771,12 @@
[:code ":cell"] " is responsible for styling the resulting " [:code ":value."]]]])

(defn demos []
(let [tabs [{:id :basic :label "Basic Demo" :view basic-demo}
(let [tabs [{:id :layout :label "Layout" :view layout-demo}
{:id :basic :label "Basic Demo" :view basic-demo}
{:id :internals :label "Internals" :view internals-demo}
{:id :multimodal :label "Multimodal" :view multimodal-demo}
{:id :app :label "Applications" :view app-demo}

{:id :style :label "Style" :view style-demo}]
!tab-id (r/atom (:id (first tabs)))
!tab (r/reaction (u/item-for-id @!tab-id tabs))]
Expand Down

0 comments on commit af65e5b

Please sign in to comment.