Skip to content

Commit

Permalink
some refactor based on feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
@briansztamfater
briansztamfater committed Sep 15, 2023
1 parent a8cba25 commit d171a56
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 84 deletions.
6 changes: 3 additions & 3 deletions src/quo2/components/dividers/divider_line/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
(:require [quo2.foundations.colors :as colors]))

(defn divider-line
[blur? theme]
[{:keys [blur? padding-top padding-bottom theme]}]
{:border-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:padding-top 12
:padding-bottom 8
:padding-top (when padding-top padding-top)
:padding-bottom (when padding-bottom padding-bottom)
:border-bottom-width 1})
4 changes: 2 additions & 2 deletions src/quo2/components/dividers/divider_line/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
[quo2.components.dividers.divider-line.style :as style]))

(defn- view-internal
[{:keys [blur? theme]}]
[rn/view {:style (style/divider-line blur? theme)}])
[props]
[rn/view {:style (style/divider-line props)}])

(def view (quo.theme/with-theme view-internal))
52 changes: 25 additions & 27 deletions src/quo2/components/tabs/tabs/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,7 @@
on-change
scroll-on-press?
size
style
]}]
style]}]
[rn/view
{:style (style/tab {:size size
:default-tab-size default-tab-size
Expand Down Expand Up @@ -160,36 +159,36 @@
:size)
(when scroll-on-press?
{:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
{:ref #(reset! flat-list-ref %)
:style style
{:ref #(reset! flat-list-ref %)
:style style
;; The padding-top workaround is needed because on Android
;; {:overflow :visible} doesn't work on components inheriting
;; from ScrollView (e.g. FlatList). There are open issues, here's
;; just one about this topic:
;; https://github.com/facebook/react-native/issues/31218
:content-container-style
(assoc container-style :padding-top (dec unread-count-offset))
:horizontal true
:scroll-event-throttle 64
(assoc container-style :padding-top (dec unread-count-offset))
:horizontal true
:scroll-event-throttle 64
:shows-horizontal-scroll-indicator false
:data data
:key-fn (comp str :id)
:on-scroll-to-index-failed identity
:on-scroll (partial on-scroll-handler
{:fade-end-percentage fade-end-percentage
:fade-end? fade-end?
:fading fading
:on-scroll on-scroll})
:render-fn tab-view
:render-data {:active-tab-id active-tab-id
:blur? blur?
:customization-color customization-color
:flat-list-ref flat-list-ref
:number-of-items (count data)
:on-change on-change
:scroll-on-press? scroll-on-press?
:size size
:style style}})]]]
:data data
:key-fn (comp str :id)
:on-scroll-to-index-failed identity
:on-scroll (partial on-scroll-handler
{:fade-end-percentage fade-end-percentage
:fade-end? fade-end?
:fading fading
:on-scroll on-scroll})
:render-fn tab-view
:render-data {:active-tab-id active-tab-id
:blur? blur?
:customization-color customization-color
:flat-list-ref flat-list-ref
:number-of-items (count data)
:on-change on-change
:scroll-on-press? scroll-on-press?
:size size
:style style}})]]]
[rn/view (merge style {:flex-direction :row})
(map-indexed (fn [index item]
^{:key (:id item)}
Expand All @@ -200,6 +199,5 @@
:number-of-items (count data)
:on-change on-change
:size size
:style style}
])
:style style}])
data)]))))
8 changes: 1 addition & 7 deletions src/status_im2/contexts/wallet/send/select_address/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
(ns status-im2.contexts.wallet.send.select-address.style
(:require [quo2.foundations.colors :as colors]))
(ns status-im2.contexts.wallet.send.select-address.style)

(defn container
[margin-top]
Expand All @@ -10,11 +9,6 @@
{:margin-horizontal 20
:margin-vertical 12})

(defn divider
[theme]
{:border-top-width 1
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})

(def tabs
{:padding-top 20
:padding-bottom 12})
Expand Down
95 changes: 50 additions & 45 deletions src/status_im2/contexts/wallet/send/select_address/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,77 +10,82 @@
[reagent.core :as reagent]))

