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

refactored carousel component 

Former-commit-id: d68e078130
This commit is contained in:
Adrian Tiberius 2016-05-09 21:22:02 +03:00
parent 4ff9e34121
commit da535c025b
7 changed files with 211 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,150 +0,0 @@
(ns syng-im.components.carousel
(:require [syng-im.components.react :refer [android?
view
scroll-view
touchable-without-feedback
text]]
[syng-im.utils.logging :as log]))
(defn page-width []
(.-width (.get (.. js/React -Dimensions) "window")))
(def defaults {:gap 10
:sneak 10
:pageWidth (- (page-width) 40)
:scrollThreshold 20})
(defn get-gap [data]
(get data :gap (:gap defaults)))
(defn get-sneak [data]
(get data :sneak (:sneak defaults)))
(defn get-page-width [data]
(get data :pageWidth (:pageWidth defaults)))
(defn get-scroll-threshold [data]
(get data :scrollThreshold (:scrollThreshold defaults)))
(defn calculate-gap [component props]
(let [prop-page-width (get-page-width props)
page-width (page-width)
sneak (get-sneak props)
gap (quot (- (- page-width (* 2 sneak)) prop-page-width) 2)]
(log/debug "calculate-gap: prop-page-width=" prop-page-width
"; page-width=" page-width"; sneak=" sneak "; gap=" gap)
(when (> prop-page-width page-width)
(log/warn "Invalid pageWidth"))
(reagent.core/set-state component {:gap gap})
))
(defn scroll-to [component x y]
(.scrollTo (.-scrollView component) (clj->js {:y y
:x x})))
(defn get-current-position [event]
(.-x (.-contentOffset (.-nativeEvent event))))
(defn on-scroll-end [event component starting-position]
(let [props (reagent.core/props component)
state (reagent.core/state component)
prop-page-width (get-page-width props)
sneak (get-sneak props)
scroll-threshold (get-scroll-threshold props)
gap (get-gap state)
page-offset (+ prop-page-width gap)
current-position (get-current-position event)
direction (cond
(> current-position (+ starting-position scroll-threshold)) 1
(< current-position (- starting-position scroll-threshold)) -1
:else 0)
current-page (+ (quot starting-position page-offset) direction)
]
(log/debug "on-scroll-end: prop-page-width=" prop-page-width
"; sneak=" sneak "; gap=" gap "; page-offset=" page-offset
"; starting position=" starting-position
"; current-position=" current-position
"; direction=" direction "; current-page=" current-page)
(scroll-to component (* current-page page-offset) 0)
(reagent.core/set-state component {:activePage current-page})
(when (:onPageChange props)
((:onPageChange props) current-page))))
(defn go-to-page [component position]
(let [props (reagent.core/props component)
state (reagent.core/state component)
props-page-width (get-page-width props)
gap (get-gap state)
page-position (* position (+ props-page-width gap))]
(log/debug "go-to-page: props-page-width=" props-page-width "; gap=" gap
"; page-position=" page-position)
(scroll-to component page-position 0)))
(defn component-will-mount [component new-args]
(let [props (reagent.core/props component)]
(log/debug "component-will-mount: component=" component "; new-args="new-args)
(calculate-gap component props)))
(defn component-did-mount [component]
(let [props (reagent.core/props component)
initial-page (.-initialPage props)]
(log/debug "component-did-mount: initial-page="initial-page)
(when (pos? initial-page)
(go-to-page component initial-page))))
(defn component-will-receive-props [component new-argv]
(log/debug "component-will-receive-props: component=" component
"; new-argv=" new-argv)
(calculate-gap component new-argv))
(defn get-pages [component data children]
(let [props-page-width (get-page-width data)
page-style (get data :pageStyle {})
gap (get-gap data)
margin (quot gap 2)]
(map-indexed (fn [index child]
(let [page-index index
touchable-data {:key index
:onPress (fn [event]
(go-to-page component page-index))}]
(log/debug "page " index " - " child)
[touchable-without-feedback touchable-data
[view {:style [{:width props-page-width
:justifyContent "center"
:marginLeft margin
:marginRight margin}
page-style]}
child]])) children)))
(defn reagent-render [data children]
(let [starting-position (atom 0)
component (reagent.core/current-component)
sneak (get-sneak data)
gap (get-gap data)
pages (get-pages component data children)]
(log/debug "reagent-render: ")
[view {:style {:flex 1}}
[scroll-view {:contentContainerStyle {:paddingLeft (+ sneak (quot gap 2))
:paddingRight (+ sneak (quot gap 2))}
:automaticallyAdjustContentInsets false
:bounces false
:decelerationRate 0.9
:horizontal true
:onScrollBeginDrag #(reset! starting-position (get-current-position %))
:onScrollEndDrag #(on-scroll-end % component @starting-position)
:showsHorizontalScrollIndicator false
:ref (fn [c] (set! (.-scrollView component) c))
}
pages]]
))
(defn carousel [data children]
(let [component-data {:component-did-mount component-did-mount
:component-will-mount component-will-mount
:component-will-receive-props component-will-receive-props
:display-name "carousel"
:reagent-render reagent-render}]
(log/debug "Creating carousel component: " data children)
(reagent.core/create-class component-data)))

