Skip to content

Commit

Permalink
[wip]
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Dec 12, 2024
1 parent 1c21ca9 commit 1b253ba
Show file tree
Hide file tree
Showing 10 changed files with 251 additions and 307 deletions.
28 changes: 28 additions & 0 deletions run/resources/public/assets/css/re-com.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1543,3 +1543,31 @@ code {
.rc-typeahead-suggestion.active {
background-color: #ddd;
}

.rc-nested-v-grid-cell-grid div {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12;
background-color: white;
color: #777;
padding-top: 3px;
padding-right: 3px;
padding-left: 3px;
text-align: right;
border-right: thin solid #ccc;
border-bottom: thin solid #ccc;
}

.rc-nested-v-grid-row-header-grid div {
overflow: hidden;
text-overflow: ellipsis;
font-size: 12;
background-color: white;
color: #777;
padding-top: 3px;
padding-right: 3px;
padding-left: 3px;
text-align: right;
border-top: thin solid #ccc;
border-left: thin solid #ccc;
}
136 changes: 70 additions & 66 deletions src/re_com/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
[re-com.config :as config :refer [include-args-desc?]]
[re-com.validate :refer [vector-atom? ifn-or-nil? map-atom? parts? part?]]
[re-com.theme :as theme]
[re-com.nested-grid.theme]
[re-com.box :as box]
[re-com.buttons :as buttons]))

