Skip to content

Commit 696d3c5

Browse files
kimo-kkimo-k
committed
[nested-v-grid] Add more :resize props
1 parent 2ac45d5 commit 696d3c5

File tree

1 file changed

+94
-54
lines changed

1 file changed

+94
-54
lines changed

‎src/re_com/nested_v_grid.cljs

+94-54
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,16 @@
275275
"To style these parts, we recommend using css to target the descendents of container parts, such as "
276276
[:code ":row-header-grid"] ". This is currently done in " [:code "re-com.css"]]}
277277

278+
{:name :resize?
279+
:type "boolean"
280+
:default "true"
281+
:validate-fn boolean?
282+
:description
283+
[:span "When " [:code "true"]
284+
", display draggable resize buttons across all row & column boundaries. "
285+
"This can be overridden by the other " [:code ":resize-*?"] " props. "
286+
"NOTE: For a row or column to be resizable along its main axis, its spec must be a map."]}
287+
278288
{:name :resize-row-height?
279289
:type "boolean"
280290
:default "true"
@@ -292,6 +302,24 @@
292302
[:span "When " [:code "true"]
293303
", display draggable resize buttons across the cross-axis dimension of column headers."]}
294304

305+
{:name :resize-row-header-height?
306+
:type "boolean"
307+
:default "true"
308+
:validate-fn boolean?
309+
:description
310+
[:span "When " [:code "true"]
311+
", display draggable resize buttons across the main-axis dimension of rows. "
312+
"NOTE: For a row to be resizable, its row-spec must be a map."]}
313+
314+
{:name :resize-column-width?
315+
:type "boolean"
316+
:default "true"
317+
:validate-fn boolean?
318+
:description
319+
[:span "When " [:code "true"]
320+
", display draggable resize buttons across the cross-axis dimension of columns."
321+
"NOTE: For a column to be resizable, its column-spec must be a map."]}
322+
295323
{:name :on-resize
296324
:type "fn"
297325
:default "internal fn"
@@ -519,13 +547,18 @@
519547
(reset! internal-prop external-value))))
520548
:reagent-render
521549
(fn [{:keys
522-
[theme-cells? on-resize show-root-headers? style class resize-row-height?
523-
resize-column-header-height?]
550+
[theme-cells? show-root-headers? style class
551+
on-resize
552+
resize? resize-row-height? resize-row-header-width?
553+
resize-column-width? resize-column-header-height?]
524554
:as props
525555
:or
526556
{show-root-headers? true
527557
resize-row-height? true
558+
resize-row-header-width? true
559+
resize-column-width? true
528560
resize-column-header-height? true
561+
resize? true
529562
on-resize (fn [{:keys [header-dimension size-dimension keypath size]}]
530563
(case [header-dimension size-dimension]
531564
[:column :height] (swap! internal-column-header-heights safe-assoc (first keypath) size)
@@ -616,44 +649,44 @@
616649
:dimension :column-width}]))
617650

618651
row-headers
619-
(for [i (range (count @row-paths))
620-
:let [row-path (get @row-paths i)
621-
path-ct (count row-path)
622-
end-keypath (->> @row-paths
623-
(drop (inc i))
624-
(take-while #(> (count %) path-ct))
625-
count
626-
(+ i 1)
627-
(#(get @row-keypaths %)))
628-
{:keys [branch-end? leaf?]} (meta row-path)
629-
row-path-prop (cond-> row-path (not show-root-headers?) (subvec 1))
630-
cross-size (get @safe-row-header-widths
631-
(cond-> (dec path-ct) (not show-root-headers?) dec))
632-
size (get @row-sizes i)
633-
keypath (get @row-keypaths i)]
652+
(for [i (range (count @row-paths))
653+
:let [row-path (get @row-paths i)
654+
path-ct (count row-path)
655+
end-keypath (->> @row-paths
656+
(drop (inc i))
657+
(take-while #(> (count %) path-ct))
658+
count
659+
(+ i 1)
660+
(#(get @row-keypaths %)))
661+
{:keys [branch-end? leaf?]} (meta row-path)
662+
row-path-prop (cond-> row-path (not show-root-headers?) (subvec 1))
663+
cross-size (get @safe-row-header-widths
664+
(cond-> (dec path-ct) (not show-root-headers?) dec))
665+
size (get @row-sizes i)
666+
keypath (get @row-keypaths i)]
634667
:when (or show-root-headers? (pos? i))
635-
:let [props {:part ::row-header
636-
:row-path row-path-prop
637-
:path row-path-prop
638-
:keypath keypath
639-
:branch-end? branch-end?
640-
:style {:grid-row-start (ngu/keypath->grid-line-name keypath)
641-
:cross-size cross-size
642-
:grid-row-end (if branch-end? "span 1"
643-
(ngu/keypath->grid-line-name end-keypath))
644-
:grid-column-start (cond-> (count row-path)
645-
branch-end? dec
646-
(not show-root-headers?) dec)
647-
:grid-column-end -1}}
648-
props (assoc props :children [(part ::row-header-label
649-
{:props (assoc props
650-
:style (merge {:height (- size 5)}
651-
(when-not leaf?
652-
{:position :sticky
653-
:top @column-header-height-total})
654-
(when-not branch-end?
655-
{:width (- cross-size 10)})))
656-
:impl ngp/row-header-label})])]]
668+
:let [props {:part ::row-header
669+
:row-path row-path-prop
670+
:path row-path-prop
671+
:keypath keypath
672+
:branch-end? branch-end?
673+
:style {:grid-row-start (ngu/keypath->grid-line-name keypath)
674+
:cross-size cross-size
675+
:grid-row-end (if branch-end? "span 1"
676+
(ngu/keypath->grid-line-name end-keypath))
677+
:grid-column-start (cond-> (count row-path)
678+
branch-end? dec
679+
(not show-root-headers?) dec)
680+
:grid-column-end -1}}
681+
props (assoc props :children [(part ::row-header-label
682+
{:props (assoc props
683+
:style (merge {:height (- size 5)}
684+
(when-not leaf?
685+
{:position :sticky
686+
:top @column-header-height-total})
687+
(when-not branch-end?
688+
{:width (- cross-size 10)})))
689+
:impl ngp/row-header-label})])]]
657690
(part ::row-header
658691
{:part ::row-header
659692
:props props
@@ -769,42 +802,49 @@
769802
{:theme theme
770803
:part ::cell-grid
771804
:props {:children (cond-> cells
772-
(not @hide-resizers?)
805+
(and resize? (not @hide-resizers?))
773806
(concat
774807
(when resize-row-height?
775808
(row-height-resizers {:offset -1}))
776-
(column-width-resizers {:style {:grid-row-end -1}
777-
:offset -1})))
809+
(when resize-column-width?
810+
(column-width-resizers {:style {:grid-row-end -1}
811+
:offset -1}))))
778812
:style {:grid-template-rows @row-template
779813
:grid-template-columns @column-template}}})
780814
(part ::column-header-grid
781815
{:theme theme
782816
:part ::column-header-grid
783817
:props {:children (cond-> column-headers
784-
(not @hide-resizers?)
785-
(concat (when resize-column-header-height?
786-
column-height-resizers)
787-
(column-width-resizers {:offset -1})))
818+
(and resize? (not @hide-resizers?))
819+
(concat
820+
(when resize-column-header-height?
821+
column-height-resizers)
822+
(when resize-column-width?
823+
(column-width-resizers {:offset -1}))))
788824
:style {:grid-template-rows @column-cross-template
789825
:grid-template-columns @column-template}}})
790826
(part ::row-header-grid
791827
{:theme theme
792828
:part ::row-header-grid
793829
:props {:children (cond-> row-headers
794-
(not @hide-resizers?)
795-
(concat row-width-resizers
796-
(when resize-row-height?
797-
(row-height-resizers {:offset -1}))))
830+
(and resize? (not @hide-resizers?))
831+
(concat
832+
(when resize-row-header-width?
833+
row-width-resizers)
834+
(when resize-row-height?
835+
(row-height-resizers {:offset -1}))))
798836
:style {:grid-template-rows @row-template
799837
:grid-template-columns @row-cross-template}}})
800838
(part ::corner-header-grid
801839
{:theme theme
802840
:part ::corner-header-grid
803841
:props {:children (cond-> corner-headers
804-
(not @hide-resizers?)
805-
(concat row-width-resizers
806-
(when resize-column-header-height?
807-
column-height-resizers)))
842+
(and resize? (not @hide-resizers?))
843+
(concat
844+
(when resize-row-header-width?
845+
row-width-resizers)
846+
(when resize-column-header-height?
847+
column-height-resizers)))
808848
:style {:grid-template-rows @column-cross-template
809849
:grid-template-columns @row-cross-template}}})
810850
(u/deref-or-value overlay)]}}))))})))

0 commit comments

Comments
 (0)