Skip to content

Commit a439920

Browse files
kimo-kkimo-k
committed
[nested-grid] Support :align- keys in column specs
1 parent 67b1b9c commit a439920

File tree

4 files changed

+249
-147
lines changed

4 files changed

+249
-147
lines changed

‎src/re_com/nested_grid.cljs‎

Lines changed: 114 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -404,67 +404,49 @@
404404
(defn cell-part [{:keys [column-path row-path]}]
405405
nil)
406406

407-
(defn cell-wrapper-part [{:keys [column-path row-path cell theme cell-value edge]
407+
(defn cell-wrapper-part [{:keys [column-path row-path cell theme cell-value value]
408408
: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]]))
409+
[:div
410+
(-> {:style {:grid-column (path->grid-line-name column-path)
411+
:grid-row (path->grid-line-name row-path)}}
412+
(theme/apply {:part ::cell-wrapper} theme))
413+
[u/part cell (dissoc props :cell) :default cell-part]])
417414

418415
(defn header-label [{:keys [path]}]
419416
(let [header (last path)]
420417
(str (or (:label header)
421418
(:id header)
422419
header))))
423420

424-
(defn column-header-part [{:keys [column-path]}]
425-
(header-label {:path column-path}))
421+
(defn column-header-part [{:keys [path]}]
422+
(header-label {:path path}))
426423

427424
(theme/apply {} {:part ::column-header-wrapper} [])
428425

429426
(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})])])
427+
[{:keys [theme children]}]
428+
(into [:div (theme/apply {} {:part ::column-header-wrapper} theme)]
429+
children))
448430

449431
(defn row-header-part [{:keys [row-path]}]
450432
(header-label {:path row-path}))
451433

