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

[feature] update react-native-swiper 

rework current use of swiper to make it reusable
This commit is contained in:
Eric Dvorsak 2017-10-06 15:08:16 +02:00 committed by Roman Volosovskyi
parent fb10b580d4
commit c7893ebd17
12 changed files with 144 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -75,7 +75,7 @@
"react-native-sortable-listview": "^0.1.1",
"react-native-splash-screen": "1.0.9",
"react-native-svg": "^4.6.1",
"react-native-swiper": "1.5.10",
"react-native-swiper": "1.5.13",
"react-native-tcp": "^3.2.1",
"react-native-udp": "^2.0.0",
"react-native-vector-icons": "^4.0.1",

4
src/status_im/components/styles.cljs
View File

@ -143,3 +143,7 @@
:top 0
:right 0
:bottom 0})
(def main-container
{:background-color color-white
:flex 1})

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

@ -1,66 +1,37 @@
(ns status-im.components.tabs.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as styles]
[status-im.utils.platform :as platform]))
[status-im.utils.platform :as platform])
(:require-macros [status-im.utils.styles :refer [defnstyle]]))
(def tabs-height (if platform/ios? 52 56))
(def tab-height (dec tabs-height))
(defn tabs-container [hidden?]
{:position :absolute
:bottom (if hidden? (- tabs-height) 0)
:left 0
:right 0
(def tabs-container
{:flex-direction :row
:height tabs-height
:background-color styles/color-white
:transform [{:translateY 1}]})
(def tabs-container-line
{:border-top-width 1
:border-top-width 1
:border-top-color styles/color-light-gray3})
(def tabs-inner-container
{:flexDirection :row
(def tab-container
{:flex 1
:height tab-height
:opacity 1
:justifyContent :center
:alignItems :center})
:justify-content :center
:align-items :center})
(def tab
{:flex 1
:height tab-height
:justify-content :center
:align-items :center
:border-bottom-width 2
:border-bottom-color styles/color-white})
(defnstyle tab [active?]
{:flex 1
:height tab-height
:justify-content :center
:align-items :center})
(defnstyle tab-title [active? text-only?]
{:ios {:font-size (if text-only? 15 11)}
:android {:font-size (if text-only? 14 12)}
(defnstyle tab-title [active?]
{:ios {:font-size 11}
:android {:font-size 12}
:text-align :center
:color (cond
active? styles/color-blue4
text-only? styles/color-black
:else styles/color-gray4)})
:color (if active?
styles/color-blue4
styles/color-gray4)})
(defn tab-icon [active?]
{:color (if active? styles/color-blue4 styles/color-gray4)})
(def tab-container
{:flex 1
:height tab-height
:justify-content :center
:align-items :center})
(def swiper
{:shows-pagination false})
(defn main-swiper [tabs-hidden?]
(merge
swiper
{:position :absolute
:top 0
:left 0
:right 0
:bottom (if tabs-hidden? 0 tabs-height)}))

82
src/status_im/components/tabs/views.cljs
View File

@ -1,42 +1,52 @@
(ns status-im.components.tabs.views
(:require [re-frame.core :refer [dispatch]]
[status-im.components.icons.vector-icons :as vi]
(:require [re-frame.core :as re-frame]
[status-im.components.react :as react]
[status-im.components.tabs.styles :as tabs.styles]
[status-im.utils.platform :as platform])
[status-im.components.styles :as styles]
[status-im.components.tabs.styles :as tabs.styles])
(:require-macros [status-im.utils.views :refer [defview]]))
(defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}]
(let [active? (= view-id selected-view-id)
text-only? (nil? icon-active)]
[react/touchable-highlight {:style (merge tabs.styles/tab (if (and active? style-active) style-active))
:disabled active?
:on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))}
[react/view {:style tabs.styles/tab-container}
(when-let [icon (if active? icon-active icon-inactive)]
[react/view
[vi/icon icon (tabs.styles/tab-icon active?)]])
[react/view
[react/text (merge (if text-only? {:uppercase? (get-in platform/platform-specific [:uppercase?])})
{:style (tabs.styles/tab-title active? text-only?)})
title]]]]))
(defview tab [index content tab-style on-press active?]
[react/touchable-highlight {:style (when tab-style
(tab-style active?))
:disabled active?
:on-press #(on-press index)}
[react/view
[content active?]]])
(defn- create-tab [index data selected-view-id on-press style-active]
(let [data (merge data {:key index
:index index
:style-active style-active
:selected-view-id selected-view-id
:on-press on-press})]
[tab data]))
(defn tabs [tabs-container-style indexed-tabs tab-style on-press is-current-tab?]
[react/view {:style tabs-container-style}
(for [[index {:keys [content view-id]}] indexed-tabs]
^{:key index} [tab index content tab-style on-press (is-current-tab? view-id)])])
(defview tabs-container [style children]
(letsubs [tabs-hidden? [:tabs-hidden?]]
[react/animated-view {:style style
:pointer-events (if tabs-hidden? :none :auto)}
children]))
(defn tabs [{:keys [style style-tab-active tab-list selected-view-id on-press]}]
[tabs-container style
(into
[react/view tabs.styles/tabs-inner-container]
(map-indexed #(create-tab %1 %2 selected-view-id on-press style-tab-active) tab-list))])
(defn swipable-tabs [tabs-list current-tab
{:keys [bottom-tabs? navigation-event main-container-style tabs-container-style tab-style]
:or {bottom-tabs false
navigation-event :navigate-to
tabs-container-style tabs.styles/tabs-container
tab-style tabs.styles/tab}}]
(let [swiper (atom nil)
indexed-tabs (map-indexed vector tabs-list)
tab->index (reduce (fn [acc [index tab]]
(assoc acc (:view-id tab) index))
{}
indexed-tabs)
index->tab (clojure.set/map-invert tab->index)
get-tab-index #(get tab->index % 0)]
(fn [tabs-list current-tab]
(let [current-tab-index (get-tab-index current-tab)
on-press (fn [index]
(.scrollBy @swiper (- index current-tab-index)))
is-current-tab? (fn [view-id]
(= (get-tab-index view-id) current-tab-index))]
[react/view styles/main-container
(when-not bottom-tabs?
[tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?])
[react/swiper {:loop false
:shows-pagination false
:index (get-tab-index current-tab)
:ref #(reset! swiper %)
:on-index-changed #(re-frame/dispatch [navigation-event (index->tab %)])}
(for [[index {:keys [screen view-id]}] indexed-tabs]
^{:key index} [screen (is-current-tab? view-id)])]
(when bottom-tabs?
[tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?])]))))

151
src/status_im/ui/screens/main_tabs/views.cljs
View File

@ -1,114 +1,57 @@
(ns status-im.ui.screens.main-tabs.views
(:require-macros [status-im.utils.views :as views]
[cljs.core.async.macros :as async-macros])
(:require [re-frame.core :as re-frame]
(:require [status-im.components.drawer.view :refer [drawer-view]]
[status-im.components.icons.vector-icons :as vector-icons]
[status-im.components.react :as react]
[status-im.components.tabs.styles :as styles]
[status-im.components.styles :as common-styles]
[status-im.i18n :as i18n]
[cljs.core.async :as async]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.components.styles :as styles]
[status-im.components.tabs.styles :as tabs.styles]
[status-im.components.tabs.views :as tabs]
[status-im.i18n :as i18n]
[status-im.ui.screens.chats-list.views :refer [chats-list]]
[status-im.ui.screens.discover.views :refer [discover]]
[status-im.ui.screens.contacts.views :refer [contact-groups-list]]
[status-im.ui.screens.wallet.main.views :refer [wallet]]
[status-im.components.tabs.views :refer [tabs]]))
[status-im.ui.screens.discover.views :refer [discover]]
[status-im.ui.screens.wallet.main.views :refer [wallet]])
(:require-macros [status-im.utils.views :as views]))
(def tab-list
[{:view-id :wallet
:title (i18n/label :t/wallet)
:screen wallet
:icon-inactive :icons/wallet
:icon-active :icons/wallet-active}
{:view-id :chat-list
:title (i18n/label :t/chats)
:screen chats-list
:icon-inactive :icons/chats
:icon-active :icons/chats-active}
{:view-id :discover
:title (i18n/label :t/discover)
:screen discover
:icon-inactive :icons/discover
:icon-active :icons/discover-active}
{:view-id :contact-list
:title (i18n/label :t/contacts)
:screen contact-groups-list
:icon-inactive :icons/contacts
:icon-active :icons/contacts-active}])
(defn- tab-content [{:keys [title icon-active icon-inactive]}]
(fn [active?]
[react/view {:style tabs.styles/tab-container}
(let [icon (if active? icon-active icon-inactive)]
[react/view
[vector-icons/icon icon (tabs.styles/tab-icon active?)]])
[react/view
[react/text {:style (tabs.styles/tab-title active?)}
title]]]))
(def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list))
(def tabs-list*
[{:view-id :wallet
:content {:title (i18n/label :t/wallet)
:icon-inactive :icons/wallet
:icon-active :icons/wallet-active}
:screen wallet}
{:view-id :chat-list
:content {:title (i18n/label :t/chats)
:icon-inactive :icons/chats
:icon-active :icons/chats-active}
:screen chats-list}
{:view-id :discover
:content {:title (i18n/label :t/discover)
:icon-inactive :icons/discover
:icon-active :icons/discover-active}
:screen discover}
{:view-id :contact-list
:content {:title (i18n/label :t/contacts)
:icon-inactive :icons/contacts
:icon-active :icons/contacts-active}
:screen contact-groups-list}])
(def index->tab (clojure.set/map-invert tab->index))
(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)))
(defonce scrolling? (atom false))
(defn on-scroll-end [swiped? scroll-ended view-id]
(fn [_ state]
(when @scrolling?
(async/put! scroll-ended true))
(let [{:strs [index]} (js->clj state)
new-view-id (index->tab index)]
(when-not (= view-id new-view-id)
(reset! swiped? true)
(re-frame/dispatch [:navigate-to-tab new-view-id])))))
(defn start-scrolling-loop
"Loop that synchronizes tabs scrolling to avoid an inconsistent state."
[scroll-start scroll-ended]
(async-macros/go-loop [[swiper to] (async/<! scroll-start)]
;; start scrolling
(reset! scrolling? true)
(.scrollBy swiper to)
;; lock loop until scroll ends
(async/alts! [scroll-ended (async/timeout 2000)])
(reset! scrolling? false)
(recur (async/<! scroll-start))))
(def tabs-list (map #(update % :content tab-content) tabs-list*))
(views/defview main-tabs []
(views/letsubs [view-id [:get :view-id]
prev-view-id [:get :prev-view-id]
tabs-hidden? [:tabs-hidden?]
main-swiper (atom nil)
swiped? (atom false)
scroll-start (async/chan 10)
scroll-ended (async/chan 10)
tabs-were-hidden? (atom @tabs-hidden?)]
{:component-did-mount
(fn []
(start-scrolling-loop scroll-start scroll-ended))
:component-will-update
(fn []
(if @swiped?
(reset! swiped? false)
(when (and (= @tabs-were-hidden? tabs-hidden?) @main-swiper)
(let [to (scroll-to prev-view-id view-id)]
(async/put! scroll-start [@main-swiper to]))))
(reset! tabs-were-hidden? tabs-hidden?))}
[react/view common-styles/flex
[status-bar {:type (if (= view-id :wallet) :wallet :main)}]
[react/view common-styles/flex
[drawer-view
[react/view {:style common-styles/flex}
[react/swiper
(merge
(styles/main-swiper tabs-hidden?)
{:index (get-tab-index view-id)
:loop false
:ref #(reset! main-swiper %)
:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended view-id)})
(doall
(map-indexed (fn [index {vid :view-id screen :screen}]
^{:key index} [screen (= view-id vid)]) tab-list))]
[tabs {:style (merge (styles/tabs-container tabs-hidden?)
styles/tabs-container-line)
:selected-view-id view-id
:tab-list tab-list}]]]]]))
(views/letsubs [current-tab [:get :view-id]]
[react/view styles/flex
[status-bar {:type (if (= current-tab :wallet) :wallet :main)}]
[drawer-view
[tabs/swipable-tabs tabs-list current-tab
{:bottom-tabs? true
:navigation-event :navigate-to-tab}]]]))

2
src/status_im/ui/screens/views.cljs
View File

@ -75,7 +75,7 @@
:wallet-transaction-sent transaction-sent
:choose-recipient choose-recipient
:wallet-request-transaction request-transaction
:wallet-transactions wallet-transactions/transactions
(:transactions-history :unsigned-transactions) wallet-transactions/transactions
:wallet-transaction-details wallet-transactions/transaction-details
:new-chat new-chat
:new-group new-group

5
src/status_im/ui/screens/wallet/events.cljs
View File

@ -141,8 +141,3 @@
:wallet/discard-unsigned-transaction
(fn [_ [_ transaction-id]]
{:discard-transaction transaction-id}))
(handlers/register-handler-db
:change-tab
(fn [db [_ current-tab]]
(assoc-in db [:wallet :current-tab] current-tab)))

2
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -39,7 +39,7 @@
(def transaction-history-action
{:icon :icons/transaction-history
:icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} styles/toolbar-icon)
:handler #(rf/dispatch [:navigate-to :wallet-transactions])})
:handler #(rf/dispatch [:navigate-to :transactions-history])})
(defn toolbar-view []
[toolbar/toolbar2 {:style wallet.styles/toolbar}

2
src/status_im/ui/screens/wallet/navigation.cljs
View File

@ -7,7 +7,7 @@
(re-frame/dispatch [:update-wallet])
(assoc-in db [:wallet :current-tab] 0))
(defmethod navigation/preload-data! :wallet-transactions
(defmethod navigation/preload-data! :transactions-history
[db _]
(re-frame/dispatch [:update-transactions])
db)

15
src/status_im/ui/screens/wallet/transactions/styles.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.wallet.transactions.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as styles]
[status-im.components.tabs.styles :as tabs.styles]
[status-im.utils.platform :as platform]))
(def error-container
@ -17,18 +18,9 @@
:padding-right 10
:font-size 13})
(def main-section
{:flex 1
:background-color styles/color-white})
(def tab-height (if platform/ios? 51 55))
(def tabs-container
{:flexDirection :row})
(defnstyle tab [active?]
{:flex 1
:height tab-height
:height tabs.styles/tab-height
:justify-content :center
:align-items :center
:border-bottom-width (if active? 2 1)
@ -36,6 +28,9 @@
styles/color-blue4
styles/color-gray10-transparent)})
(def tabs-container
{:flexDirection :row})
(defnstyle tab-title [active?]
{:ios {:font-size 15}
:android {:font-size 14}

49
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -6,6 +6,7 @@
[status-im.components.react :as react]
[status-im.components.status-bar :as status-bar]
[status-im.components.styles :as styles]
[status-im.components.tabs.views :as tabs]
[status-im.components.toolbar-new.actions :as actions]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.i18n :as i18n]
@ -43,8 +44,8 @@
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transactions)]
(case current-tab
0 [toolbar/actions [history-action]]
1 nil ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count]
:transactions-history [toolbar/actions [history-action]]
:unsigned-transactions nil ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count]
)])
(defn action-buttons [{:keys [id to value] :as transaction}]
@ -156,12 +157,12 @@
[react/view {:style styles/flex}
[list/section-list {:sections filter-data}]]])
(defn transactions-history-tab [{:keys [active?]}]
(defn history-tab [active?]
[react/text {:uppercase? true
:style (transactions.styles/tab-title active?)}
(i18n/label :t/transactions-history)])
(defview unsigned-transactions-tab [{:keys [active?]}]
(defview unsigned-tab [active?]
(letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count]]
[react/view {:flex-direction :row}
[react/text {:style (transactions.styles/tab-title active?)
@ -171,38 +172,24 @@
[react/text {:style transactions.styles/tab-unsigned-transactions-count}
(str " " unsigned-transactions-count)])]))
(defview tab [scroll-to index content]
(letsubs [current-tab [:wallet.transactions/current-tab]]
(let [active? (= index current-tab)]
[react/view (transactions.styles/tab active?)
[react/touchable-highlight {:on-press #(scroll-to index)}
[react/view
[content {:active? active?}]]]])))
(defn swipable-tabs [current-tab]
(let [swiper (atom nil)]
(fn [current-tab]
(let [scroll-to (fn [index]
(.scrollBy @swiper (- index current-tab)))]
[react/view transactions.styles/main-section
[react/view transactions.styles/tabs-container
[tab scroll-to 0 transactions-history-tab]
[tab scroll-to 1 unsigned-transactions-tab]]
[react/swiper {:loop false
:shows-pagination false
:index current-tab
:ref #(reset! swiper %)
:on-index-changed #(re-frame/dispatch [:change-tab %])}
[history-list]
[unsigned-list]]]))))
(def tabs-list
[{:view-id :transactions-history
:content history-tab
:screen history-list}
{:view-id :unsigned-transactions
:content unsigned-tab
:screen unsigned-list}])
(defview transactions []
(letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count]
current-tab [:wallet.transactions/current-tab]]
current-tab [:get :view-id]]
[react/view {:style styles/flex}
[status-bar/status-bar]
[toolbar-view current-tab unsigned-transactions-count]
[swipable-tabs current-tab]]))
[tabs/swipable-tabs tabs-list current-tab
{:navigation-event :navigation-replace
:tab-style transactions.styles/tab
:tabs-container-style transactions.styles/tabs-container}]]))
(defn- pretty-print-asset [symbol amount]
(case symbol
@ -273,7 +260,7 @@
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transaction-details)]
[toolbar/actions (details-action hash url)]]
[react/scroll-view {:style transactions.styles/main-section}
[react/scroll-view {:style styles/main-container}
[details-header transactions]
[details-confirmations confirmations confirmations-progress]
[react/view {:style transactions.styles/details-separator}]

5
test/cljs/status_im/test/components/main_tabs.cljs
View File

@ -1,8 +1,3 @@
(ns status-im.test.components.main-tabs
(:require [cljs.test :refer-macros [deftest is testing]]
[status-im.ui.screens.main-tabs.views :as tabs]))
(deftest tab->index
(is (contains? tabs/tab->index :chat-list))
(is (= 2 (:discover tabs/tab->index))))