search input animation with nativeDriver

This commit is contained in:
Roman Volosovskyi 2019-06-21 21:58:03 +03:00
parent 7237dd510d
commit cd968cc507
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
3 changed files with 44 additions and 41 deletions

View File

@ -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]

View File

@ -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

View File

@ -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 []