(def tabs-data
[{:id :recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
{:id :saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
{:id :contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
{:id :my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])
[{:id :tab/recent :label (i18n/label :t/recent) :accessibility-label :recent-tab}
{:id :tab/saved :label (i18n/label :t/saved) :accessibility-label :saved-tab}
{:id :tab/contacts :label (i18n/label :t/contacts) :accessibility-label :contacts-tab}
{:id :tab/my-accounts :label (i18n/label :t/my-accounts) :accessibility-label :my-accounts-tab}])

(defn- tab-view
[selected-tab]
(case selected-tab
:recent [quo/empty-state
{:title (i18n/label :t/no-recent-transactions)
:description (i18n/label :t/make-one-it-is-easy-we-promise)
:placeholder? true
:container-style style/empty-container-style}]
:saved [quo/empty-state
{:title (i18n/label :t/no-saved-addresses)
:description (i18n/label :t/you-like-to-type-43-characters)
:placeholder? true
:container-style style/empty-container-style}]
:contacts [quo/empty-state
{:title (i18n/label :t/no-contacts)
:description (i18n/label :t/no-contacts-description)
:placeholder? true
:container-style style/empty-container-style}]
:my-accounts [quo/empty-state
{:title (i18n/label :t/no-other-accounts)
:description (i18n/label :t/here-is-a-cat-in-a-box-instead)
:placeholder? true
:container-style style/empty-container-style}]))
:tab/recent [quo/empty-state
{:title (i18n/label :t/no-recent-transactions)
:description (i18n/label :t/make-one-it-is-easy-we-promise)
:placeholder? true
:container-style style/empty-container-style}]
:tab/saved [quo/empty-state
{:title (i18n/label :t/no-saved-addresses)
:description (i18n/label :t/you-like-to-type-43-characters)
:placeholder? true
:container-style style/empty-container-style}]
:tab/contacts [quo/empty-state
{:title (i18n/label :t/no-contacts)
:description (i18n/label :t/no-contacts-description)
:placeholder? true
:container-style style/empty-container-style}]
:tab/my-accounts [quo/empty-state
{:title (i18n/label :t/no-other-accounts)
:description (i18n/label :t/here-is-a-cat-in-a-box-instead)
:placeholder? true
:container-style style/empty-container-style}]))

(defn- address-input
[]
(let [timer (atom nil)
valid-ens? (reagent/atom false)
input-value (atom "")]
[quo/address-input
{:on-scan #(js/alert "Not implemented yet")
:ens-regex constants/regx-ens
:on-detect-ens
(fn [_]
(reset! valid-ens? false)
(when @timer (js/clearTimeout @timer))
(reset! timer (js/setTimeout #(reset! valid-ens? true) 2000)))
:on-change-text #(reset! input-value %)
:valid-ens? @valid-ens?}]))

(defn- view-internal
[]
(let [margin-top (safe-area/get-top)
timer (atom nil)
valid-ens? (reagent/atom false)
input-value (atom "")
selected-tab (reagent/atom (:id (first tabs-data)))]
(fn [{:keys [theme]}]
(let [margin-top (safe-area/get-top)
selected-tab (reagent/atom (:id (first tabs-data)))
on-close #(rf/dispatch [:navigate-back])
on-change-tab #(reset! selected-tab %)]
(fn []
[rn/scroll-view
{:content-container-style (style/container margin-top)
:keyboard-should-persist-taps :never
:scroll-enabled false}
[quo/page-nav
{:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])
:on-press on-close
:accessibility-label :top-bar
:right-side :account-switcher}]
[quo/text-combinations
{:title (i18n/label :t/send-to)
:container-style style/title-container
:title-accessibility-label :title-label}]
[quo/address-input
{:on-scan #(js/alert "Not implemented yet")
:ens-regex constants/regx-ens
:on-detect-ens (fn [_]
(reset! valid-ens? false)
(when @timer
(js/clearTimeout @timer))
(reset! timer (js/setTimeout #(reset! valid-ens? true)
2000)))
:on-change-text #(reset! input-value %)
:valid-ens? @valid-ens?}]
[rn/view {:style (style/divider theme)}]
[address-input]
[quo/divider-line]
[quo/tabs
{:style style/tabs
:content-style style/tabs-content
:container-style style/tabs-content
:size 32
:default-active @selected-tab
:data tabs-data
:scrollable? true
:scroll-on-press? true
:on-change #(reset! selected-tab %)}]
:on-change on-change-tab}]
[tab-view @selected-tab]])))

(def view (quo.theme/with-theme view-internal))

0 comments on commit d171a56

Please sign in to comment.