Skip to content

Commit 1490607

Browse files
kimo-kkimo-k
committed
[nested-grid] Polish :parts, support :align- keys in column specs
1 parent 67b1b9c commit 1490607

File tree

5 files changed

+263
-151
lines changed

5 files changed

+263
-151
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
> Committed but unreleased changes are put here, at the top. Older releases are detailed chronologically below.
44
55
#### Added
6+
7+
## 2.21.19 (2024-08-19)
8+
69
- `single-dropdown` - `:drop-direction` prop. Overrides any behavior which would position the body dynamically. `:up` or `:above` positions the body above the anchor, `:down`, `:dn` or `:below` positions it below.
10+
- `nested-grid` - optional `:align-column` & `:align-column-header` keys for column-specs.
711

812
## 2.21.18 (2024-08-09)
913

‎src/re_com/nested_grid.cljs‎

Lines changed: 123 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,15 @@
99
[re-com.box :as box]
1010
[re-com.buttons :as buttons]))
1111

12-
(def nested-grid-parts-desc {})
12+
(def nested-grid-parts-desc
13+
(when include-args-desc?
14+
[{:name :wrapper :level 1 :impl "[:div]"}
15+
{:name :cell-grid-container :level 2 :impl "[:div]"}
16+
{:name :cell-wrapper :level 3 :impl "[:div]"}
17+
{:name :column-header-wrapper :level 2 :impl "[:div]"}
18+
{:name :row-header-wrapper :level 2 :impl "[:div]"}
19+
{:name :header-spacer :level 2 :impl "[:div]"}
20+
{:name :zebra-stripe :level 2 :impl "[:div]"}]))
1321

