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

Merge pull request #307 from status-im/feature/#293 

Tab text animations (fixes #293)

Former-commit-id: cf21d647fb
This commit is contained in:
Roman Volosovskyi 2016-10-03 13:13:45 +03:00 committed by GitHub
parent 150b84fe8f b8e2139fd7
commit fb174b6ebe
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
:padding-bottom 60
: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 [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view
text-input
animated-view
text
image
touchable-highlight]]
[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]}]
[touchable-highlight {:style st/tab
:disabled (= view-id selected-view-id)
:onPress #(dispatch [:navigate-to-tab view-id])}
[view {:style st/tab-container}
[image {:source {:uri icon}
:style st/tab-icon}]
(when (= selected-view-id view-id)
[text {:style st/tab-title} title])]])
(defn animation-logic [val]
(fn []
(anim/start (anim/spring val {:toValue 0.1
:tension 30}))))
(defview tab [_]
(let [icon-anim-value (anim/create-value 10)
text-anim-value (anim/create-value 20)
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]])]])})))