/
core.cljs
61 lines (52 loc) · 2.01 KB
/
core.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
(ns reagent-infinite-scroll.core
(:require
[reagent.core :as reagent :refer [atom]]
[reagent-infinte-scroll.scroll :as scroll]))
;; -------------------------
;; Views
(def page-size 10)
(def db
(atom {:items (map inc (range page-size))}))
(defn items-list [items]
[:ul {:style {:list-style-type :none}}
(for [item items]
^{:key item}
[:li {:style {:height "100px" :width "400px"
:border "1px solid gray"}}
[:div "Item number " item]])])
(defn home-page []
(fn []
(let [items (:items @db)
loading? (:loading? @db)
more-items-available? (< (count items) 40)]
[:div
[:h2 "Welcome to reagent-infinite-scroll example"]
[:p "This is an example page for the infinite-scroll code from "
[:a {:href "https://gist.github.com/nberger/b5e316a43ffc3b7d5e084b228bd83899"}
"this gist"]]
[items-list items]
[:div
(cond
loading?
"Loading more..."
more-items-available?
"Scroll to here!"
:else
"No more items!!")]
[scroll/infinite-scroll {:can-show-more? more-items-available?
:load-fn (fn []
(swap! db assoc :loading? true)
(js/setTimeout
(fn []
(swap! db assoc :loading? false)
(swap! db update :items
(fn [items]
(concat items (range (inc (last items))
(+ (last items) (inc page-size)))))))
1000))}]])))
;; -------------------------
;; Initialize app
(defn mount-root []
(reagent/render [home-page] (.getElementById js/document "app")))
(defn init! []
(mount-root))