notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uses context, better loading experience

Browse Source
This commit is contained in:
Bryce Covert
2020-08-02 21:13:49 -07:00
parent 1503d6c036
commit 45ff1deed6
4 changed files with 183 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/cljs/auto_ap/views/components/grid.cljs
View File

@@ -1,5 +1,11 @@
(ns auto-ap.views.components.grid
(:require [reagent.core :as r]))
(:require [reagent.core :as r]
[auto-ap.views.utils :refer [appearing]]
[react :as react]))
(defonce grid-context (react/createContext "default"))
(def Provider (.-Provider grid-context))
(def Consumer (.-Consumer grid-context))
(defn toggle-sort-by [params sort-key sort-name]
(let [[found? sort] (reduce
@@ -94,61 +100,105 @@
[:a.tag.is-medium.is-delete {:on-click (fn []
(on-change {:sort (filter #(not= sort-key (:sort-key %)) sort)}))}]]])])
(defn grid [{:keys [on-params-change params status column-count]}]
{:grid-container (fn grid-container [{:keys [start end count total]}]
(into [:div
[:div.level
[:div.level-left
[:div.level-item
[paginator {:start start :end end :count count :total total
:on-change on-params-change}]]
[:div.level-item
[sort-by-list {:sort (:sort @params)
:on-change on-params-change}]]]]]
(r/children (r/current-component))))
:table (fn table []
(r/create-class {:reagent-render
(fn [{:keys [fullwidth]}]
(into
[:table.table.compact {:class (if fullwidth
["is-fullwidth"])}]
(r/children (r/current-component))))}))
:table-header (fn table-head []
(r/create-class {:reagent-render
(fn [{:keys []}]
(into
[:thead]
(r/children (r/current-component))))}))
:table-header-cell (fn table-header-cell [{:keys [style class]}]
(into [:th {:style style
:class class}]
(r/children (r/current-component))))
(defn controls [{:keys [start end count total] :as para}]
(let [children (r/children (r/current-component))]
[:> Consumer {}
(fn [consume]
(let [{:strs [on-params-change params] :as consume} (js->clj consume)]
(r/as-element (into
[:div
[:div.level
[:div.level-left
[:div.level-item
[paginator {:start start :end end :count count :total total
:on-change on-params-change}]]
[:div.level-item
[sort-by-list {:sort (:sort params)
:on-change on-params-change}]]]]]
children))))]))
:table-row (fn table-row [{:keys [class]}]
(into [:tr {:class class}]
(r/children (r/current-component))))
:table-cell (fn table-cell [params]
(into [:td params]
(r/children (r/current-component))))
:table-body (fn table-body []
(if (:loading @status)
[:tbody
[:tr
[:td {:col-span column-count}
[:div.container
[:div.columns.is-centered
[:div.column.is-narrow
[:div.loader.is-loading.is-active.is-table-loader.is-centered]]]]]
]]
(into [:tbody]
(r/children (r/current-component)))))
:table-sortable-header-cell (fn table-sortable-header-cell [{:keys [style class sort-key sort-name asc]}]
(conj (into
[:th {:on-click (fn [e]
(on-params-change
(toggle-sort-by {:sort (:sort @params)} sort-key sort-name)))
:style (assoc style
:cursor "pointer")
:class class}]
(r/children (r/current-component)))
(sort-icon sort-key (:sort @params))))})
(defn table []
(r/create-class {:reagent-render
(fn [{:keys [fullwidth]}]
(into
[:table.table.compact {:class (if fullwidth
["is-fullwidth"])}]
(r/children (r/current-component))))}))
(defn header []
(into
[:thead]
(r/children (r/current-component))))
(defn header-cell [{:keys [style class]}]
(into [:th {:style style
:class class}]
(r/children (r/current-component))))
(defn row [{:keys [class]}]
(into [:tr {:class class}]
(r/children (r/current-component))))
(defn cell [params]
[:td params
[appearing {:visible? true
:timeout 1000
:enter-class "appear"
:exit-class "disappear"}
(into [:span]
(r/children (r/current-component)))]])
(defn body []
(let [children (r/children (r/current-component))]
[:> Consumer {}
(fn [consume]
(let [{:strs [column-count status]} (js->clj consume)]
(r/as-element
(if (:loading status)
[:tbody
(for [i (range 40)]
^{:key i}
[:tr
(for [x (range column-count)]
^{:key x}
[:td #_{:col-span column-count}
[appearing {:visible? true
:timeout 1000
:enter-class "appear"
:exit-class "disappear"}
[:div.test
[:div.ph-item
[:div.ph-row
[:div.ph-col-12.big]]]]]])
])]
(into [:tbody]
children)))))]))
(defn sortable-header-cell [{:keys [style class sort-key sort-name asc]}]
(let [children (r/children (r/current-component))]
[:> Consumer {}
(fn [consume]
(let [{:strs [on-params-change params] :as consume} (js->clj consume)]
(r/as-element (conj (into
[:th {:on-click (fn [e]
(on-params-change
(toggle-sort-by {:sort (:sort params)} sort-key sort-name)))
:style (assoc style
:cursor "pointer")
:class class}]
children)
(sort-icon sort-key (:sort params))))))]))
(defn grid [{:keys [on-params-change params status column-count]}]
(r/create-element Provider
#js {:value #js {:on-params-change on-params-change
:params params
:status status
:column-count column-count}}
(r/as-element
(into
[:<> ]
(r/children (r/current-component))))))