Skip to content

Commit f72de4e

Browse files
kimo-kkimo-k
committed
[nested-v-grid] Support corner headers
1 parent 9f9dde4 commit f72de4e

File tree

2 files changed

+108
-73
lines changed

2 files changed

+108
-73
lines changed

‎src/re_com/nested_grid.cljs‎

Lines changed: 81 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,8 +1175,7 @@
11751175
(defn nested-v-grid [{:keys [row-tree column-tree
11761176
row-tree-depth column-tree-depth
11771177
row-header-widths column-header-heights
1178-
row-height column-width column-depth
1179-
theme
1178+
row-height column-width
11801179
row-header-width column-header-height]
11811180
:or {row-header-width 40 column-header-height 40
11821181
row-height 20 column-width 40}}]
@@ -1252,57 +1251,29 @@
12521251
(reset! internal-row-tree (u/deref-or-value row-tree))
12531252
(reset! internal-column-tree (u/deref-or-value column-tree)))
12541253
:reagent-render
1255-
(fn [{:keys [row-tree column-tree
1256-
cell-value
1257-
theme-cells?
1258-
on-resize]
1259-
{:keys [cell
1254+
(fn [{:keys [row-tree column-tree
1255+
cell-value
1256+
theme-cells?
1257+
on-resize]
1258+
{:keys [cell corner-header
12601259
row-header column-header
12611260
row-header-label column-header-label
12621261
row-header-grid column-header-grid
1263-
row-height column-width
1264-
cell-grid]
1265-
:as parts} :parts
1266-
:as props
1267-
:or {on-resize (fn [{:keys [value dimension]}]
1268-
(case dimension
1269-
:column-header-height (reset! column-header-heights-internal value)))}}]
1262+
corner-header-grid cell-grid
1263+
row-height column-width]} :parts
1264+
:as props
1265+
:or {on-resize (fn [{:keys [value dimension]}]
1266+
(case dimension
1267+
:column-header-height (reset! column-header-heights-internal value)))}}]
12701268
(mapv u/deref-or-value [row-tree row-header-widths row-height
12711269
column-tree column-header-heights column-width])
1272-
(let [theme (theme/defaults
1273-
props
1274-
{:user [(theme/<-props props {:part ::wrapper
1275-
:include [:style :class]})]})
1276-
themed (fn [part props] (theme/apply props {:part part} theme))
1277-
spacer-container [:div {:style {:position :sticky
1278-
:grid-row-start 1
1279-
:grid-column-start 1
1280-
:left 0
1281-
:top 0
1282-
:background-color :white}}]
1283-
row-headers (for [row-path @row-windowed-paths
1284-
:let [props {:row-path row-path
1285-
:path row-path
1286-
:style {:grid-row-start (ngu/path->grid-line-name row-path)
1287-
:grid-row-end (str "span " (get @row-spans row-path))
1288-
:grid-column-start (count row-path)
1289-
:grid-column-end (str "span " (inc (- @row-depth (count row-path))))}}
1290-
props (assoc props :children [(u/part row-header-label props
1291-
:default ngp/row-header-label)])
1292-
props (themed ::row-header props)]]
1293-
(u/part row-header props {:key row-path}))
1294-
column-headers (for [column-path @column-windowed-paths
1295-
:let [props (themed ::column-header
1296-
{:column-path column-path
1297-
:path column-path
1298-
:style {:grid-column-start (ngu/path->grid-line-name column-path)
1299-
:grid-column-end (str "span " (get @column-spans column-path))
1300-
:grid-row-start (count column-path)
1301-
:grid-row-end (str "span " (inc (- @column-depth (count column-path))))
1302-
:overflow :hidden}
1303-
:children [(u/part column-header-label props
1304-
:default ngp/column-header-label)]})]]
1305-
(u/part column-header props {:key column-path}))
1270+
(let [theme
1271+
(theme/defaults props {:user [(theme/<-props props {:part ::wrapper
1272+
:include [:style :class]})]})
1273+
1274+
themed
1275+
(fn [part props] (theme/apply props {:part part} theme))
1276+
13061277
row-width-resizers
13071278
(for [i (range @row-depth)]
13081279
^{:key [::row-width-resizer i]}
@@ -1355,21 +1326,63 @@
13551326
:keypath (get @column-windowed-keypaths i)
13561327
:size (get @column-windowed-sizes i)
13571328
:dimension :column-width}]))
1358-
main-container [:div
1359-
(themed ::wrapper
1360-
{:style {:grid-template-rows (ngu/grid-template [@column-header-height-total @row-height-total])
1361-
:grid-template-columns (ngu/grid-template [@row-header-width-total @column-width-total])}
1362-
:ref wrapper-ref!})]
1363-
cells (for [row-path @row-windowed-leaf-paths
1364-
column-path @column-windowed-leaf-paths
1365-
:let [props {:row-path row-path
1366-
:column-path column-path}
1367-
props (cond-> props
1368-
cell-value (assoc :cell-value
1369-
(cell-value props))
1370-
theme-cells? (->> (theme ::cell-wrapper)))]]
1371-
(u/part cell props {:key [row-path column-path]
1372-
:default ngp/cell-wrapper}))]
1329+
1330+
main-container
1331+
[:div
1332+
(themed ::wrapper
1333+
{:style {:grid-template-rows (ngu/grid-template [@column-header-height-total @row-height-total])
1334+
:grid-template-columns (ngu/grid-template [@row-header-width-total @column-width-total])}
1335+
:ref wrapper-ref!})]
1336+
1337+
row-headers
1338+
(for [row-path @row-windowed-paths
1339+
:let [props {:row-path row-path
1340+
:path row-path
1341+
:style {:grid-row-start (ngu/path->grid-line-name row-path)
1342+
:grid-row-end (str "span " (get @row-spans row-path))
1343+
:grid-column-start (count row-path)
1344+
:grid-column-end (str "span " (inc (- @row-depth (count row-path))))}}
1345+
props (assoc props :children [(u/part row-header-label props
1346+
:default ngp/row-header-label)])
1347+
props (themed ::row-header props)]]
1348+
(u/part row-header props {:key row-path}))
1349+
1350+
column-headers
1351+
(for [column-path @column-windowed-paths
1352+
:let [props (themed ::column-header
1353+
{:column-path column-path
1354+
:path column-path
1355+
:style {:grid-column-start (ngu/path->grid-line-name column-path)
1356+
:grid-column-end (str "span " (get @column-spans column-path))
1357+
:grid-row-start (count column-path)
1358+
:grid-row-end (str "span " (inc (- @column-depth (count column-path))))
1359+
:overflow :hidden}
1360+
:children [(u/part column-header-label props
1361+
:default ngp/column-header-label)]})]]
1362+
(u/part column-header props {:key column-path}))
1363+
1364+
corner-headers
1365+
(for [column-index (range @row-depth)
1366+
row-index (range @column-depth)
1367+
:let [props (themed ::corner-header
1368+
{:row-index row-index
1369+
:column-index column-index
1370+
:style {:grid-row-start (inc row-index)
1371+
:grid-column-start (inc column-index)}
1372+
:children [[:div "HI"]]})]]
1373+
(u/part corner-header props {:key [::corner-header row-index column-index]}))
1374+
1375+
cells
1376+
(for [row-path @row-windowed-leaf-paths
1377+
column-path @column-windowed-leaf-paths
1378+
:let [props {:row-path row-path
1379+
:column-path column-path}
1380+
props (cond-> props
1381+
cell-value (assoc :cell-value
1382+
(cell-value props))
1383+
theme-cells? (->> (theme ::cell-wrapper)))]]
1384+
(u/part cell props {:key [row-path column-path]
1385+
:default ngp/cell-wrapper}))]
13731386
(conj main-container
13741387
(u/part cell-grid
13751388
(themed ::cell-grid
@@ -1392,5 +1405,9 @@
13921405
{:children (concat row-headers row-width-resizers (row-height-resizers))
13931406
:style {:grid-template-rows @row-template
13941407
:grid-template-columns @row-header-template}}))
1395-
spacer-container
1408+
(u/part corner-header-grid
1409+
(themed ::corner-header-grid
1410+
{:children (concat corner-headers row-width-resizers column-height-resizers)
1411+
:style {:grid-template-rows @column-header-template
1412+
:grid-template-columns @row-header-template}}))
13961413
(u/deref-or-value overlay))))})))

