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

Searchbar show\hide fixed 

Signed-off-by: Volodymyr Kozieiev <vkjr.sp@gmail.com>
This commit is contained in:
Volodymyr Kozieiev 2019-12-16 18:13:51 +02:00
parent bdbbcbb1da
commit 5c7dc2edc7
No known key found for this signature in database
GPG Key ID: 82B04968DF4C0535
2 changed files with 33 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/status_im/ui/screens/home/filter/views.cljs
View File

@ -11,6 +11,8 @@
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.components.icons.vector-icons :as icons])) [status-im.ui.components.icons.vector-icons :as icons]))
(def animation-duration 150)
(defn search-input [_ {:keys [on-cancel on-focus on-change]}] (defn search-input [_ {:keys [on-cancel on-focus on-change]}]
(let [input-is-focused? (reagent/atom false) (let [input-is-focused? (reagent/atom false)
input-ref (reagent/atom nil)] input-ref (reagent/atom nil)]
@ -61,21 +63,18 @@
(animation/start (animation/start
(animation/timing (:height @search-input-state) (animation/timing (:height @search-input-state)
{:toValue 0 {:toValue 0
:duration 350 :duration animation-duration
:easing (.out (animation/easing) :easing (.out (animation/easing)
(.-quad (animation/easing))) (.-quad (animation/easing)))
:useNativeDriver true}) :useNativeDriver true})
#(swap! search-input-state assoc :to-hide? true)))) #(swap! search-input-state assoc :to-hide? true))))
(defn set-search-state-visible! (defn update-search-state!
[visible?] []
(swap! search-input-state assoc :show? visible?) (let [visible? (:to-hide? @search-input-state)]
(swap! search-input-state assoc :to-hide? visible?) (swap! search-input-state assoc :show? visible?)
(animation/set-value (:height @search-input-state) (animation/set-value (:height @search-input-state)
(if visible? 0 (- styles/search-input-height)))) (if visible? 0 (- styles/search-input-height)))))
(defn reset-height []
(set-search-state-visible! false))
(defn hide-search! (defn hide-search!
[] []
@ -85,7 +84,7 @@
(animation/start (animation/start
(animation/timing (:height @search-input-state) (animation/timing (:height @search-input-state)
{:toValue (- styles/search-input-height) {:toValue (- styles/search-input-height)
:duration 350 :duration animation-duration
:easing (.in (animation/easing) :easing (.in (animation/easing)
(.-quad (animation/easing))) (.-quad (animation/easing)))
:useNativeDriver true}) :useNativeDriver true})
@ -95,9 +94,9 @@
[search-filter] [search-filter]
(reagent/create-class (reagent/create-class
{:component-will-unmount {:component-will-unmount
#(set-search-state-visible! (:to-hide? @search-input-state)) #(update-search-state!)
:component-did-mount :component-did-mount
#(set-search-state-visible! (:to-hide? @search-input-state)) #(update-search-state!)
:reagent-render :reagent-render
(fn [search-filter] (fn [search-filter]
[search-input search-filter [search-input search-filter

55
src/status_im/ui/screens/home/views.cljs
View File

@ -84,37 +84,16 @@
[react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]]) [react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]])
(defn home-items-view [_ _ _ _ search-input-state] (defn home-items-view [_ _ _ _ search-input-state]
(let [previous-touch (reagent/atom nil) (let [analyze-pos? (reagent/atom true)
scrolling-from-top? (reagent/atom true)] start-pos (reagent/atom 0)]
(fn [search-filter chats all-home-items hide-home-tooltip?] (fn [search-filter chats all-home-items hide-home-tooltip?]
(if search-filter (if search-filter
[filter.views/home-filtered-items-list chats] [filter.views/home-filtered-items-list chats]
[react/animated-view [react/animated-view
(merge {:style {:flex 1 {:style {:flex 1
:background-color :white :background-color :white
:margin-bottom (- styles/search-input-height) :margin-bottom (- styles/search-input-height)
:transform [{:translateY (:height @search-input-state)}]}} :transform [{:translateY (:height @search-input-state)}]}}
(when @scrolling-from-top?
{:on-start-should-set-responder-capture
(fn [event]
(let [current-position (.-pageY (.-nativeEvent event))
current-timestamp (.-timestamp (.-nativeEvent event))]
(reset! previous-touch
[current-position current-timestamp]))
false)
:on-move-should-set-responder
(fn [event]
(let [current-position (.-pageY (.-nativeEvent event))
current-timestamp (.-timestamp (.-nativeEvent event))
[previous-position previous-timestamp] @previous-touch]
(when (and previous-position
(not (:show? @search-input-state))
(> 100 (- current-timestamp previous-timestamp))
(< 10 (- current-position
previous-position)))
(filter.views/show-search!)))
false)}))
(if (or (seq all-home-items) (not hide-home-tooltip?)) (if (or (seq all-home-items) (not hide-home-tooltip?))
[list/flat-list (merge {:data all-home-items [list/flat-list (merge {:data all-home-items
:key-fn first :key-fn first
@ -125,16 +104,24 @@
[react/view {:height 68 :flex 1}]] [react/view {:height 68 :flex 1}]]
:on-scroll-begin-drag :on-scroll-begin-drag
(fn [e] (fn [e]
(reset! scrolling-from-top? (reset! analyze-pos? true)
;; check if scrolling up from top of list (reset! start-pos (.-y (.-contentOffset (.-nativeEvent e)))))
(zero? (.-y (.-contentOffset (.-nativeEvent e)))))) :on-scroll-end-drag
(fn [e]
(reset! analyze-pos? false))
:on-scroll
(fn [e]
(let [y-pos (.-y (.-contentOffset (.-nativeEvent e)))
scroling-down? (> y-pos @start-pos)
scrolling-up-from-top? (< y-pos -20)]
(if (and @analyze-pos? scrolling-up-from-top?)
(filter.views/show-search!))
(if (and @analyze-pos? scroling-down?)
(filter.views/hide-search!))))
:render-fn :render-fn
(fn [home-item _] (fn [home-item _]
[inner-item/home-list-item home-item])})] [inner-item/home-list-item home-item])})]
[welcome-blank-page]) [welcome-blank-page])]))))
(when (:to-hide? @search-input-state)
[react/view {:width 1
:height styles/search-input-height}])]))))
(views/defview home-action-button [home-width] (views/defview home-action-button [home-width]
(views/letsubs [logging-in? [:multiaccounts/login]] (views/letsubs [logging-in? [:multiaccounts/login]]