Skip to content

Commit

Permalink
componentizied input-search and search in set currency
Browse files Browse the repository at this point in the history
  • Loading branch information
@tbenr
tbenr committed Jan 24, 2020
1 parent bddf3fa commit 42a69e7
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 84 deletions.
7 changes: 0 additions & 7 deletions src/status_im/events.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1233,13 +1233,6 @@
#(when ens-name
(contact/name-verified % public-key ens-name))))))

;; search module

(handlers/register-handler-fx
:search/filter-changed
(fn [cofx [_ search-filter]]
(search/filter-changed cofx search-filter)))

;; pairing module

(handlers/register-handler-fx
Expand Down
9 changes: 8 additions & 1 deletion src/status_im/search/core.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
(ns status-im.search.core
(:require [status-im.utils.fx :as fx]))

(fx/defn filter-changed [cofx search-filter]
(fx/defn filter-changed
{:events [:search/filter-changed]}
[cofx search-filter]
{:db (assoc-in (:db cofx) [:ui/search :filter] search-filter)})

(fx/defn currency-filter-changed
{:events [:search/currency-filter-changed]}
[cofx search-filter]
{:db (assoc-in (:db cofx) [:ui/search :currency-filter] search-filter)})
16 changes: 16 additions & 0 deletions src/status_im/subs.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,12 @@
(fn [search]
(get search :filter)))

(re-frame/reg-sub
:search/currency-filter
:<- [:ui/search]
(fn [search]
(get search :currency-filter)))

(defn- node-version [web3-node-version]
(or web3-node-version "N/A"))

Expand Down Expand Up @@ -1817,6 +1823,16 @@
(fn [[chats search-filter]]
(apply-filter search-filter chats extract-chat-attributes)))

(defn extract-currency-attributes [currency]
(let [{:keys [code display-name]} (val currency)]
[code display-name]))

(re-frame/reg-sub
:search/filtered-currencies
:<- [:search/currency-filter]
(fn [search-currency-filter]
(apply-filter search-currency-filter constants/currencies extract-currency-attributes)))

;; TRIBUTE TO TALK
(re-frame/reg-sub
:tribute-to-talk/settings
Expand Down
27 changes: 27 additions & 0 deletions src/status_im/ui/components/search_input/styles.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
(ns status-im.ui.components.search-input.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles]))

(styles/def search-input
{:flex 1
:android {:margin 0
:padding 0}})

(def search-input-height 56)

(def search-container
{:height search-input-height
:flex-direction :row
:padding-horizontal 16
:background-color colors/white
:align-items :center
:justify-content :center})

(def search-input-container
{:background-color colors/gray-lighter
:flex 1
:flex-direction :row
:height 36
:align-items :center
:justify-content :center
:border-radius 8})
43 changes: 43 additions & 0 deletions src/status_im/ui/components/search_input/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
(ns status-im.ui.components.search-input.view
(:require-macros [status-im.utils.views :as views])
(:require [reagent.core :as reagent]
[status-im.i18n :as i18n]
[status-im.ui.components.react :as react]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.search-input.styles :as styles]
[status-im.ui.components.icons.vector-icons :as icons]))

(views/defview search-input [{:keys [on-cancel on-focus on-change search-active? search-container-style search-filter]}]
(views/letsubs
[input-ref (reagent/atom nil)]
[react/view {:style (or search-container-style styles/search-container)}
[react/view {:style styles/search-input-container}
[icons/icon :main-icons/search {:color colors/gray
:container-style {:margin-left 6
:margin-right 2}}]
[react/text-input {:placeholder (i18n/label :t/search)
:blur-on-submit true
:multiline false
:ref #(reset! input-ref %)
:style styles/search-input
:default-value search-filter
:on-focus #(do
(when on-focus
(on-focus search-filter))
(reset! search-active? true))
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(when on-change
(on-change text))))}]]
(when @search-active?
[react/touchable-highlight
{:on-press (fn []
(.clear @input-ref)
(.blur @input-ref)
(when on-cancel
(on-cancel))
(reset! search-active? false))
:style {:margin-left 16}}
[react/text {:style {:color colors/blue}}
(i18n/label :t/cancel)]])]))
30 changes: 22 additions & 8 deletions src/status_im/ui/screens/currency_settings/views.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
(ns status-im.ui.screens.currency-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[reagent.core :as reagent]
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.currency-settings.styles :as styles]
[status-im.constants :as constants]
[status-im.ui.components.topbar :as topbar]))
[status-im.ui.components.topbar :as topbar]
[status-im.ui.components.search-input.view :as search-input]))

(defonce search-active? (reagent/atom false))

(defn render-currency [current-currency-id]
(fn [{:keys [id code display-name] :as currency}]
(fn [{:keys [id code display-name]}]
(let [selected? (= id current-currency-id)]
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:wallet.settings.ui/currency-selected id])
Expand All @@ -24,13 +25,26 @@
[vector-icons/icon :main-icons/check {:color :active}])]])))

