Searchbar show\hide fixed
Signed-off-by: Volodymyr Kozieiev <vkjr.sp@gmail.com>
This commit is contained in:
Volodymyr Kozieiev
parent
bdbbcbb1da
commit
5c7dc2edc7
|
|
@ -11,6 +11,8 @@
|
|||
[re-frame.core :as re-frame]
|
||||
[status-im.ui.components.icons.vector-icons :as icons]))
|
||||
|
||||
(def animation-duration 150)
|
||||
|
||||
(defn search-input [_ {:keys [on-cancel on-focus on-change]}]
|
||||
(let [input-is-focused? (reagent/atom false)
|
||||
input-ref (reagent/atom nil)]
|
||||
|
|
@ -61,21 +63,18 @@
|
|||
(animation/start
|
||||
(animation/timing (:height @search-input-state)
|
||||
{:toValue 0
|
||||
:duration 350
|
||||
:duration animation-duration
|
||||
:easing (.out (animation/easing)
|
||||
(.-quad (animation/easing)))
|
||||
:useNativeDriver true})
|
||||
#(swap! search-input-state assoc :to-hide? true))))
|
||||
|
||||
(defn set-search-state-visible!
|
||||
[visible?]
|
||||
(swap! search-input-state assoc :show? visible?)
|
||||
(swap! search-input-state assoc :to-hide? visible?)
|
||||
(animation/set-value (:height @search-input-state)
|
||||
(if visible? 0 (- styles/search-input-height))))
|
||||
|
||||
(defn reset-height []
|
||||
(set-search-state-visible! false))
|
||||
(defn update-search-state!
|
||||
[]
|
||||
(let [visible? (:to-hide? @search-input-state)]
|
||||
(swap! search-input-state assoc :show? visible?)
|
||||
(animation/set-value (:height @search-input-state)
|
||||
(if visible? 0 (- styles/search-input-height)))))
|
||||
|
||||
(defn hide-search!
|
||||
[]
|
||||
|
|
@ -85,7 +84,7 @@
|
|||
(animation/start
|
||||
(animation/timing (:height @search-input-state)
|
||||
{:toValue (- styles/search-input-height)
|
||||
:duration 350
|
||||
:duration animation-duration
|
||||
:easing (.in (animation/easing)
|
||||
(.-quad (animation/easing)))
|
||||
:useNativeDriver true})
|
||||
|
|
@ -95,9 +94,9 @@
|
|||
[search-filter]
|
||||
(reagent/create-class
|
||||
{:component-will-unmount
|
||||
#(set-search-state-visible! (:to-hide? @search-input-state))
|
||||
#(update-search-state!)
|
||||
:component-did-mount
|
||||
#(set-search-state-visible! (:to-hide? @search-input-state))
|
||||
#(update-search-state!)
|
||||
:reagent-render
|
||||
(fn [search-filter]
|
||||
[search-input search-filter
|
||||
|
|
|
|||
|
|
@ -84,37 +84,16 @@
|
|||
[react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]])
|
||||
|
||||
(defn home-items-view [_ _ _ _ search-input-state]
|
||||
(let [previous-touch (reagent/atom nil)
|
||||
scrolling-from-top? (reagent/atom true)]
|
||||
(let [analyze-pos? (reagent/atom true)
|
||||
start-pos (reagent/atom 0)]
|
||||
(fn [search-filter chats all-home-items hide-home-tooltip?]
|
||||
(if search-filter
|
||||
[filter.views/home-filtered-items-list chats]
|
||||
[react/animated-view
|
||||
(merge {:style {:flex 1
|
||||
:background-color :white
|
||||
:margin-bottom (- styles/search-input-height)
|
||||
: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)}))
|
||||
{:style {:flex 1
|
||||
:background-color :white
|
||||
:margin-bottom (- styles/search-input-height)
|
||||
:transform [{:translateY (:height @search-input-state)}]}}
|
||||
(if (or (seq all-home-items) (not hide-home-tooltip?))
|
||||
[list/flat-list (merge {:data all-home-items
|
||||
:key-fn first
|
||||
|
|
@ -125,16 +104,24 @@
|
|||
[react/view {:height 68 :flex 1}]]
|
||||
:on-scroll-begin-drag
|
||||
(fn [e]
|
||||
(reset! scrolling-from-top?
|
||||
;; check if scrolling up from top of list
|
||||
(zero? (.-y (.-contentOffset (.-nativeEvent e))))))
|
||||
(reset! analyze-pos? true)
|
||||
(reset! start-pos (.-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
|
||||
(fn [home-item _]
|
||||
[inner-item/home-list-item home-item])})]
|
||||
[welcome-blank-page])
|
||||
(when (:to-hide? @search-input-state)
|
||||
[react/view {:width 1
|
||||
:height styles/search-input-height}])]))))
|
||||
[welcome-blank-page])]))))
|
||||
|
||||
(views/defview home-action-button [home-width]
|
||||
(views/letsubs [logging-in? [:multiaccounts/login]]
|
||||
|
|
|
|||
Loading…
Reference in New Issue