status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add scroll threshold to carousel

This commit is contained in:
Adrian Tiberius 2016-05-07 12:58:06 +03:00
parent 4b41ff8507
commit 4eaeb4c477
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/syng_im/components/carousel.cljs
View File

@ -12,7 +12,8 @@
(def defaults {:gap 10 (def defaults {:gap 10
:sneak 10 :sneak 10
:pageWidth (- (page-width) 40)}) :pageWidth (- (page-width) 40)
:scrollThreshold 20})
(defn get-gap [data] (defn get-gap [data]
@ -24,6 +25,9 @@
(defn get-page-width [data] (defn get-page-width [data]
(get data :pageWidth (:pageWidth defaults))) (get data :pageWidth (:pageWidth defaults)))
(defn get-scroll-threshold [data]
(get data :scrollThreshold (:scrollThreshold defaults)))
(defn calculate-gap [component props] (defn calculate-gap [component props]
(let [prop-page-width (get-page-width props) (let [prop-page-width (get-page-width props)
page-width (page-width) page-width (page-width)
@ -41,22 +45,29 @@
:x x}))) :x x})))
(defn get-current-position [event] (defn get-current-position [event]
(+ (.-x (.-contentOffset (.-nativeEvent event))) (quot (page-width) 2))) (.-x (.-contentOffset (.-nativeEvent event))))
(defn on-scroll-end [event component] (defn on-scroll-end [event component starting-position]
(let [props (reagent.core/props component) (let [props (reagent.core/props component)
state (reagent.core/state component) state (reagent.core/state component)
prop-page-width (get-page-width props) prop-page-width (get-page-width props)
sneak (get-sneak props) sneak (get-sneak props)
scroll-threshold (get-scroll-threshold props)
gap (get-gap state) gap (get-gap state)
page-offset (+ prop-page-width gap) page-offset (+ prop-page-width gap)
current-position (get-current-position event) current-position (get-current-position event)
current-page (quot current-position page-offset) direction (if (> current-position (+ starting-position scroll-threshold))
1
(if (< current-position (- starting-position scroll-threshold))
-1
0))
current-page (+ (quot starting-position page-offset) direction)
] ]
(log/debug "on-scroll-end: prop-page-width=" prop-page-width (log/debug "on-scroll-end: prop-page-width=" prop-page-width
"; sneak=" sneak "; gap=" gap "; page-offset=" page-offset "; sneak=" sneak "; gap=" gap "; page-offset=" page-offset
"; starting position=" starting-position
"; current-position=" current-position "; current-position=" current-position
"; current-page=" current-page) "; direction=" direction "; current-page=" current-page)
(scroll-to component (* current-page page-offset) 0) (scroll-to component (* current-page page-offset) 0)
(reagent.core/set-state component {:activePage current-page}) (reagent.core/set-state component {:activePage current-page})
(when (:onPageChange props) (when (:onPageChange props)
@ -109,7 +120,8 @@
child]])) children))) child]])) children)))
(defn reagent-render [data children] (defn reagent-render [data children]
(let [component (reagent.core/current-component) (let [starting-position (atom 0)
component (reagent.core/current-component)
sneak (get-sneak data) sneak (get-sneak data)
gap (get-gap data) gap (get-gap data)
pages (get-pages component data children)] pages (get-pages component data children)]
@ -121,7 +133,10 @@
:bounces false :bounces false
:decelerationRate 0.9 :decelerationRate 0.9
:horizontal true :horizontal true
:onScrollEndDrag (fn [event] (on-scroll-end event component)) :onScrollBeginDrag (fn [event]
(let []
(reset! starting-position (get-current-position event))))
:onScrollEndDrag (fn [event] (on-scroll-end event component @starting-position))
:showsHorizontalScrollIndicator false :showsHorizontalScrollIndicator false
:ref (fn [c] (set! (.-scrollView component) c)) :ref (fn [c] (set! (.-scrollView component) c))
} }