search input animation with nativeDriver
This commit is contained in:
parent
7237dd510d
commit
cd968cc507
|
@ -50,29 +50,32 @@
|
||||||
|
|
||||||
(defonce search-input-state
|
(defonce search-input-state
|
||||||
(reagent/atom {:show? false
|
(reagent/atom {:show? false
|
||||||
:height (animation/create-value 0)}))
|
:height (animation/create-value
|
||||||
|
(- styles/search-input-height))}))
|
||||||
|
|
||||||
(defn show-search!
|
(defn show-search!
|
||||||
[]
|
[]
|
||||||
(swap! search-input-state assoc :show? true)
|
|
||||||
(animation/start
|
(animation/start
|
||||||
(animation/timing (:height @search-input-state)
|
(animation/timing (:height @search-input-state)
|
||||||
{:toValue styles/search-input-height
|
{:toValue 0
|
||||||
:duration 350
|
:duration 350
|
||||||
:easing (.out (animation/easing)
|
:easing (.out (animation/easing)
|
||||||
(.-quad (animation/easing)))})))
|
(.-quad (animation/easing)))
|
||||||
|
:useNativeDriver true})))
|
||||||
|
|
||||||
|
(defn reset-height []
|
||||||
|
(animation/set-value (:height @search-input-state)
|
||||||
|
(- styles/search-input-height)))
|
||||||
|
|
||||||
(defn hide-search!
|
(defn hide-search!
|
||||||
[]
|
[]
|
||||||
(utils/set-timeout
|
|
||||||
#(swap! search-input-state assoc :show? false)
|
|
||||||
350)
|
|
||||||
(animation/start
|
(animation/start
|
||||||
(animation/timing (:height @search-input-state)
|
(animation/timing (:height @search-input-state)
|
||||||
{:toValue 0
|
{:toValue (- styles/search-input-height)
|
||||||
:duration 350
|
:duration 350
|
||||||
:easing (.in (animation/easing)
|
:easing (.in (animation/easing)
|
||||||
(.-quad (animation/easing)))})))
|
(.-quad (animation/easing)))
|
||||||
|
:useNativeDriver true})))
|
||||||
|
|
||||||
(defn set-search-state-visible!
|
(defn set-search-state-visible!
|
||||||
[visible?]
|
[visible?]
|
||||||
|
@ -82,7 +85,7 @@
|
||||||
styles/search-input-height
|
styles/search-input-height
|
||||||
0)))
|
0)))
|
||||||
|
|
||||||
(defn animated-search-input
|
(defn search-input-wrapper
|
||||||
[search-filter]
|
[search-filter]
|
||||||
(reagent/create-class
|
(reagent/create-class
|
||||||
{:component-will-unmount
|
{:component-will-unmount
|
||||||
|
@ -92,20 +95,15 @@
|
||||||
(set-search-state-visible! true))
|
(set-search-state-visible! true))
|
||||||
:reagent-render
|
:reagent-render
|
||||||
(fn [search-filter]
|
(fn [search-filter]
|
||||||
(let [{:keys [show? height]} @search-input-state]
|
[search-input search-filter
|
||||||
(when (or show?
|
{:on-cancel #(do
|
||||||
search-filter)
|
(re-frame/dispatch [:search/filter-changed nil])
|
||||||
[react/animated-view
|
(hide-search!))
|
||||||
{:style {:height height}}
|
:on-focus (fn [search-filter]
|
||||||
[search-input search-filter
|
(when-not search-filter
|
||||||
{:on-cancel #(do
|
(re-frame/dispatch [:search/filter-changed ""])))
|
||||||
(re-frame/dispatch [:search/filter-changed nil])
|
:on-change (fn [text]
|
||||||
(hide-search!))
|
(re-frame/dispatch [:search/filter-changed text]))}])}))
|
||||||
:on-focus (fn [search-filter]
|
|
||||||
(when-not search-filter
|
|
||||||
(re-frame/dispatch [:search/filter-changed ""])))
|
|
||||||
:on-change (fn [text]
|
|
||||||
(re-frame/dispatch [:search/filter-changed text]))}]])))}))
|
|
||||||
|
|
||||||
(defn home-filtered-items-list
|
(defn home-filtered-items-list
|
||||||
[chats]
|
[chats]
|
||||||
|
|
|
@ -155,10 +155,13 @@
|
||||||
:tint-color :white})
|
:tint-color :white})
|
||||||
|
|
||||||
(def no-chats
|
(def no-chats
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:justify-content :center
|
:justify-content :center
|
||||||
:margin-horizontal 34})
|
:padding-horizontal 34
|
||||||
|
:align-self :stretch
|
||||||
|
:background-color :white
|
||||||
|
:transform [{:translateY (- search-input-height)}]})
|
||||||
|
|
||||||
(def no-chats-text
|
(def no-chats-text
|
||||||
{:text-align :center
|
{:text-align :center
|
||||||
|
|
|
@ -56,16 +56,18 @@
|
||||||
[components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})
|
[components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})
|
||||||
:label (i18n/label :t/invite-friends)}]]])
|
:label (i18n/label :t/invite-friends)}]]])
|
||||||
|
|
||||||
(defn home-items-view [_ _ _]
|
(defn home-items-view [_ _ _ search-input-state]
|
||||||
(let [previous-touch (reagent/atom nil)
|
(let [previous-touch (reagent/atom nil)
|
||||||
scrolling-from-top? (reagent/atom true)]
|
scrolling-from-top? (reagent/atom true)]
|
||||||
|
(filter.views/reset-height)
|
||||||
(fn [search-filter chats all-home-items]
|
(fn [search-filter chats all-home-items]
|
||||||
(if (not-empty search-filter)
|
(if (not-empty search-filter)
|
||||||
[filter.views/home-filtered-items-list chats]
|
[filter.views/home-filtered-items-list chats]
|
||||||
[react/view
|
[react/animated-view
|
||||||
(merge {:style {:flex 1}}
|
(merge {:style {:flex 1
|
||||||
(when (and @scrolling-from-top?
|
:background-color :white
|
||||||
(not (:show? @filter.views/search-input-state)))
|
:transform [{:translateY (:height @search-input-state)}]}}
|
||||||
|
(when @scrolling-from-top?
|
||||||
{:on-start-should-set-responder-capture
|
{:on-start-should-set-responder-capture
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [current-position (.-pageY (.-nativeEvent event))
|
(let [current-position (.-pageY (.-nativeEvent event))
|
||||||
|
@ -138,11 +140,11 @@
|
||||||
:else
|
:else
|
||||||
[react/view {:style {:flex 1}}
|
[react/view {:style {:flex 1}}
|
||||||
[connectivity/connectivity-view]
|
[connectivity/connectivity-view]
|
||||||
[filter.views/animated-search-input search-filter]
|
[filter.views/search-input-wrapper search-filter]
|
||||||
(if (and (not search-filter)
|
(if (and (not search-filter)
|
||||||
(empty? all-home-items))
|
(empty? all-home-items))
|
||||||
[home-empty-view]
|
[home-empty-view]
|
||||||
[home-items-view search-filter chats all-home-items])])]
|
[home-items-view search-filter chats all-home-items filter.views/search-input-state])])]
|
||||||
[home-action-button]]]))
|
[home-action-button]]]))
|
||||||
|
|
||||||
(views/defview home-wrapper []
|
(views/defview home-wrapper []
|
||||||
|
|
Loading…
Reference in New Issue