From e84f8c64b53c20d96c9b3511a084614af81ccfa3 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Sat, 19 Nov 2016 14:02:41 +0200 Subject: [PATCH] fix #438 --- package.json | 1 + postinstall.sh | 1 + src/status_im/components/main_tabs.cljs | 109 +++++++++++----------- src/status_im/components/react.cljs | 2 +- src/status_im/components/styles.cljs | 2 +- src/status_im/components/tabs/styles.cljs | 17 ++-- 6 files changed, 64 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index f4d521ea36..f876980365 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/postinstall.sh b/postinstall.sh index c0c99f9072..5e2ff36422 100755 --- a/postinstall.sh +++ b/postinstall.sh @@ -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 diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index a323bdbff4..2749c6d52a 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/src/status_im/components/main_tabs.cljs @@ -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}]]]]])}))) diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 7d0c87f11a..a292470a4e 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -113,4 +113,4 @@ (.openPicker (clj->js {:multiple false})) (.then images-fn)))) - +(def swiper (adapt-class (js/require "react-native-swiper"))) diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 3c62ea6771..a996c5fc0c 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -83,4 +83,4 @@ (def button-input {:flex 1 - :flexDirection :column}) \ No newline at end of file + :flexDirection :column}) diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index 60e66a6462..412ba4bf88 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -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})