diff --git a/src/status_im/ui/screens/home/filter/views.cljs b/src/status_im/ui/screens/home/filter/views.cljs index a04148fd61f0..d92faf7060a3 100644 --- a/src/status_im/ui/screens/home/filter/views.cljs +++ b/src/status_im/ui/screens/home/filter/views.cljs @@ -50,29 +50,32 @@ (defonce search-input-state (reagent/atom {:show? false - :height (animation/create-value 0)})) + :height (animation/create-value + (- styles/search-input-height))})) (defn show-search! [] - (swap! search-input-state assoc :show? true) (animation/start - (animation/timing (:height @search-input-state) - {:toValue styles/search-input-height - :duration 350 - :easing (.out (animation/easing) - (.-quad (animation/easing)))}))) + (animation/timing (:height @search-input-state) + {:toValue 0 + :duration 350 + :easing (.out (animation/easing) + (.-quad (animation/easing))) + :useNativeDriver true}))) + +(defn reset-height [] + (animation/set-value (:height @search-input-state) + (- styles/search-input-height))) (defn hide-search! [] - (utils/set-timeout - #(swap! search-input-state assoc :show? false) - 350) (animation/start - (animation/timing (:height @search-input-state) - {:toValue 0 - :duration 350 - :easing (.in (animation/easing) - (.-quad (animation/easing)))}))) + (animation/timing (:height @search-input-state) + {:toValue (- styles/search-input-height) + :duration 350 + :easing (.in (animation/easing) + (.-quad (animation/easing))) + :useNativeDriver true}))) (defn set-search-state-visible! [visible?] @@ -82,7 +85,7 @@ styles/search-input-height 0))) -(defn animated-search-input +(defn search-input-wrapper [search-filter] (reagent/create-class {:component-will-unmount @@ -92,20 +95,15 @@ (set-search-state-visible! true)) :reagent-render (fn [search-filter] - (let [{:keys [show? height]} @search-input-state] - (when (or show? - search-filter) - [react/animated-view - {:style {:height height}} - [search-input search-filter - {:on-cancel #(do - (re-frame/dispatch [:search/filter-changed nil]) - (hide-search!)) - :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]))}]])))})) + [search-input search-filter + {:on-cancel #(do + (re-frame/dispatch [:search/filter-changed nil]) + (hide-search!)) + :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 [chats] diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 04c894aa8c53..7d9330bb7e1d 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -155,10 +155,13 @@ :tint-color :white}) (def no-chats - {:flex 1 - :align-items :center - :justify-content :center - :margin-horizontal 34}) + {:flex 1 + :align-items :center + :justify-content :center + :padding-horizontal 34 + :align-self :stretch + :background-color :white + :transform [{:translateY (- search-input-height)}]}) (def no-chats-text {:text-align :center diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 791d27c17587..d72719058467 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -56,16 +56,18 @@ [components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)}) :label (i18n/label :t/invite-friends)}]]]) -(defn home-items-view [_ _ _] +(defn home-items-view [_ _ _ search-input-state] (let [previous-touch (reagent/atom nil) scrolling-from-top? (reagent/atom true)] + (filter.views/reset-height) (fn [search-filter chats all-home-items] (if (not-empty search-filter) [filter.views/home-filtered-items-list chats] - [react/view - (merge {:style {:flex 1}} - (when (and @scrolling-from-top? - (not (:show? @filter.views/search-input-state))) + [react/animated-view + (merge {:style {:flex 1 + :background-color :white + :transform [{:translateY (:height @search-input-state)}]}} + (when @scrolling-from-top? {:on-start-should-set-responder-capture (fn [event] (let [current-position (.-pageY (.-nativeEvent event)) @@ -138,11 +140,11 @@ :else [react/view {:style {:flex 1}} [connectivity/connectivity-view] - [filter.views/animated-search-input search-filter] + [filter.views/search-input-wrapper search-filter] (if (and (not search-filter) (empty? all-home-items)) [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]]])) (views/defview home-wrapper []