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

Carousel calculation fixes (#561)

This commit is contained in:
alwx 2016-12-24 12:05:49 +03:00
parent 3936c05ecd
commit dcb7595b09
5 changed files with 66 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/status_im/components/carousel/carousel.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.components.carousel.carousel
(:require [status-im.components.react :refer [view
(:require [reagent.impl.component :as rc]
[status-im.components.react :refer [view
scroll-view
touchable-without-feedback
text]]
@ -19,14 +20,17 @@
(defn get-active-page [data]
(get data :activePage 0))
(defn get-sneak [{:keys [sneak count] }]
(defn get-sneak [{:keys [sneak gap count]}]
(if (> (or count 2) 1)
(or sneak (:sneak defaults))
0))
gap))
(defn get-gap [data]
(get data :gap (:gap defaults)))
(defn get-count [data]
(get data :count))
(defn compute-page-width
([gap sneak]
(compute-page-width (window-page-width) gap sneak))
@ -47,11 +51,16 @@
(let [sneak (get-sneak props)
page-width (get-page-width props)
style (get-page-style props)
gap (quot (- (- (window-page-width) (* 2 sneak)) page-width) 2)]
gap (quot (- (window-page-width)
(* 2 sneak)
page-width)
2)
count (get-count props)]
(reagent.core/set-state component {:sneak sneak
:pageWidth page-width
:pageStyle style
:gap gap})))
:gap gap
:count count})))
(defn scroll-to [component x y]
(.scrollTo (.-scrollView component) (clj->js {:y y
@ -60,14 +69,29 @@
(defn get-current-position [event]
(.-x (.-contentOffset (.-nativeEvent event))))
(defn get-page-position [state page]
(let [page-width (get-page-width state)
gap (get-gap state)
sneak (get-sneak state)
count (get-count state)
addition (condp = page
0 gap
(dec count) (- (* 3 gap) (* sneak 2))
(- sneak (* gap 2)))]
(+ (* page page-width)
(* (dec page) gap)
addition)))
(defn go-to-page [component page]
(let [props (reagent.core/props component)
state (reagent.core/state component)
page-width (get-page-width state)
gap (get-gap state)
page-position (+ (* page page-width) (* (- page 1) gap))]
page-position (get-page-position state page)]
(log/debug "go-to-page: props-page-width=" page-width "; gap=" gap
"; page-position=" page-position)
"; page-position=" page-position "; page: " page)
(reagent.core/set-state component {:scrolling? true})
(js/setTimeout #(reagent.core/set-state component {:scrolling? false}) 200)
(scroll-to component page-position 0)
(reagent.core/set-state component {:activePage page})
(when (:onPageChange props)
@ -79,22 +103,23 @@
scroll-threshold (get-scroll-threshold props)
current-page (get-active-page state)
current-position (get-current-position event)
page-count (get-count state)
direction (cond
(> current-position (+ starting-position scroll-threshold)) 1
(< current-position (- starting-position scroll-threshold)) -1
:else 0)
new-page (+ current-page direction)
]
new-page (+ current-page direction)]
(log/debug state "on-scroll-end: starting position=" starting-position
"; current-position=" current-position "; direction=" direction
"; current-page=" current-page "; new-page=" new-page)
(if (not= current-page new-page)
(if (and (not= current-page new-page)
(< -1 new-page page-count))
(go-to-page component new-page)
(scroll-to component starting-position 0))))
(defn component-will-mount [component new-args]
(let [props (reagent.core/props component)]
(log/debug "component-will-mount: new-args="new-args)
(log/debug "component-will-mount: new-args=" new-args)
(apply-props component props)))
(defn component-did-mount [component]
@ -111,15 +136,18 @@
(log/debug "component-did-update"))
(defn component-will-receive-props [component new-argv]
(log/debug "component-will-receive-props: new-argv=" new-argv)
(apply-props component new-argv))
(let [props (rc/extract-props new-argv)]
(log/debug "component-will-receive-props: props=" props)
(apply-props component props)))
(defn get-event-width [event]
(.-width (.-layout (.-nativeEvent event))))
(defn on-layout-change [event component]
(let [state (reagent.core/state component)
page-width (compute-page-width (get-event-width event) (get-gap state) (get-sneak state))
page-width (compute-page-width (get-event-width event)
(get-gap state)
(get-sneak state))
state-page-width (get-page-width state)
active-page (get-active-page state)
gap (get-gap state)
@ -128,21 +156,21 @@
(if (not= page-width state-page-width)
(do
(reagent.core/set-state component {:pageWidth page-width})
(.setState component {:layout (.-layout (.-nativeEvent event))})
)
(.setState component {:layout (.-layout (.-nativeEvent event))}))
(scroll-to component page-position 0))))
(defn get-pages [component data children]
(let [page-width (get-page-width data)
page-style (get-page-style data)
gap (get-gap data)
margin (quot gap 2)]
sneak (get-sneak data)
count (get-count data)]
(doall (map-indexed (fn [index child]
(let [page-index index
touchable-data {:key index
:onPress #(go-to-page component page-index)}]
[touchable-without-feedback touchable-data
[view {:style [(st/page page-width margin)
[view {:style [(st/page index count page-width gap)
page-style]
:onLayout #(log/debug "view onLayout" %)}
@ -162,6 +190,7 @@
:decelerationRate 0.9
:horizontal true
:onLayout #(on-layout-change % component)
:scrollEnabled (not (get state :scrolling?))
:onScrollBeginDrag #(reset! starting-position (get-current-position %))
:onScrollEndDrag #(on-scroll-end % component @starting-position)
:showsHorizontalScrollIndicator false

19
src/status_im/components/carousel/styles.cljs
View File

@ -4,11 +4,16 @@
{:flex 1})
(defn content-container [sneak gap]
{:paddingLeft (+ 0 (quot gap 2))
:paddingRight (+ sneak (quot gap 2))})
{:paddingLeft (quot gap 2)
:paddingRight (quot gap 2)})
(defn page [page-width margin]
{:width page-width
:justifyContent :center
:marginLeft margin
:marginRight margin})
(defn page [index count page-width gap]
(let [margin (quot gap 2)
left-spacing (if (zero? index) gap 0)
right-spacing (if (and (= index (dec count))
(> count 1))
gap 0)]
{:width page-width
:justifyContent :center
:marginLeft (+ margin left-spacing)
:marginRight (+ margin right-spacing)}))

5
src/status_im/discover/screen.cljs
View File

@ -51,8 +51,9 @@
[title :t/popular-tags false]
(if (pos? (count popular-tags))
[carousel {:pageStyle st/carousel-page-style
:gap 0
:sneak (if (> (count popular-tags) 1) 16 8)}
:gap 8
:sneak 16
:count (count popular-tags)}
(for [{:keys [name]} popular-tags]
[discover-popular-list {:tag name
:contacts contacts

5
src/status_im/discover/styles.cljs
View File

@ -69,9 +69,8 @@
(def popular-list-container
{:flex 1
:background-color :white
:margin-left 16
:padding-left 16
:padding-top 18})
:padding-top 18
:padding-left 16})
(def popular-list-item
{:flex-direction :row

4
src/status_im/transactions/screen.cljs
View File

@ -42,8 +42,8 @@
:handler #(dispatch [:accept-transactions password])}]}]
[view st/carousel-container
[carousel {:pageStyle st/carousel-page-style
:gap 16
:sneak 20
:gap 8
:sneak 16
:count (count transactions)}
(when transactions
(for [transaction transactions]