Expand Down Expand Up @@ -1250,75 +1251,78 @@
(reset! internal-row-tree (u/deref-or-value row-tree))
(reset! internal-column-tree (u/deref-or-value column-tree)))
:reagent-render
(fn [{:keys [row-tree column-tree
cell
row-header-cell column-header-cell]
:as props}]
(fn [{:keys [row-tree column-tree
cell-value
theme-cells?]
{::keys [cell row-header-cell column-header-cell
row-header-grid column-header-grid
cell-grid]
:as parts} :parts
:as props}]
(u/deref-or-value row-tree)
(u/deref-or-value row-header-widths)
(u/deref-or-value column-header-heights)
(u/deref-or-value column-tree)
(let [theme (theme/defaults
props
{:user [(theme/<-props props {:part ::wrapper
:include [:style :class]})]})
themed (fn [part props] (theme/apply props {:part part} theme))
spacer-container [:div {:style {:position :sticky
:grid-row-start 1
:grid-column-start 1
:left 0
:top 0
:background-color :white}}]
row-header-container [:div {:style {:display :grid
:grid-template-rows @row-template
:grid-template-columns @row-header-template
:position :sticky
:left 0}}]
row-header-cells (for [row-path @row-windowed-paths
:let [props (themed ::row-header-wrapper
{:style {:grid-row-start (ngu/path->grid-line-name row-path)
:grid-row-end (str "span " (get @row-spans row-path))
:grid-column-start (count row-path)
:grid-column-end (str "span " (inc (- @row-depth (count row-path))))
:font-size 8}
:edge #{:start}})]]
(u/part row-header-cell props {:key row-path
:default ngp/row-header-wrapper}))
column-header-container [:div {:style {:display :grid
:grid-template-rows @column-header-template
:grid-template-columns @column-template
:position :sticky
:top 0}}]
column-header-cells (for [column-path @column-windowed-paths
:let [props (themed ::column-header-wrapper
{:style {:grid-column-start (ngu/path->grid-line-name column-path)
:grid-column-end (str "span " (get @column-spans column-path))
:grid-row-start (count column-path)
:grid-row-end (str "span " (inc (- @column-depth (count column-path))))
:overflow :hidden
:font-size 8}
:children [(pr-str column-path)]})]]
(u/part column-header-cell props {:key column-path}))
main-container [:div
(themed ::wrapper
{:style {:grid-template-rows (ngu/grid-template [@column-header-height-total @row-height-total])
:grid-template-columns (ngu/grid-template [@row-header-width-total @column-width-total])}
:ref wrapper-ref!})]
cell-grid-container [:div (themed ::cell-grid
{:style {:display :grid
:grid-column-start 2
:grid-row-start 2
:grid-template-rows @row-template
:grid-template-columns @column-template}})]
cells (for [row-path @row-windowed-leaf-paths
column-path @column-windowed-leaf-paths
:let [props {:row-path row-path
:column-path column-path}]]
(u/part cell props {:key [row-path column-path]
:default ngp/cell}))]
(let [theme (theme/defaults
props
{:user [(theme/<-props props {:part ::wrapper
:include [:style :class]})]})
themed (fn [part props] (theme/apply props {:part part} theme))
spacer-container [:div {:style {:position :sticky
:grid-row-start 1
:grid-column-start 1
:left 0
:top 0
:background-color :white}}]
row-header-cells (for [row-path @row-windowed-paths
:let [props (themed ::row-header
{:style {:grid-row-start (ngu/path->grid-line-name row-path)
:grid-row-end (str "span " (get @row-spans row-path))
:grid-column-start (count row-path)
:grid-column-end (str "span " (inc (- @row-depth (count row-path))))}
:children [(pr-str row-path)]})]]
(u/part row-header-cell props {:key row-path}))
column-header-cells (for [column-path @column-windowed-paths
:let [props (themed ::column-header
{:style {:grid-column-start (ngu/path->grid-line-name column-path)
:grid-column-end (str "span " (get @column-spans column-path))
:grid-row-start (count column-path)
:grid-row-end (str "span " (inc (- @column-depth (count column-path))))
:overflow :hidden}
:children [(pr-str column-path)]})]]
(u/part column-header-cell props {:key column-path}))
main-container [:div
(themed ::wrapper
{:style {:grid-template-rows (ngu/grid-template [@column-header-height-total @row-height-total])
:grid-template-columns (ngu/grid-template [@row-header-width-total @column-width-total])}
:ref wrapper-ref!})]
cells (for [row-path @row-windowed-leaf-paths
column-path @column-windowed-leaf-paths
:let [props {:row-path row-path
:column-path column-path}
props (cond-> props
cell-value (assoc :cell-value
(cell-value props))
theme-cells? (->> (themed ::cell-wrapper)))]]
(u/part cell props {:key [row-path column-path]
:default ngp/cell-wrapper}))]
(conj main-container
(into cell-grid-container cells)
(into column-header-container column-header-cells)
(into row-header-container row-header-cells)
(u/part cell-grid
(themed ::cell-grid
{:children cells
:style {:display :grid
:grid-column-start 2
:grid-row-start 2
:grid-template-rows @row-template
:grid-template-columns @column-template}}))
(u/part column-header-grid
(themed ::column-header-grid
{:children column-header-cells
:style {:grid-template-rows @column-header-template
:grid-template-columns @column-template}}))
(u/part row-header-grid
(themed ::row-header-grid
{:children row-header-cells
:style {:grid-template-rows @row-template
:grid-template-columns @row-header-template}}))
spacer-container)))})))

14 changes: 5 additions & 9 deletions src/re_com/nested_grid/parts.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,9 @@
(:require [re-com.nested-grid.util :as ngu]
[re-com.nested-grid :as-alias ng]))

(defn cell [{:keys [row-path column-path]}]
[:div {:style {:border "thin solid grey"
:grid-row-start (ngu/path->grid-line-name row-path)
:grid-column-start (ngu/path->grid-line-name column-path)
:font-size 6}}
(defn cell-wrapper [{:keys [style class row-path column-path]}]
[:div {:style (merge {:grid-row-start (ngu/path->grid-line-name row-path)
:grid-column-start (ngu/path->grid-line-name column-path)}
style)
:class class}
(str (gensym))])

(defn row-header-wrapper [{:keys [style]}]
[:div {:style (merge style {:font-size 6})}
(gensym)])
117 changes: 117 additions & 0 deletions src/re_com/nested_grid/theme.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
(ns re-com.nested-grid.theme
(:require
[re-com.theme.default :as default :refer [base main style]]
[re-com.theme.util :refer [merge-props merge-class]]
[re-com.nested-grid :as-alias ng]))

(defmethod base ::ng/wrapper [props _]
(style props {:height 300
:width 500
:overflow :auto
:flex "0 0 auto"
:display :grid}))

(defmethod base ::ng/cell-grid
[props _]
(default/class props "rc-nested-v-grid-cell-grid"))

(defmethod main ::ng/cell-grid
[props _]
(style props {:border-top "thin solid #ccc"
:border-left "thin solid #ccc"}))

(defmethod base ::ng/column-header-grid
[props _]
(-> props
(default/class "rc-nested-v-grid-row-header-grid")
(style {:display :grid
:position :sticky
:top 0})))

(defmethod base ::ng/row-header-grid
[props _]
(-> props
(default/class "rc-nested-v-grid-row-header-grid")
(style {:display :grid
:position :sticky
:left 0})))

(defmethod base ::ng/column-header
[props _]
(update props :style merge
{:user-select "none"
:width "100%"
:height "100%"}))

(def row-header-main
(let [{:keys [sm-3 sm-6]} default/golden-section-50
{:keys [border light-background]} default/colors]
{:padding-top sm-3
:padding-right sm-3
:padding-left sm-6
:background-color light-background
:color "#666"
:text-align "left"
:font-size "13px"
:white-space "nowrap"}))

(defmethod main ::ng/row-header
[props {{:keys [edge]} :state}]
(style props row-header-main
#_(when (contains? edge :right)
{:border-right "thin solid #aaa"})
#_(when (contains? edge :left)
{:border-left "thin solid #aaa"})
#_(when (contains? edge :bottom)
{:border-bottom "thin solid #aaa"})))