1422
(def nested-grid-parts
1523
(when include-args-desc?
@@ -404,67 +412,47 @@
404412
(defn cell-part [{:keys [column-path row-path]}]
405413
nil)
406414

407-
(defn cell-wrapper-part [{:keys [column-path row-path cell theme cell-value edge]
415+
(defn cell-wrapper-part [{:keys [column-path row-path cell theme cell-value value]
408416
:as props}]
409-
(let [props (cond-> props
410-
:do (dissoc :cell)
411-
cell-value (assoc :value (cell-value props)))]
412-
[:div
413-
(-> {:style {:grid-column (path->grid-line-name column-path)
414-
:grid-row (path->grid-line-name row-path)}}
415-
(theme/apply {:state {:edge edge} :part ::cell-wrapper} theme))
416-
[u/part cell props :default cell-part]]))
417+
[:div
418+
(-> {:style {:grid-column (path->grid-line-name column-path)
419+
:grid-row (path->grid-line-name row-path)}}
420+
(theme/apply {:part ::cell-wrapper} theme))
421+
[u/part cell (dissoc props :cell) :default cell-part]])
417422

418423
(defn header-label [{:keys [path]}]
419424
(let [header (last path)]
420425
(str (or (:label header)
421426
(:id header)
422427
header))))
423428

424-
(defn column-header-part [{:keys [column-path]}]
425-
(header-label {:path column-path}))
426-
427-
(theme/apply {} {:part ::column-header-wrapper} [])
429+
(defn column-header-part [{:keys [path]}]
430+
(header-label {:path path}))
428431

429432
(defn column-header-wrapper-part
430-
[{:keys [column-header column-path column-paths theme show? edge resize-columns?]
431-
:as props}]
432-
[:div
433-
{:style {:grid-column-start (path->grid-line-name column-path)
434-
:grid-column-end (str "span " (cond-> column-path
435-
:do (header-cross-span column-paths)
436-
(not show?) dec))
437-
:grid-row-start (count column-path)
438-
:grid-row-end (str "span " (cond-> column-path
439-
:do (header-main-span column-paths)
440-
(not show?) dec))
441-
:position "relative"}}
442-
[:div (theme/apply {} {:state {:edge edge} :part ::column-header-wrapper}
443-
theme)
444-
[u/part column-header props :default column-header-part]]
445-
(when (and resize-columns? show?)
446-
[resize-button (merge props {:dimension :column
447-
:path column-path})])])
433+
[{:keys [theme children]}]
434+
(into [:div (theme/apply {} {:part ::column-header-wrapper} theme)]
435+
children))
448436

449437
(defn row-header-part [{:keys [row-path]}]
450438
(header-label {:path row-path}))
451439

452440
(defn row-header-wrapper-part
453441
[{:keys [row-path row-paths row-header theme show? edge resize-rows?]
454442
:as props}]
455-
[:div
456-
{:style {:grid-row-start (path->grid-line-name row-path)
457-
:grid-row-end (str "span " (cond-> row-path
458-
:do (header-cross-span row-paths)
459-
(not show?) dec))
460-
:grid-column-start (count row-path)
461-
:grid-column-end (str "span " (cond-> row-path
462-
:do (header-main-span row-paths)
463-
(not show?) dec))
464-
:position "relative"}}
465-
[:div (theme/apply {}
466-
{:state {:edge edge} :part ::row-header-wrapper}
467-
theme)
443+
[:div (theme/apply {:style {:grid-row-start (path->grid-line-name row-path)
444+
:grid-row-end (str "span " (cond-> row-path
445+
:do (header-cross-span row-paths)
446+
(not show?) dec))
447+
:grid-column-start (count row-path)
448+
:grid-column-end (str "span " (cond-> row-path
449+
:do (header-main-span row-paths)
450+
(not show?) dec))
451+
:position "relative"}}
452+
{:state {:edge edge} :part ::row-header-wrapper}
453+
theme)
454+
455+
[:div
468456
[u/part row-header props :default row-header-part]]
469457
(when (and resize-rows? show?)
470458
[resize-button (merge props {:dimension :row
@@ -624,31 +612,37 @@
624612
(header-prop path :height :row row-height))
625613
(+ y-distance)
626614
(max 0))))
627-
resize-handler (r/atom #())
628-
theme {:user [theme (theme/parts parts)]}]
629-
(fn [& {:keys [column-tree row-tree
630-
cell cell-value column-header row-header header-spacer
631-
cell-wrapper column-header-wrapper row-header-wrapper header-spacer-wrapper
632-
show-branch-paths?
633-
max-height max-width
634-
column-width column-header-height row-header-width row-height
635-
show-export-button? on-export
636-
on-export-cell on-export-column-header on-export-row-header
637-
show-zebra-stripes?
638-
show-selection-box? resize-columns? resize-rows?]
639-
:or {column-header-height 25
640-
column-width 55
641-
row-header-width 80
642-
row-height 25
643-
show-export-button? true
644-
show-branch-paths? false
645-
show-selection-box? false
646-
show-zebra-stripes? true
647-
on-export-column-header header-label
648-
on-export-row-header header-label
649-
resize-columns? true
650-
resize-rows? false}}]
651-
(let [themed (fn [part props] (theme/apply props {:part part} theme))
615+
resize-handler (r/atom #())]
616+
(fn [& {:as passed-in-props}]
617+
(let [{:as props
618+
:keys [column-tree row-tree
619+
cell cell-value column-header row-header header-spacer
620+
cell-wrapper column-header-wrapper row-header-wrapper header-spacer-wrapper
621+
show-branch-paths?
622+
max-height max-width
623+
column-width column-header-height row-header-width row-height
624+
show-export-button? on-export
625+
on-export-cell on-export-column-header on-export-row-header
626+
show-zebra-stripes?
627+
show-selection-box? resize-columns? resize-rows?]
628+
:or {column-header-height 25
629+
column-width 55
630+
row-header-width 80
631+
row-height 25
632+
show-export-button? true
633+
show-branch-paths? false
634+
show-selection-box? false
635+
show-zebra-stripes? true
636+
on-export-column-header header-label
637+
on-export-row-header header-label
638+
resize-columns? true
639+
resize-rows? false}}
640+
(theme/top-level-part passed-in-props ::nested-grid)
641+
theme (theme/defaults
642+
props
643+
{:user [(theme/<-props props {:part ::wrapper
644+
:include [:style :class]})]})
645+
themed (fn [part props] (theme/apply props {:part part} theme))
652646
column-paths (spec->headers* column-tree)
653647
column-leaf-paths (leaf-paths column-paths)
654648
leaf-column? (set column-leaf-paths)
@@ -825,28 +819,47 @@
825819
:grid-template-rows (grid-template cell-grid-rows)}})]
826820
column-header-cells (doall
827821
(for [path column-paths
828-
:let [props {:column-path path
829-
:path path
830-
:column-header column-header
831-
:column-paths column-paths
832-
:show? (show? path :column)
833-
:on-resize resize-column!
834-
:mouse-down-x mouse-down-x
835-
:last-mouse-x last-mouse-x
836-
:mouse-x mouse-x
837-
:resize-handler resize-handler
838-
:resize-columns? resize-columns?
839-
:drag drag
840-
:selection? selection?
841-
:edge (cond-> #{}
842-
(start-branch? path column-paths) (conj :left)
843-
(end-branch? path column-paths) (conj :right)
844-
(root-level? path column-paths) (conj :top)
845-
(leaf-level? path column-paths) (conj :bottom)
846-
(section-left? path) (conj :column-section-left)
847-
(section-right? path) (conj :column-section-right))}]]
822+
:let [edge (cond-> #{}
823+
(start-branch? path column-paths) (conj :left)
824+
(end-branch? path column-paths) (conj :right)
825+
(root-level? path column-paths) (conj :top)
826+
(leaf-level? path column-paths) (conj :bottom)
827+
(section-left? path) (conj :column-section-left)
828+
(section-right? path) (conj :column-section-right))
829+
show? (show? path :column)
830+
state {:edge edge
831+
:column-path path
832+
:path path
833+
:header-spec (last path)
834+
:show? show?}
835+
props (merge {:theme (update theme :user-variables
836+
conj (theme/with-state state))
837+
:selection? selection?
838+
:edge edge}
839+
state)]]
848840
^{:key [::column (or path (gensym))]}
849-
[u/part column-header-wrapper props :default column-header-wrapper-part]))
841+
[:div {:style {:grid-column-start (path->grid-line-name path)
842+
:grid-column-end (str "span " (cond-> path
843+
:do (header-cross-span column-paths)
844+
(not show?) dec))
845+
:grid-row-start (count path)
846+
:grid-row-end (str "span " (cond-> path
847+
:do (header-main-span column-paths)
848+
(not show?) dec))
849+
:position "relative"}}
850+
[u/part column-header-wrapper
851+
(merge props {:children [[u/part column-header props :default column-header-part]]})
852+
:default column-header-wrapper-part]
853+
(when (and resize-columns? show?)
854+
[resize-button (merge props {:mouse-down-x mouse-down-x
855+
:last-mouse-x last-mouse-x
856+
:mouse-x mouse-x
857+
:resize-handler resize-handler
858+
:resize-columns? resize-columns?
859+
:on-resize resize-column!
860+
:drag drag
861+
:dimension :column
862+
:path path})])]))
850863
row-header-cells (doall
851864
(for [path row-paths
852865
:let [props {:row-path path
@@ -886,19 +899,25 @@
886899
(for [row-path showing-row-paths]
887900
(doall
888901
(for [column-path showing-column-paths
889-
:let [props (merge {:column-path column-path
890-
:row-path row-path
891-
:cell cell
892-
:theme theme
893-
:edge (cond-> #{}
894-
(= column-path (first showing-column-paths)) (conj :left)
895-
(= column-path (last showing-column-paths)) (conj :right)
896-
(= row-path (first showing-row-paths)) (conj :top)
897-
(= row-path (last showing-row-paths)) (conj :bottom)
898-
(cell-section-left? column-path) (conj :column-section-left)
899-
(cell-section-right? column-path) (conj :column-section-right))}
902+
:let [edge (cond-> #{}
903+
(= column-path (first showing-column-paths)) (conj :left)
904+
(= column-path (last showing-column-paths)) (conj :right)
905+
(= row-path (first showing-row-paths)) (conj :top)
906+
(= row-path (last showing-row-paths)) (conj :bottom)
907+
(cell-section-left? column-path) (conj :column-section-left)
908+
(cell-section-right? column-path) (conj :column-section-right))
909+
value (when cell-value (cell-value {:column-path column-path
910+
:row-path row-path}))
911+
state {:edge edge
912+
:column-path column-path
913+
:row-path row-path
914+
:value value}
915+
props (merge {:cell cell
916+
:theme (update theme :user-variables
917+
conj (theme/with-state state))}
900918
(when cell-value
901-
{:cell-value cell-value}))]]
919+
{:cell-value cell-value})
920+
state)]]
902921
^{:key [::cell-wrapper (or [column-path row-path] (gensym))]}
903922
[u/part cell-wrapper props :default cell-wrapper-part]))))
904923
zebra-stripes (for [i (filter even? (range 1 (inc (count row-paths))))]
@@ -933,6 +952,7 @@
933952
native-scrollbar-width
934953
showing-row-heights)]
935954
[:div
955+
(themed ::wrapper {})
936956
[:div {:on-mouse-enter #(reset! hover? true)
937957
:on-mouse-leave #(reset! hover? false)
938958
:style

0 commit comments

Comments
 (0)