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-sortable-listview": "^0.1.1",
"react-native-splash-screen": "1.0.9", "react-native-splash-screen": "1.0.9",
"react-native-svg": "^4.6.1", "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-tcp": "^3.2.1",
"react-native-udp": "^2.0.0", "react-native-udp": "^2.0.0",
"react-native-vector-icons": "^4.0.1", "react-native-vector-icons": "^4.0.1",

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

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

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

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

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

@ -1,114 +1,57 @@
(ns status-im.ui.screens.main-tabs.views (ns status-im.ui.screens.main-tabs.views
(:require-macros [status-im.utils.views :as views] (:require [status-im.components.drawer.view :refer [drawer-view]]
[cljs.core.async.macros :as async-macros]) [status-im.components.icons.vector-icons :as vector-icons]
(:require [re-frame.core :as re-frame]
[status-im.components.react :as react] [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.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.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.contacts.views :refer [contact-groups-list]]
[status-im.ui.screens.wallet.main.views :refer [wallet]] [status-im.ui.screens.discover.views :refer [discover]]
[status-im.components.tabs.views :refer [tabs]])) [status-im.ui.screens.wallet.main.views :refer [wallet]])
(:require-macros [status-im.utils.views :as views]))
(def tab-list (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 tabs-list*
[{:view-id :wallet [{:view-id :wallet
:title (i18n/label :t/wallet) :content {:title (i18n/label :t/wallet)
:screen wallet
:icon-inactive :icons/wallet :icon-inactive :icons/wallet
:icon-active :icons/wallet-active} :icon-active :icons/wallet-active}
:screen wallet}
{:view-id :chat-list {:view-id :chat-list
:title (i18n/label :t/chats) :content {:title (i18n/label :t/chats)
:screen chats-list
:icon-inactive :icons/chats :icon-inactive :icons/chats
:icon-active :icons/chats-active} :icon-active :icons/chats-active}
:screen chats-list}
{:view-id :discover {:view-id :discover
:title (i18n/label :t/discover) :content {:title (i18n/label :t/discover)
:screen discover
:icon-inactive :icons/discover :icon-inactive :icons/discover
:icon-active :icons/discover-active} :icon-active :icons/discover-active}
:screen discover}
{:view-id :contact-list {:view-id :contact-list
:title (i18n/label :t/contacts) :content {:title (i18n/label :t/contacts)
:screen contact-groups-list
:icon-inactive :icons/contacts :icon-inactive :icons/contacts
:icon-active :icons/contacts-active}]) :icon-active :icons/contacts-active}
:screen contact-groups-list}])
(def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list)) (def tabs-list (map #(update % :content tab-content) tabs-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))))
(views/defview main-tabs [] (views/defview main-tabs []
(views/letsubs [view-id [:get :view-id] (views/letsubs [current-tab [:get :view-id]]
prev-view-id [:get :prev-view-id] [react/view styles/flex
tabs-hidden? [:tabs-hidden?] [status-bar {:type (if (= current-tab :wallet) :wallet :main)}]
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 [drawer-view
[react/view {:style common-styles/flex} [tabs/swipable-tabs tabs-list current-tab
[react/swiper {:bottom-tabs? true
(merge :navigation-event :navigate-to-tab}]]]))
(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}]]]]]))

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

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

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

@ -141,8 +141,3 @@
:wallet/discard-unsigned-transaction :wallet/discard-unsigned-transaction
(fn [_ [_ transaction-id]] (fn [_ [_ transaction-id]]
{:discard-transaction 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 (def transaction-history-action
{:icon :icons/transaction-history {:icon :icons/transaction-history
:icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} styles/toolbar-icon) :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 [] (defn toolbar-view []
[toolbar/toolbar2 {:style wallet.styles/toolbar} [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]) (re-frame/dispatch [:update-wallet])
(assoc-in db [:wallet :current-tab] 0)) (assoc-in db [:wallet :current-tab] 0))
(defmethod navigation/preload-data! :wallet-transactions (defmethod navigation/preload-data! :transactions-history
[db _] [db _]
(re-frame/dispatch [:update-transactions]) (re-frame/dispatch [:update-transactions])
db) 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 (ns status-im.ui.screens.wallet.transactions.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as styles] (:require [status-im.components.styles :as styles]
[status-im.components.tabs.styles :as tabs.styles]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def error-container (def error-container
@ -17,18 +18,9 @@
:padding-right 10 :padding-right 10
:font-size 13}) :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?] (defnstyle tab [active?]
{:flex 1 {:flex 1
:height tab-height :height tabs.styles/tab-height
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:border-bottom-width (if active? 2 1) :border-bottom-width (if active? 2 1)
@ -36,6 +28,9 @@
styles/color-blue4 styles/color-blue4
styles/color-gray10-transparent)}) styles/color-gray10-transparent)})
(def tabs-container
{:flexDirection :row})
(defnstyle tab-title [active?] (defnstyle tab-title [active?]
{:ios {:font-size 15} {:ios {:font-size 15}
:android {:font-size 14} :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.react :as react]
[status-im.components.status-bar :as status-bar] [status-im.components.status-bar :as status-bar]
[status-im.components.styles :as styles] [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.actions :as actions]
[status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.view :as toolbar]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
@ -43,8 +44,8 @@
toolbar/default-nav-back toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transactions)] [toolbar/content-title (i18n/label :t/transactions)]
(case current-tab (case current-tab
0 [toolbar/actions [history-action]] :transactions-history [toolbar/actions [history-action]]
1 nil ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count] :unsigned-transactions nil ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count]
)]) )])
(defn action-buttons [{:keys [id to value] :as transaction}] (defn action-buttons [{:keys [id to value] :as transaction}]
@ -156,12 +157,12 @@
[react/view {:style styles/flex} [react/view {:style styles/flex}
[list/section-list {:sections filter-data}]]]) [list/section-list {:sections filter-data}]]])
(defn transactions-history-tab [{:keys [active?]}] (defn history-tab [active?]
[react/text {:uppercase? true [react/text {:uppercase? true
:style (transactions.styles/tab-title active?)} :style (transactions.styles/tab-title active?)}
(i18n/label :t/transactions-history)]) (i18n/label :t/transactions-history)])
(defview unsigned-transactions-tab [{:keys [active?]}] (defview unsigned-tab [active?]
(letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count]] (letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count]]
[react/view {:flex-direction :row} [react/view {:flex-direction :row}
[react/text {:style (transactions.styles/tab-title active?) [react/text {:style (transactions.styles/tab-title active?)
@ -171,38 +172,24 @@
[react/text {:style transactions.styles/tab-unsigned-transactions-count} [react/text {:style transactions.styles/tab-unsigned-transactions-count}
(str " " unsigned-transactions-count)])])) (str " " unsigned-transactions-count)])]))
(defview tab [scroll-to index content] (def tabs-list
(letsubs [current-tab [:wallet.transactions/current-tab]] [{:view-id :transactions-history
(let [active? (= index current-tab)] :content history-tab
[react/view (transactions.styles/tab active?) :screen history-list}
[react/touchable-highlight {:on-press #(scroll-to index)} {:view-id :unsigned-transactions
[react/view :content unsigned-tab
[content {:active? active?}]]]]))) :screen unsigned-list}])
(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]]]))))
(defview transactions [] (defview transactions []
(letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count] (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} [react/view {:style styles/flex}
[status-bar/status-bar] [status-bar/status-bar]
[toolbar-view current-tab unsigned-transactions-count] [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] (defn- pretty-print-asset [symbol amount]
(case symbol (case symbol
@ -273,7 +260,7 @@
toolbar/default-nav-back toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transaction-details)] [toolbar/content-title (i18n/label :t/transaction-details)]
[toolbar/actions (details-action hash url)]] [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-header transactions]
[details-confirmations confirmations confirmations-progress] [details-confirmations confirmations confirmations-progress]
[react/view {:style transactions.styles/details-separator}] [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 (ns status-im.test.components.main-tabs
(:require [cljs.test :refer-macros [deftest is testing]] (:require [cljs.test :refer-macros [deftest is testing]]
[status-im.ui.screens.main-tabs.views :as tabs])) [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))))