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

fix #438

This commit is contained in:
Roman Volosovskyi 2016-11-19 14:02:41 +02:00
parent 5fe3a1b91a
commit e84f8c64b5
6 changed files with 64 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -54,6 +54,7 @@
"react-native-qrcode": "^0.2.2",
"react-native-randombytes": "^2.1.0",
"react-native-splash-screen": "^1.0.9",
"react-native-swiper": "1.5.3",
"react-native-tcp": "^2.0.4",
"react-native-udp": "^1.2.6",
"react-native-vector-icons": "^2.0.3",

1
postinstall.sh
View File

@ -3,6 +3,7 @@
# rn-nodeify
# temporary hack due to https://github.com/facebook/react-native/issues/4968
./node_modules/.bin/rn-nodeify --install --hack;
npm install --save react@15.3.1;
npm install --save react-native-tcp@2.0.4;
# symlink for re-natal

109
src/status_im/components/main_tabs.cljs
View File

@ -9,7 +9,8 @@
text
image
touchable-highlight
get-dimensions]]
get-dimensions
swiper]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.components.animation :as anim]
@ -44,8 +45,8 @@
(fn [_]
(when-let [offsets @offsets]
(let [from-value (:from offsets)
to-value (:to offsets)
to-tab-id @to-tab-id]
to-value (:to offsets)
to-tab-id @to-tab-id]
(anim/set-value val from-value)
(when to-value
(anim/start
@ -56,61 +57,55 @@
(when (.-finished arg)
(dispatch [:on-navigated-to-tab]))))))))))
(defn get-tab-index-by-id [id]
(:index (first (filter #(= id (:view-id %)) tab-list))))
(def tab->index {:chat-list 0
:discovery 1
:contact-list 2})
(defn get-offsets [tab-id from-id to-id]
(let [tab (get-tab-index-by-id tab-id)
from (get-tab-index-by-id from-id)
to (get-tab-index-by-id to-id)]
(if (or (= tab from) (= tab to))
(cond
(or (nil? from) (= from to)) {:from 0}
(< from to) (if (= tab to)
{:from window-width, :to 0}
{:from 0, :to (- window-width)})
(< to from) (if (= tab to)
{:from (- window-width), :to 0}
{:from 0, :to window-width}))
{:from (- window-width)})))
(def index->tab (clojure.set/map-invert tab->index))
(defn tab-view-container [tab-id content]
(let [cur-tab-id (subscribe [:get :view-id])
prev-tab-id (subscribe [:get :prev-tab-view-id])
offsets (reaction (get-offsets tab-id @prev-tab-id @cur-tab-id))
anim-value (anim/create-value (- window-width))
context {:offsets offsets
:val anim-value
:tab-id tab-id
:to-tab-id cur-tab-id}
on-update (animation-logic context)]
(defn get-tab-index [view-id]
(get tab->index view-id 0))
(defn scroll-to [prev-view-id view-id]
(let [p (get-tab-index prev-view-id)
n (get-tab-index view-id)]
(- n p)))
(defn on-scroll-end [swiped?]
(fn [_ state]
(let [{:strs [index]} (js->clj state)]
(reset! swiped? true)
(dispatch [:navigate-to-tab (index->tab index)]))))
(defn main-tabs []
(let [view-id (subscribe [:get :view-id])
prev-view-id (subscribe [:get :prev-view-id])
main-swiper (atom nil)
swiped? (atom false)]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
{:component-will-update
(fn []
(if @swiped?
(reset! swiped? false)
(when @main-swiper
(let [to (scroll-to @prev-view-id @view-id)]
(.scrollBy @main-swiper to)))))
:reagent-render
(fn [tab-id content]
@offsets
[animated-view {:style (st/tab-view-container anim-value)}
content])})))
(defn tab-view [{:keys [view-id screen]}]
^{:key view-id}
[tab-view-container view-id
[screen]])
(defview main-tabs []
[view-id [:get :view-id]
prev-view-id [:get :prev-view-id]
tab-animation? [:get :prev-tab-view-id]]
[view common-st/flex
[status-bar {:type :main}]
[view common-st/flex
[drawer-view
[view {:style common-st/flex
:pointerEvents (if tab-animation? :none :auto)}
(doall (map #(tab-view %) tab-list))
[tabs {:selected-view-id view-id
:prev-view-id prev-view-id
:tab-list tab-list}]]]]])
(fn []
[view common-st/flex
[status-bar {:type :main}]
[view common-st/flex
[drawer-view
[view {:style common-st/flex}
[swiper (merge
st/main-swiper
{:index (get-tab-index @view-id)
:loop false
:ref #(reset! main-swiper %)
:on-momentum-scroll-end (on-scroll-end swiped?)})
[chats-list]
[discovery]
[contact-list]]
[tabs {:selected-view-id @view-id
:prev-view-id @prev-view-id
:tab-list tab-list}]]]]])})))

2
src/status_im/components/react.cljs
View File

@ -113,4 +113,4 @@
(.openPicker (clj->js {:multiple false}))
(.then images-fn))))
(def swiper (adapt-class (js/require "react-native-swiper")))

17
src/status_im/components/tabs/styles.cljs
View File

@ -52,14 +52,13 @@
:alignItems :center
:top (if active? 0 8)})
(defn tab-view-container [offset-x]
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0
:padding-bottom 60
:transform [{:translateX offset-x}]})
(defn animated-offset [value]
{:top value})
(def main-swiper
{:position :absolute
:top 0
:left 0
:right 0
:bottom 83
:shows-pagination false})