452434
(defn row-header-wrapper-part
453435
[{:keys [row-path row-paths row-header theme show? edge resize-rows?]
454436
: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)
437+
[:div (theme/apply {:style {:grid-row-start (path->grid-line-name row-path)
438+
:grid-row-end (str "span " (cond-> row-path
439+
:do (header-cross-span row-paths)
440+
(not show?) dec))
441+
:grid-column-start (count row-path)
442+
:grid-column-end (str "span " (cond-> row-path
443+
:do (header-main-span row-paths)
444+
(not show?) dec))
445+
:position "relative"}}
446+
{:state {:edge edge} :part ::row-header-wrapper}
447+
theme)
448+
449+
[:div
468450
[u/part row-header props :default row-header-part]]
469451
(when (and resize-rows? show?)
470452
[resize-button (merge props {:dimension :row
@@ -624,31 +606,37 @@
624606
(header-prop path :height :row row-height))
625607
(+ y-distance)
626608
(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))
609+
resize-handler (r/atom #())]
610+
(fn [& {:as passed-in-props}]
611+
(let [{:as props
612+
:keys [column-tree row-tree
613+
cell cell-value column-header row-header header-spacer
614+
cell-wrapper column-header-wrapper row-header-wrapper header-spacer-wrapper
615+
show-branch-paths?
616+
max-height max-width
617+
column-width column-header-height row-header-width row-height
618+
show-export-button? on-export
619+
on-export-cell on-export-column-header on-export-row-header
620+
show-zebra-stripes?
621+
show-selection-box? resize-columns? resize-rows?]
622+
:or {column-header-height 25
623+
column-width 55
624+
row-header-width 80
625+
row-height 25
626+
show-export-button? true
627+
show-branch-paths? false
628+
show-selection-box? false
629+
show-zebra-stripes? true
630+
on-export-column-header header-label
631+
on-export-row-header header-label
632+
resize-columns? true
633+
resize-rows? false}}
634+
(theme/top-level-part passed-in-props ::nested-grid)
635+
theme (theme/defaults
636+
props
637+
{:user [(theme/<-props props {:part ::wrapper
638+
:include [:style :class]})]})
639+
themed (fn [part props] (theme/apply props {:part part} theme))
652640
column-paths (spec->headers* column-tree)
653641
column-leaf-paths (leaf-paths column-paths)
654642
leaf-column? (set column-leaf-paths)
@@ -825,28 +813,47 @@
825813
:grid-template-rows (grid-template cell-grid-rows)}})]
826814
column-header-cells (doall
827815
(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))}]]
816+
:let [edge (cond-> #{}
817+
(start-branch? path column-paths) (conj :left)
818+
(end-branch? path column-paths) (conj :right)
819+
(root-level? path column-paths) (conj :top)
820+
(leaf-level? path column-paths) (conj :bottom)
821+
(section-left? path) (conj :column-section-left)
822+
(section-right? path) (conj :column-section-right))
823+
show? (show? path :column)
824+
state {:edge edge
825+
:column-path path
826+
:path path
827+
:header-spec (last path)
828+
:show? show?}
829+
props (merge {:theme (update theme :user-variables
830+
conj (theme/with-state state))
831+
:selection? selection?
832+
:edge edge}
833+
state)]]
848834
^{:key [::column (or path (gensym))]}
849-
[u/part column-header-wrapper props :default column-header-wrapper-part]))
835+
[:div {:style {:grid-column-start (path->grid-line-name path)
836+
:grid-column-end (str "span " (cond-> path
837+
:do (header-cross-span column-paths)
838+
(not show?) dec))
839+
:grid-row-start (count path)
840+
:grid-row-end (str "span " (cond-> path
841+
:do (header-main-span column-paths)
842+
(not show?) dec))
843+
:position "relative"}}
844+
[u/part column-header-wrapper
845+
(merge props {:children [[u/part column-header props :default column-header-part]]})
846+
:default column-header-wrapper-part]
847+
(when (and resize-columns? show?)
848+
[resize-button (merge props {:mouse-down-x mouse-down-x
849+
:last-mouse-x last-mouse-x
850+
:mouse-x mouse-x
851+
:resize-handler resize-handler
852+
:resize-columns? resize-columns?
853+
:on-resize resize-column!
854+
:drag drag
855+
:dimension :column
856+
:path path})])]))
850857
row-header-cells (doall
851858
(for [path row-paths
852859
:let [props {:row-path path
@@ -886,19 +893,25 @@
886893
(for [row-path showing-row-paths]
887894
(doall
888895
(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))}
896+
:let [edge (cond-> #{}
897+
(= column-path (first showing-column-paths)) (conj :left)
898+
(= column-path (last showing-column-paths)) (conj :right)
899+
(= row-path (first showing-row-paths)) (conj :top)
900+
(= row-path (last showing-row-paths)) (conj :bottom)
901+
(cell-section-left? column-path) (conj :column-section-left)
902+
(cell-section-right? column-path) (conj :column-section-right))
903+
value (when cell-value (cell-value {:column-path column-path
904+
:row-path row-path}))
905+
state {:edge edge
906+
:column-path column-path
907+
:row-path row-path
908+
:value value}
909+
props (merge {:cell cell
910+
:theme (update theme :user-variables
911+
conj (theme/with-state state))}
900912
(when cell-value
901-
{:cell-value cell-value}))]]
913+
{:cell-value cell-value})
914+
state)]]
902915
^{:key [::cell-wrapper (or [column-path row-path] (gensym))]}
903916
[u/part cell-wrapper props :default cell-wrapper-part]))))
904917
zebra-stripes (for [i (filter even? (range 1 (inc (count row-paths))))]
@@ -933,6 +946,7 @@
933946
native-scrollbar-width
934947
showing-row-heights)]
935948
[:div
949+
(themed ::wrapper {})
936950
[:div {:on-mouse-enter #(reset! hover? true)
937951
:on-mouse-leave #(reset! hover? false)
938952
:style

‎src/re_com/theme.cljs‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,24 @@
4040
(defn apply
4141
([props ctx themes]
4242
(->>
43-
(if-not (map? themes)
44-
(update @registry :user conj themes)
45-
(merge @registry themes))
43+
(cond
44+
(map? themes) (re-com.theme/merge @registry themes)
45+
:else (update @registry :user conj themes))
4646
named->vec
4747
flatten
4848
(remove nil?)
4949
(reduce rf [props ctx])
5050
first
5151
(#(dissoc % :re-com/system)))))
5252

53+
(defn with-ctx [new-ctx]
54+
(fn with-ctx [props ctx]
55+
[props (clojure.core/merge ctx new-ctx)]))
56+
57+
(defn with-state [new-state]
58+
(fn with-state [props ctx]
59+
[props (update ctx :state clojure.core/merge new-state)]))
60+
5361
(defn props [ctx themes]
5462
(apply {} ctx themes))
5563

@@ -77,6 +85,11 @@
7785
(update :attr clojure.core/merge
7886
(select-keys outer-props outer-attr-keys)))))))
7987

88+
(defn top-level-part [{:keys [theme] :as props} part]
89+
(cond-> props
90+
theme (re-com.theme/apply {:part part} theme)
91+
theme (merge props)))
92+
8093
(defn add-parts-path [path]
8194
(fn parts-pather [props {:keys [part] :as ctx}]
8295
[(update props :theme conj (add-parts-path (conj path part)))

0 commit comments

Comments
 (0)