‎src/re_com/nested_grid/theme.cljs‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,21 @@
4444
[props _]
4545
(style props {:box-shadow "0 1px 0 #ccc"}))
4646

47-
(defmethod base ::ng/column-header
47+
(defmethod base ::ng/corner-header-grid
4848
[props _]
49-
(update props :style merge
50-
{:user-select "none"
51-
:width "100%"
52-
:height "100%"}))
49+
(style props {:position :sticky
50+
:display :grid
51+
:grid-row-start 1
52+
:grid-column-start 1
53+
:left 0
54+
:top 0}))
55+
56+
(defmethod main ::ng/corner-header-grid
57+
[props _]
58+
(style props {:border-right "thin solid #ccc"
59+
:border-bottom "thin solid #ccc"}))
5360

54-
(def column-header-main
61+
(def header-main
5562
(let [{:keys [sm-3 sm-4]} default/golden-section-50
5663
{:keys [border light-background]} default/colors]
5764
{:padding-top sm-3
@@ -60,13 +67,24 @@
6067
:background-color light-background
6168
:color "#666"
6269
:font-size "13px"
63-
:border-top "thin solid #ccc"
64-
:border-left "thin solid #ccc"}))
70+
:border-top "thin solid #ccc"
71+
:border-left "thin solid #ccc"}))
72+
73+
(defmethod main ::ng/corner-header
74+
[props _]
75+
(style props header-main))
76+
77+
(defmethod base ::ng/column-header
78+
[props _]
79+
(update props :style merge
80+
{:user-select "none"
81+
:width "100%"
82+
:height "100%"}))
6583

6684
(defmethod main ::ng/column-header
6785
[props {:keys [state]}]
6886
(let [{:keys [align-column align-column-header align]} (:header-spec state)]
69-
(style props column-header-main
87+
(style props header-main
7088
{:text-align (or align-column-header align-column align :center)})))
7189

7290
(def row-header-main

0 commit comments

Comments
 (0)