Remove scroll-div; pass container element ref to on-click handlers
This commit is contained in:
parent
bb71d830a8
commit
dbffabffe0
|
@ -4,7 +4,6 @@
|
|||
[commiteth.common :refer [moment-timestamp
|
||||
items-per-page
|
||||
display-data-page
|
||||
scroll-div
|
||||
issue-url]]))
|
||||
|
||||
|
||||
|
@ -58,7 +57,8 @@
|
|||
[:div.time (moment-timestamp updated)]]]])
|
||||
|
||||
(defn activity-list [{:keys [items item-count page-number total-count]
|
||||
:as activity-page-data}]
|
||||
:as activity-page-data}
|
||||
container-element]
|
||||
(if (empty? (:items activity-page-data))
|
||||
[:div.view-no-data-container
|
||||
[:p "No recent activity yet"]]
|
||||
|
@ -67,7 +67,7 @@
|
|||
right (dec (+ left item-count))]
|
||||
[:div.item-counts-label
|
||||
[:span (str "Showing " left "-" right " of " total-count)]])
|
||||
(display-data-page activity-page-data activity-item)]))
|
||||
(display-data-page activity-page-data activity-item container-element)]))
|
||||
|
||||
(defn activity-page []
|
||||
(let [activity-page-data (rf/subscribe [:activities-page])
|
||||
|
@ -80,6 +80,5 @@
|
|||
[:div.ui.text.loader.view-loading-label "Loading"]]]
|
||||
[:div.ui.container.activity-container
|
||||
{:ref #(reset! container-element %1)}
|
||||
[scroll-div container-element]
|
||||
[:div.activity-header "Activities"]
|
||||
[activity-list @activity-page-data]]))))
|
||||
[activity-list @activity-page-data container-element]]))))
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
[reagent.core :as r]
|
||||
[commiteth.common :refer [moment-timestamp
|
||||
display-data-page
|
||||
scroll-div
|
||||
items-per-page
|
||||
issue-url]]))
|
||||
|
||||
|
@ -47,7 +46,8 @@
|
|||
[:img {:src avatar-url}]]]]))
|
||||
|
||||
(defn bounties-list [{:keys [items item-count page-number total-count]
|
||||
:as bounty-page-data}]
|
||||
:as bounty-page-data}
|
||||
container-element]
|
||||
(if (empty? items)
|
||||
[:div.view-no-data-container
|
||||
[:p "No recent activity yet"]]
|
||||
|
@ -56,7 +56,7 @@
|
|||
right (dec (+ left item-count))]
|
||||
[:div.item-counts-label
|
||||
[:span (str "Showing " left "-" right " of " total-count)]])
|
||||
(display-data-page bounty-page-data bounty-item)]))
|
||||
(display-data-page bounty-page-data bounty-item container-element)]))
|
||||
|
||||
(defn bounties-page []
|
||||
(let [bounty-page-data (rf/subscribe [:open-bounties-page])
|
||||
|
@ -69,7 +69,6 @@
|
|||
[:div.ui.text.loader.view-loading-label "Loading"]]]
|
||||
[:div.ui.container.open-bounties-container
|
||||
{:ref #(reset! container-element %1)}
|
||||
[scroll-div container-element]
|
||||
[:div.open-bounties-header "Bounties"]
|
||||
[bounties-list @bounty-page-data]]))
|
||||
[bounties-list @bounty-page-data container-element]]))
|
||||
))
|
||||
|
|
|
@ -31,22 +31,9 @@
|
|||
(defn issue-url [owner repo number]
|
||||
(str "https://github.com/" owner "/" repo "/issues/" number))
|
||||
|
||||
(defn scroll-div [container-element]
|
||||
"This is an invisible div that exists
|
||||
for the sole purpose of scrolling the container-element into view
|
||||
when page-number is updated"
|
||||
(let [page-number (rf/subscribe [:page-number])]
|
||||
(r/create-class
|
||||
{:component-did-update (fn []
|
||||
(when @container-element
|
||||
(.scrollIntoView @container-element)))
|
||||
:reagent-render (fn []
|
||||
[:div {:style {:display "none"}}
|
||||
@page-number])})))
|
||||
|
||||
(def items-per-page 15)
|
||||
|
||||
(defn draw-page-numbers [page-number page-count]
|
||||
(defn draw-page-numbers [page-number page-count container-element]
|
||||
"Draw page numbers for the pagination component.
|
||||
Inserts ellipsis when list is too long, by default
|
||||
max 6 items are allowed"
|
||||
|
@ -56,7 +43,9 @@
|
|||
(if current?
|
||||
{:class "page-num-active"}
|
||||
{:class "grayed-out-page-num"
|
||||
:on-click #(rf/dispatch [:set-page-number i])})
|
||||
:on-click #(do
|
||||
(rf/dispatch [:set-page-number i])
|
||||
(.scrollIntoView @container-element))})
|
||||
i])
|
||||
max-page-nums 6]
|
||||
[:div.page-nums-container
|
||||
|
@ -92,7 +81,8 @@
|
|||
total-count
|
||||
page-number
|
||||
page-count]}
|
||||
draw-item-fn]
|
||||
draw-item-fn
|
||||
container-element]
|
||||
"Draw data items along with pagination controls"
|
||||
(let [draw-items (fn []
|
||||
(into [:div.ui.items]
|
||||
|
@ -106,11 +96,12 @@
|
|||
(rf/dispatch [:set-page-number
|
||||
(if forward?
|
||||
(inc page-number)
|
||||
(dec page-number))])))
|
||||
(dec page-number))])
|
||||
(.scrollIntoView @container-element)))
|
||||
draw-rect (fn [direction]
|
||||
(let [forward? (= direction :forward)
|
||||
gray-out? (or (and forward? (= page-number page-count))
|
||||
(and (not forward?) (= page-number 1))) ]
|
||||
(and (not forward?) (= page-number 1)))]
|
||||
[:div.rectangle-rounded
|
||||
(cond-> {:on-click (on-direction-click forward?)}
|
||||
gray-out? (assoc :class "grayed-out-direction"))
|
||||
|
@ -127,6 +118,6 @@
|
|||
[draw-rect :backward]
|
||||
[draw-rect :forward]]
|
||||
[:div.page-nav-text [:span (str "Page " page-number " of " page-count)]]
|
||||
[draw-page-numbers page-number page-count]]])))
|
||||
[draw-page-numbers page-number page-count container-element]]])))
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue