[wip]

day8 · Sep 10, 2024 · fb71995 · fb71995
1 parent 15c3560
commit fb71995
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/src/re_com/nested_grid.cljs b/src/re_com/nested_grid.cljs
@@ -1012,15 +1012,16 @@
                                           native-scrollbar-width
                                           showing-row-heights)]
         [:div
-         (themed ::wrapper {})
+         {}
          [:div {:on-mouse-enter #(reset! hover? true)
                 :on-mouse-leave #(reset! hover? false)
                 :style
                 {:max-width             max-width
                  :overflow              :hidden
                  :display               "grid"
                  :grid-template-columns (grid-template [(px (apply + max-row-widths))
-                                                        (if-not max-width
+                                                       (if max-width (px max-width) "minmax(100px, auto)")
+                                                        #_(if-not max-width
                                                           (str "minmax(0, " (+ 2 native-width) "px)")
                                                           (px (cond-> native-width
                                                                 max-width
@@ -1030,9 +1031,8 @@
                                                                                "px"
                                                                                ""))))))])
                  :grid-template-rows    (grid-template (into (if show-export-button? ["25px"] ["0px"])
-                                                             [showing-column-widths
-                                                              (px (apply + max-column-heights))
-                                                              (px (+ native-height 4))]))}}
+                                                             [(px (apply + max-column-heights))
+                                                              "minmax(40px, 100%)"]))}}
           [:div]
           control-panel
           (into [:div (themed ::header-spacer-grid-container
@@ -1080,3 +1080,25 @@
                             :last-mouse-x last-mouse-x
                             :last-mouse-y last-mouse-y
                             :on-resize    resize-handler}])]))))
+
+(defn test-grid []
+  (let [scroll-top  (r/atom 0)
+        scroll-left (r/atom 0)]
+    (fn []
+      [:div {:style {:height :fit-content
+                     :grid-template-columns "100px minmax(40px, 100vw)"
+                     :grid-template-rows    "100px minmax(40px, 100%) 10px"
+                     :display               :grid
+                     :gap                   10}}
+       [:div {:style {:background "green"}}]
+       [:div {:style {:background "yellow"}}]
+       [scroll-container {:scroll-top scroll-top}
+        (into [:div {:style {:background "blue"}}]              ["a" "b" "c"])]
+       (into [:div {:on-scroll #(do (reset! scroll-top (.-scrollTop (.-target %)))
+                                    (reset! scroll-left (.-scrollLeft (.-target %))))
+                    :style     {:display               :grid
+                                :grid-template-columns "repeat(20, 60px)"
+                                :grid-template-rows    "repeat(10, 40px) 10px"
+                                :overflow              :auto}}]
+             ["a" "b" "c"])
+       [:div {:style {:background "purple"}}]])))
diff --git a/src/re_demo/core.cljs b/src/re_demo/core.cljs
@@ -10,7 +10,7 @@
             [secretary.core                :as    secretary]
             [re-com.core                   :as rc :refer [at h-box v-box box gap line scroller border label p title alert-box h-split] :refer-macros [handler-fn]]
             [re-com.config                 :refer [version]]
-            [re-com.util                   :refer [get-element-by-id item-for-id]]
+            [re-com.util                   :refer [get-element-by-id item-for-id deref-or-value]]
             [re-demo.utils                 :refer [panel-title scroll-to-top]]
             [re-demo.debug                 :as    debug]
             [re-demo.config                :as    config]
@@ -261,9 +261,33 @@
                                            :padding "0px 0px 0px 50px"
                                            :child   [(:panel (item-for-id @selected-tab-id tabs-definition))]]]]]])))    ;; the tab panel to show, for the selected tab
 
+(def content (mapv #(do [:div {:style {:border "thin solid white"}} %]) (repeat 200 "Lorem Ipsum ")))
+
+(defn test-main []
+  [rc/v-box
+   :max-height "100%"
+   :max-width "500px"
+   :children
+   [[re-com.nested-grid/test-grid]
+    [:div {:style {:height 50 :width 200 :background "orange"}}]
+    #_[rc/p {:style {:margin-left 100}}
+     "Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph.
+Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph.
+Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph.
+Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. Sample Paragraph. "]
+    #_#_[rc/nested-grid]
+    [rc/nested-grid
+     :column-tree [2 4 6 8 10 12 14 16 18 20]
+     :column-width 100
+     :row-height 100
+       :row-tree    [1 3 5 7 9 11 13 15 17 19]
+       :cell (fn [{:keys [column-path row-path edge]}]
+               (* (last column-path) (last row-path)))]
+    #_[:div "ABCDEFG LOREM"]]])
+
 (defn ^:dev/after-load mount-root
   []
-  (rdom/render [main] (get-element-by-id "app")))
+  (rdom/render [test-main] (get-element-by-id "app")))
 
 (defn ^:export mount-demo
   []