178
src/syng_im/components/carousel/carousel.cljs Normal file
View File

@ -0,0 +1,178 @@
(ns syng-im.components.carousel
(:require [syng-im.components.react :refer [android?
view
scroll-view
touchable-without-feedback
text]]
[syng-im.components.carousel.styles :as st]
[syng-im.utils.logging :as log]))
(defn window-page-width []
(.-width (.get (.. js/React -Dimensions) "window")))
(def defaults {:gap 10
:sneak 10
:pageStyle {}
:scrollThreshold 20})
(defn get-active-page [data]
(get data :activePage 0))
(defn get-sneak [data]
(get data :sneak (:sneak defaults)))
(defn get-gap [data]
(get data :gap (:gap defaults)))
(defn compute-page-width
([gap sneak]
(compute-page-width (window-page-width) gap sneak))
([window-page-width gap sneak]
(- window-page-width (+ (* 2 gap) (* 2 sneak)))))
(defn get-page-width [data]
(get data :pageWidth (compute-page-width (get-gap data) (get-sneak data))))
(defn get-page-style [data]
(let [data-style (get data :pageStyle {})]
(merge (:pageStyle defaults) data-style)))
(defn get-scroll-threshold [data]
(get data :scrollThreshold (:scrollThreshold defaults)))
(defn apply-props [component props]
(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)]
(reagent.core/set-state component {:sneak sneak
:pageWidth page-width
:pageStyle style
:gap gap})))
(defn scroll-to [component x y]
(.scrollTo (.-scrollView component) (clj->js {:y y
:x x})))
(defn get-current-position [event]
(.-x (.-contentOffset (.-nativeEvent event))))
(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 gap))]
(log/debug "go-to-page: props-page-width=" page-width "; gap=" gap
"; page-position=" page-position)
(scroll-to component page-position 0)
(reagent.core/set-state component {:activePage page})
(when (:onPageChange props)
((:onPageChange props) page))))
(defn on-scroll-end [event component starting-position]
(let [props (reagent.core/props component)
state (reagent.core/state component)
scroll-threshold (get-scroll-threshold props)
current-page (get-active-page state)
current-position (get-current-position event)
direction (cond
(> current-position (+ starting-position scroll-threshold)) 1
(< current-position (- starting-position scroll-threshold)) -1
:else 0)
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)
(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)
(apply-props component props)))
(defn component-did-mount [component]
(let [props (reagent.core/props component)
initial-page (.-initialPage props)]
(log/debug "component-did-mount: initial-page="initial-page)
(when (pos? initial-page)
(go-to-page component initial-page))))
(defn component-will-update [component new-argv]
(log/debug "component-will-update: "))
(defn component-did-update [component old-argv]
(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))
(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))
state-page-width (get-page-width state)
active-page (get-active-page state)
gap (get-gap state)
page-position (* active-page (+ page-width gap))]
(log/debug "Layout changed: " " page-width=" page-width "; state-page-width=" state-page-width)
(if (not= page-width state-page-width)
(do
(reagent.core/set-state component {:pageWidth page-width})
(.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)]
(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)
page-style]
:onLayout #(log/debug "view onLayout" %)}
child]])) children))))
(defn reagent-render [data children]
(let [starting-position (atom 0)
component (reagent.core/current-component)
state (reagent.core/state component)
sneak (get-sneak state)
gap (get-gap state)]
(log/debug "reagent-render: " data state)
[view {:style st/scroll-view-container}
[scroll-view {:contentContainerStyle (st/content-container sneak gap)
:automaticallyAdjustContentInsets false
:bounces false
:decelerationRate 0.9
:horizontal true
:onLayout #(on-layout-change % component)
:onScrollBeginDrag #(reset! starting-position (get-current-position %))
:onScrollEndDrag #(on-scroll-end % component @starting-position)
:showsHorizontalScrollIndicator false
:ref #(set! (.-scrollView component) %)}
(get-pages component state children)]]))
(defn carousel [data children]
(let [component-data {:component-did-mount component-did-mount
:component-will-mount component-will-mount
:component-will-receive-props component-will-receive-props
:component-will-update component-will-update
:component-did-update component-did-update
:display-name "carousel"
:reagent-render reagent-render}]
(log/debug "Creating carousel component: " data)
(reagent.core/create-class component-data)))

24
src/syng_im/components/carousel/styles.cljs Normal file
View File

@ -0,0 +1,24 @@
(ns syng-im.components.carousel.styles
(:require [syng-im.components.styles :refer [font
title-font
color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(def scroll-view-container
{:flex 1})
(defn content-container [sneak gap]
{:paddingLeft (+ sneak (quot gap 2))
:paddingRight (+ sneak (quot gap 2))})
(defn page [page-width margin]
{:width page-width
:justifyContent "center"
:marginLeft margin
:marginRight margin})

3
src/syng_im/components/discovery/discovery_popular.cljs
View File

@ -17,8 +17,7 @@
(log/debug "Got popular tags: " @popular-tags)
(if (> (count @popular-tags) 0)
[carousel {:pageStyle st/carousel-page-style
:pageWidth (- (page-width) 60)
:sneak 20}
:sneak 20}
(for [tag @popular-tags]
(discovery-popular-list (.-name tag) (.-count tag) navigator))]
[text "None"])))

13
src/syng_im/components/discovery/discovery_popular_list.cljs
View File

@ -28,14 +28,12 @@
(defn discovery-popular-list [tag count navigator]
(let [discoveries (subscribe [:get-discoveries-by-tag tag 3])]
(log/debug "Got discoveries for tag (" tag "): " @discoveries)
[view {:style st/popular-list-container}
[view {:style st/row}
[view {:style st/column}
[view st/row
[view st/tag-name-container
[touchable-highlight {:onPress #(dispatch [:show-discovery-tag tag navigator :push])}
[view {:style st/tag-name-container}
[text {:style st/tag-name}
(str " #" (name tag))]]]]
[text {:style st/tag-name}
(str " #" (name tag))]]]
[view {:style st/tag-count-container}
[text {:style st/tag-count}
count]]]
@ -43,5 +41,4 @@
:enableEmptySections true
:renderRow render-row
:renderSeparator render-separator
:style st/popular-list}]
]))
:style st/popular-list}]]))

1
src/syng_im/components/discovery/discovery_popular_list_item.cljs
View File

@ -11,7 +11,6 @@
)
(defn discovery-popular-list-item [discovery]
(log/debug discovery)
(r/as-element [view {:style st/popular-list-item}
[view {:style st/popular-list-item-name-container}
[text {:style st/popular-list-item-name} (aget discovery "name")]

4
src/syng_im/components/discovery/styles.cljs
View File

@ -75,7 +75,8 @@
:justifyContent "center"})
(def tag-name-container
{:backgroundColor "#eef2f5"
{:flexDirection "column"
:backgroundColor "#eef2f5"
:borderRadius 5
:padding 4})
@ -90,6 +91,7 @@
(def tag-count-container
{:flex 0.2
:flexDirection "column"
:alignItems "flex-end"
:paddingTop 10
:paddingRight 9})