Skip to content

Commit 39e09ce

Browse files
kimo-kkimo-k
committed
[nested-grid] Add :corner-header prop
For #day8/dash8.day8.com.au#375
1 parent b2996de commit 39e09ce

File tree

1 file changed

+96
-76
lines changed

1 file changed

+96
-76
lines changed

‎src/re_com/nested_grid.cljs‎

Lines changed: 96 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,12 @@
8989
" By default, returns the " [:code ":label"] ", " [:code ":id"]
9090
", or else a string of the entire value of the last item in "
9191
[:code ":row-path"] "."]}
92+
{:name :corner-header
93+
:type "part"
94+
:validate-fn part?
95+
:description
96+
[:span "A string, hiccup, or function of " [:code "{:keys [row-index column-index]}"] "."
97+
" Both row-index and column-index are integers. By default, returns " [:code "nil"] "."]}
9298
{:name :cell-wrapper
9399
:type "part"
94100
:validate-fn part?
@@ -318,7 +324,16 @@
318324
[:span "Similar to " [:code ":column-header"]
319325
", but it should return a string value only."
320326
" After the export button is clicked, " [:code "nested-grid"] " maps "
321-
[:code ":on-export-column-header"] "over any cells marked for export, passing the "
327+
[:code ":on-export-column-header"] "over any column-headers marked for export, passing the "
328+
"results to " [:code ":on-export"] " via the " [:code ":header-rows"] " prop."]}
329+
{:name :on-export-corner-header
330+
:type "{:keys [row-index column-index]} -> string"
331+
:validate-fn ifn?
332+
:description
333+
[:span "Similar to " [:code ":corner-header"]
334+
", but it should return a string value only."
335+
" After the export button is clicked, " [:code "nested-grid"] " maps "
336+
[:code ":on-export-column-header"] " over all the top-left corner cells, passing the "
322337
"results to " [:code ":on-export"] " via the " [:code ":header-rows"] " prop."]}
323338
{:name :show-selection-box?
324339
:default false
@@ -692,7 +707,7 @@
692707
remove-empty-row-space? remove-empty-column-space?
693708
column-width column-header-height row-header-width row-height
694709
show-export-button? on-export export-button
695-
on-export-cell on-export-column-header on-export-row-header
710+
on-export-cell on-export-column-header on-export-row-header on-export-corner-header
696711
on-init-export-fn
697712
show-zebra-stripes?
698713
show-selection-box? resize-columns? resize-rows?
@@ -714,6 +729,7 @@
714729
show-zebra-stripes? true
715730
on-export-column-header header-label
716731
on-export-row-header header-label
732+
on-export-corner-header header-label
717733
resize-columns? true
718734
resize-rows? false
719735
theme-cells? true
@@ -785,6 +801,11 @@
785801
(take (count path)
786802
(iterate pop path))))
787803
transpose (partial apply mapv vector)
804+
export-corner-headers #(mapv (fn [x]
805+
(mapv (fn [y]
806+
(on-export-corner-header {:row-index y :column-index x}))
807+
(range @row-depth)))
808+
(range @column-depth))
788809
export-column-headers #(let [export-path (fn [path]
789810
(on-export-column-header {:path path :row-path path}))]
790811
(transpose (mapv (fn [path] (mapv export-path (ancestry path)))
@@ -813,7 +834,6 @@
813834
props (cond-> props cell-value (merge {:value (cell-value props)}))]
814835
(on-export-cell props)))
815836
column-paths)))))
816-
export-spacers #(vec (repeat column-depth (vec (repeat row-depth nil))))
817837
default-export-button (fn [{:keys [on-click]}]
818838
[buttons/md-icon-button
819839
{:md-icon-name "zmdi zmdi-copy"
@@ -825,15 +845,15 @@
825845
:on-click on-click}])
826846
export-fn #(let [column-headers (export-column-headers)
827847
row-headers (export-row-headers)
828-
spacers (export-spacers)
848+
corner-headers (export-corner-headers)
829849
cells (export-cells)
830-
header-rows (mapv into spacers column-headers)
850+
header-rows (mapv into corner-headers column-headers)
831851
main-rows (mapv into row-headers cells)
832852
rows (concat header-rows main-rows)]
833853
(on-export
834854
{:column-headers column-headers
835855
:row-headers row-headers
836-
:spacers spacers
856+
:corner-headers corner-headers
837857
:cells cells
838858
:header-rows header-rows
839859
:main-rows main-rows
@@ -842,19 +862,19 @@
842862
_ (when on-init-export-fn (on-init-export-fn export-fn))
843863
export-button (u/part export-button
844864
(themed ::export-button
845-
{:style {:position :fixed
846-
:right 10}
847-
:on-click export-fn})
865+
{:style {:position :fixed
866+
:right 10}
867+
:on-click export-fn})
848868
:default default-export-button)
849869
cell-grid-container [:div
850870
(themed ::cell-grid-container
851-
{:style {:max-height max-height
852-
:max-width max-width
853-
:display :grid
854-
:grid-column-start 2
855-
:grid-row-start 2
856-
:grid-template-columns (grid-template cell-grid-columns)
857-
:grid-template-rows (grid-template cell-grid-rows)}})]
871+
{:style {:max-height max-height
872+
:max-width max-width
873+
:display :grid
874+
:grid-column-start 2
875+
:grid-row-start 2
876+
:grid-template-columns (grid-template cell-grid-columns)
877+
:grid-template-rows (grid-template cell-grid-rows)}})]
858878
column-header-cells (for [path column-paths
859879
:let [edge (cond-> #{}
860880
(start-branch? path column-paths) (conj :left)
@@ -1024,14 +1044,14 @@
10241044
^{:key [::zebra-stripe i]}
10251045
[:div
10261046
(themed ::zebra-stripe
1027-
{:style
1028-
{:grid-column-start 1
1029-
:grid-column-end "end"
1030-
:grid-row i
1031-
:background-color "#999"
1032-
:opacity 0.05
1033-
:z-index 1
1034-
:pointer-events "none"}})])
1047+
{:style
1048+
{:grid-column-start 1
1049+
:grid-column-end "end"
1050+
:grid-row i
1051+
:background-color "#999"
1052+
:opacity 0.05
1053+
:z-index 1
1054+
:pointer-events "none"}})])
10351055
box-selector [selection-part
10361056
{:drag drag
10371057
:grid-columns cell-grid-columns
@@ -1086,54 +1106,54 @@
10861106
:children [export-button]}]]
10871107
outer-grid-container [:div
10881108
(themed ::outer-grid-container
1089-
{:on-mouse-enter #(reset! hover? true)
1090-
:on-mouse-leave #(reset! hover? false)
1091-
:style
1092-
(merge
1093-
{:position :relative
1094-
:display :grid
1095-
:grid-template-columns (grid-template [(px row-header-total-width)
1096-
(px column-header-total-width)])
1097-
:grid-template-rows (grid-template [(px column-header-total-height)
1098-
"1fr"])}
1099-
(when-not sticky?
1100-
{:max-width (or max-width (when remove-empty-column-space? native-width))
1101-
:max-height (or max-height
1102-
(when remove-empty-row-space? native-height))
1103-
:flex "1 1 auto"
1104-
:overflow :auto}))})]
1109+
{:on-mouse-enter #(reset! hover? true)
1110+
:on-mouse-leave #(reset! hover? false)
1111+
:style
1112+
(merge
1113+
{:position :relative
1114+
:display :grid
1115+
:grid-template-columns (grid-template [(px row-header-total-width)
1116+
(px column-header-total-width)])
1117+
:grid-template-rows (grid-template [(px column-header-total-height)
1118+
"1fr"])}
1119+
(when-not sticky?
1120+
{:max-width (or max-width (when remove-empty-column-space? native-width))
1121+
:max-height (or max-height
1122+
(when remove-empty-row-space? native-height))
1123+
:flex "1 1 auto"
1124+
:overflow :auto}))})]
11051125
corner-headers (into [:div (themed ::corner-header-grid-container
1106-
{:style {:display :grid
1107-
:box-sizing :border-box
1108-
:position :sticky
1109-
:top (cond-> sticky-top (and sticky? show-export-button?) (+ 25))
1110-
:left (if sticky? sticky-left 0)
1111-
:grid-column-start 1
1112-
:grid-row-start 1
1113-
:z-index 3
1114-
:grid-template-columns (grid-template max-row-widths)
1115-
:grid-template-rows (grid-template max-column-heights)}})]
1126+
{:style {:display :grid
1127+
:box-sizing :border-box
1128+
:position :sticky
1129+
:top (cond-> sticky-top (and sticky? show-export-button?) (+ 25))
1130+
:left (if sticky? sticky-left 0)
1131+
:grid-column-start 1
1132+
:grid-row-start 1
1133+
:z-index 3
1134+
:grid-template-columns (grid-template max-row-widths)
1135+
:grid-template-rows (grid-template max-column-heights)}})]
11161136
corner-header-cells)
11171137
column-headers (into [:div (themed ::column-header-grid-container
1118-
{:style {:position :sticky
1119-
:top (cond-> sticky-top (and sticky? show-export-button?) (+ 25))
1120-
:width :fit-content
1121-
:z-index 2
1122-
:display :grid
1123-
:grid-column-start 2
1124-
:grid-row-start 1
1125-
:grid-template-columns (grid-template cell-grid-columns)
1126-
:grid-template-rows (grid-template max-column-heights)}})]
1138+
{:style {:position :sticky
1139+
:top (cond-> sticky-top (and sticky? show-export-button?) (+ 25))
1140+
:width :fit-content
1141+
:z-index 2
1142+
:display :grid
1143+
:grid-column-start 2
1144+
:grid-row-start 1
1145+
:grid-template-columns (grid-template cell-grid-columns)
1146+
:grid-template-rows (grid-template max-column-heights)}})]
11271147
column-header-cells)
11281148
row-headers (into [:div (themed ::row-header-grid-container
1129-
{:style {:position :sticky
1130-
:left (if sticky? sticky-left 0)
1131-
:z-index 1
1132-
:display :grid
1133-
:grid-column-start 1
1134-
:grid-row-start 2
1135-
:grid-template-columns (grid-template max-row-widths)
1136-
:grid-template-rows (grid-template cell-grid-rows)}})]
1149+
{:style {:position :sticky
1150+
:left (if sticky? sticky-left 0)
1151+
:z-index 1
1152+
:display :grid
1153+
:grid-column-start 1
1154+
:grid-row-start 2
1155+
:grid-template-columns (grid-template max-row-widths)
1156+
:grid-template-rows (grid-template cell-grid-rows)}})]
11371157
row-header-cells)
11381158
cells (-> cell-grid-container
11391159
(into cells)
@@ -1143,15 +1163,15 @@
11431163
(conj (when show-selection-box? box-selector)))]
11441164
[:div (merge
11451165
(themed ::wrapper
1146-
{:src src
1147-
:style (merge {:flex-direction :column}
1148-
(when-not sticky?
1149-
(merge {:flex "0 0 auto"
1150-
:display :flex}
1151-
(when remove-empty-column-space?
1152-
{:max-width :fit-content})
1153-
(when remove-empty-row-space?
1154-
{:max-height :fit-content}))))})
1166+
{:src src
1167+
:style (merge {:flex-direction :column}
1168+
(when-not sticky?
1169+
(merge {:flex "0 0 auto"
1170+
:display :flex}
1171+
(when remove-empty-column-space?
1172+
{:max-width :fit-content})
1173+
(when remove-empty-row-space?
1174+
{:max-height :fit-content}))))})
11551175
(debug/->attr props))
11561176
(when show-export-button? control-panel)
11571177
(conj

0 commit comments

Comments
 (0)