(views/defview currency-settings []
(views/letsubs [currency-id [:wallet.settings/currency]]
(views/letsubs [currency-id [:wallet.settings/currency]
filtered-currencies [:search/filtered-currencies]]
{:component-will-unmount #(do
(re-frame/dispatch [:search/currency-filter-changed ""])
(reset! search-active? false))}
[react/view {:flex 1}
[topbar/topbar {:title :t/main-currency}]
[react/view styles/wrapper
[list/flat-list {:data (->> constants/currencies
[search-input/search-input
{:search-active? search-active?
:on-cancel #(re-frame/dispatch [:search/currency-filter-changed nil])
:on-focus (fn [search-filter]
(when-not search-filter
(re-frame/dispatch [:search/currency-filter-changed ""])))
:on-change (fn [text]
(re-frame/dispatch [:search/currency-filter-changed text]))}]
[list/flat-list {:data (->> filtered-currencies
vals
(sort #(compare (:code %1) (:code %2))))
:key-fn :code
:separator (profile.components/settings-item-separator)
:render-fn (render-currency currency-id)}]]]))
:render-fn (render-currency currency-id)
:keyboardShouldPersistTaps :always}]]]))
26 changes: 3 additions & 23 deletions src/status_im/ui/screens/home/styles.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
(ns status-im.ui.screens.home.styles
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.styles :as styles]
[status-im.ui.components.search-input.styles :as search-input.styles]
[status-im.utils.platform :as platform]))

(defn toolbar []
Expand All @@ -22,35 +23,14 @@
:color colors/gray
:desktop {:max-height 20}})

(def search-input-height 56)

(def search-container
(merge
{:height search-input-height
:flex-direction :row
:padding-horizontal 16
:background-color colors/white
:align-items :center
:justify-content :center}
search-input.styles/search-container
(when platform/ios?
{:position :absolute
:top (- search-input-height)
:top (- search-input.styles/search-input-height)
:width "100%"})))

(def search-input-container
{:background-color colors/gray-lighter
:flex 1
:flex-direction :row
:height 36
:align-items :center
:justify-content :center
:border-radius 8})

(styles/def search-input
{:flex 1
:android {:margin 0
:padding 0}})

(def filter-section-title
{:margin-left 16
:margin-top 14
Expand Down
59 changes: 14 additions & 45 deletions src/status_im/ui/screens/home/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
[status-im.constants :as constants]
[status-im.ui.components.colors :as colors]
[status-im.ui.screens.add-new.new-public-chat.view :as new-public-chat]
[status-im.ui.components.button :as button])
[status-im.ui.components.button :as button]
[status-im.ui.components.search-input.view :as search-input]
[status-im.ui.components.search-input.styles :as search-input.styles])
(:require-macros [status-im.utils.views :as views]))

(defonce search-active? (reagent/atom false))
Expand Down Expand Up @@ -91,45 +93,12 @@
[home-tooltip-view])
[react/view {:height 68 :flex 1}]]))

(views/defview search-input [{:keys [on-cancel on-focus on-change]}]
(views/letsubs
[{:keys [search-filter]} [:home-items]
input-ref (reagent/atom nil)]
[react/view {:style styles/search-container}
[react/view {:style styles/search-input-container}
[icons/icon :main-icons/search {:color colors/gray
:container-style {:margin-left 6
:margin-right 2}}]
[react/text-input {:placeholder (i18n/label :t/search)
:blur-on-submit true
:multiline false
:ref #(reset! input-ref %)
:style styles/search-input
:default-value search-filter
:on-focus #(do
(when on-focus
(on-focus search-filter))
(reset! search-active? true))
:on-change (fn [e]
(let [native-event (.-nativeEvent e)
text (.-text native-event)]
(when on-change
(on-change text))))}]]
(when @search-active?
[react/touchable-highlight
{:on-press (fn []
(.clear @input-ref)
(.blur @input-ref)
(when on-cancel
(on-cancel))
(reset! search-active? false))
:style {:margin-left 16}}
[react/text {:style {:color colors/blue}}
(i18n/label :t/cancel)]])]))

(defn search-input-wrapper []
[search-input
{:on-cancel #(re-frame/dispatch [:search/filter-changed nil])
(defn search-input-wrapper [search-filter]
[search-input/search-input
{:search-active? search-active?
:search-container-style styles/search-container
:search-filter search-filter
:on-cancel #(re-frame/dispatch [:search/filter-changed nil])
:on-focus (fn [search-filter]
(when-not search-filter
(re-frame/dispatch [:search/filter-changed ""])))
Expand All @@ -151,7 +120,7 @@

(views/defview home-filtered-items-list []
(views/letsubs
[{:keys [chats all-home-items]} [:home-items]
[{:keys [chats all-home-items search-filter]} [:home-items]
{:keys [hide-home-tooltip?]} [:multiaccount]]
(let [list-ref (reagent/atom nil)]
[list/section-list
Expand All @@ -164,19 +133,19 @@
:keyboard-should-persist-taps :always
:ref #(reset! list-ref %)
:footer [chat-list-footer hide-home-tooltip?]
:contentInset {:top styles/search-input-height}
:contentInset {:top search-input.styles/search-input-height}
:render-section-header-fn (fn [data] [react/view])
:render-section-footer-fn section-footer
:render-fn (fn [home-item]
[inner-item/home-list-item home-item])
:header (when (or @search-active? (not-empty all-home-items))
[search-input-wrapper])
[search-input-wrapper search-filter])
:on-scroll-end-drag
(fn [e]
(let [y (-> e .-nativeEvent .-contentOffset .-y)
hide-searchbar? (cond
platform/ios? (and (neg? y) (> y (- (/ styles/search-input-height 2))))
platform/android? (and (< y styles/search-input-height) (> y (/ styles/search-input-height 2))))]
platform/ios? (and (neg? y) (> y (- (/ search-input.styles/search-input-height 2))))
platform/android? (and (< y search-input.styles/search-input-height) (> y (/ search-input.styles/search-input-height 2))))]
(if hide-searchbar?
(.scrollToLocation @list-ref #js {:sectionIndex 0 :itemIndex 0}))))})])))

Expand Down

0 comments on commit 42a69e7

Please sign in to comment.