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

Tab text animations (#293)

This commit is contained in:
Alexander Pantyuhov 2016-10-03 11:59:13 +03:00
parent ed0005328b
commit 17a5fcfeaa
2 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,3 +65,6 @@
:bottom 0 :bottom 0
:padding-bottom 60 :padding-bottom 60
:transform [{:translateX offset-x}]}) :transform [{:translateX offset-x}]})
(defn animated-offset [value]
{:top value})

47
src/status_im/components/tabs/tab.cljs
View File

@ -2,19 +2,44 @@
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input animated-view
text text
image image
touchable-highlight]] touchable-highlight]]
[reagent.core :as r] [reagent.core :as r]
[status-im.components.tabs.styles :as st])) [status-im.components.tabs.styles :as st]
[status-im.components.animation :as anim]))
(defview tab [{:keys [view-id title icon selected-view-id]}] (defn animation-logic [val]
[touchable-highlight {:style st/tab (fn []
:disabled (= view-id selected-view-id) (anim/start (anim/spring val {:toValue 0.1
:onPress #(dispatch [:navigate-to-tab view-id])} :tension 30}))))
[view {:style st/tab-container}
[image {:source {:uri icon} (defview tab [_]
:style st/tab-icon}] (let [icon-anim-value (anim/create-value 10)
(when (= selected-view-id view-id) text-anim-value (anim/create-value 20)
[text {:style st/tab-title} title])]]) on-update (comp (animation-logic icon-anim-value)
(animation-logic text-anim-value))]
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:component-will-receive-props
(fn []
(anim/set-value icon-anim-value 5)
(anim/set-value text-anim-value 20))
:reagent-render
(fn [{:keys [view-id title icon selected-view-id]}]
[touchable-highlight {:style st/tab
:disabled (= view-id selected-view-id)
:onPress #(dispatch [:navigate-to-tab view-id])}
[view {:style st/tab-container}
[animated-view {:style (st/animated-offset (if (= selected-view-id view-id)
icon-anim-value
0))}
[image {:source {:uri icon}
:style st/tab-icon}]]
(when (= selected-view-id view-id)
[animated-view {:style (st/animated-offset text-anim-value)}
[text {:style st/tab-title} title]])]])})))