(def column-header-main
(let [{:keys [sm-3 sm-4]} default/golden-section-50
{:keys [border light-background]} default/colors]
{:padding-top sm-3
:padding-right sm-4
:padding-left sm-4
:background-color light-background
:color "#666"
:font-size "13px"
:border-left "thin solid #ccc"
:border-top "thin solid #ccc"}))

(defmethod main ::ng/column-header
[props {:keys [state]}]
(let [{:keys [align-column align-column-header align]} (:header-spec state)]
(style props column-header-main
{:text-align (or align-column-header align-column align :center)})))

(def cell-wrapper-main
(let [{:keys [sm-3]} default/golden-section-50]
{:font-size 12
:background-color "white"
:color "#777"
:padding-top sm-3
:padding-right sm-3
:padding-left sm-3
:text-align :right
:border-right "thin solid #ccc"
:border-bottom "thin solid #ccc"}))

(defmethod main ::ng/cell-wrapper
[props {{:keys [edge value column-path]} :state}]
(let [align (some :align column-path)]
(update props :style merge
cell-wrapper-main
#_#_(cond align
{:text-align align}
(string? value)
{:text-align :left})
(when (seq edge)
{:border-right (cond
(contains? edge :column-section-right)
"thin solid #aaa"
(contains? edge :right)
"thin solid #aaa"
:else
"thin solid #ccc")
:border-bottom (if (contains? edge :bottom)
"thin solid #aaa"
"thin solid #ccc")}))))
3 changes: 2 additions & 1 deletion src/re_com/nested_grid/util.cljc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,8 @@
(repeatedly 10000 #(do [(keyword (gensym))
[:x 20]
[:y 40]
[:z 20]])))]))
[:z 20]
[:h 10]])))]))

#_(walk-size {:window-start 372
:window-end 472
Expand Down
2 changes: 2 additions & 0 deletions src/re_com/theme.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@

(def merge-props tu/merge-props)

(def merge-class tu/merge-class)

(defn merge [a {:re-com/keys [system] :keys [base main user main-variables user-variables base-variables] :as b}]
(cond-> a
base-variables (assoc :base-variables base-variables)
Expand Down
Loading

0 comments on commit 1b253ba

Please sign in to comment.