Skip to content

Commit

Permalink
chore(quo): fix tabs component to be controllable
Browse files Browse the repository at this point in the history
  • Loading branch information
@J-Son89
J-Son89 committed May 21, 2024
1 parent e7c911f commit 82bc6d5
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 58 deletions.
22 changes: 22 additions & 0 deletions src/quo/components/tabs/tabs/schema.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
(ns quo.components.tabs.tabs.schema)

(def ?schema
[:=>
[:catn
[:props
[:map
[:default-active {:optional true} [:maybe :keyword]]
[:active-tab-id {:optional true} [:maybe :keyword]]
[:data {:optional true} [:maybe :map]]
[:fade-end-percentage {:optional true} :string]
[:fade-end? {:optional true} [:maybe :boolean]]
[:on-change {:optional true} [:maybe fn?]]
[:on-scroll {:optional true} [:maybe fn?]]
[:scroll-on-press? {:optional true} [:maybe :boolean]]
[:scrollable? {:optional true} [:maybe :boolean]]
[:style {:optional true} [:maybe :map]]
[:container-style {:optional true} [:maybe :map]]
[:size {:optional true} [:maybe :keyword]]
[:in-scroll-view? {:optional true} [:maybe :boolean]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]
:any]]])
30 changes: 19 additions & 11 deletions src/quo/components/tabs/tabs/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
(:require
[oops.core :refer [oget]]
[quo.components.tabs.tab.view :as tab]
[quo.components.tabs.tabs.schema :as component-schema]
[quo.components.tabs.tabs.style :as style]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[react-native.linear-gradient :as linear-gradient]
[react-native.masked-view :as masked-view]
[reagent.core :as reagent]
[schema.core :as schema]
[utils.collection :as utils.collection]
[utils.number]))

Expand Down Expand Up @@ -84,7 +86,7 @@
:on-press #(on-press % index)}
label]])

(defn view
(defn view-internal
" Common options (for scrollable and non-scrollable tabs):
- `blur?` Boolean passed down to `quo.components.tabs.tab/tab`.
Expand All @@ -93,7 +95,7 @@
- `size` 32/24
- `style` Style map passed to View wrapping tabs or to the FlatList when tabs
are scrollable.
- `active-tab-id` controllable value for the tabs.
Options for scrollable tabs:
- `fade-end-percentage` Percentage where fading starts relative to the total
layout width of the `flat-list` data.
Expand All @@ -105,15 +107,18 @@
(with animation enabled).
"
[{:keys [default-active data fade-end-percentage fade-end? on-change on-scroll scroll-on-press?
scrollable? style container-style size blur? in-scroll-view? customization-color]
scrollable? style container-style size blur? in-scroll-view? customization-color
active-tab-id]
:or {fade-end-percentage 0.8
fade-end? false
scrollable? false
scroll-on-press? false
size default-tab-size}
:as props}]
(let [[active-tab-id
set-active-tab-id] (rn/use-state default-active)
(let [[active-tab-internal-id
set-active-tab-internal-id] (rn/use-state default-active)
tab-id (or active-tab-id active-tab-internal-id)

[fading set-fading] (rn/use-state fade-end-percentage)
flat-list-ref (rn/use-ref-atom nil)
tabs-data (rn/use-memo (fn [] (filterv some? data))
Expand Down Expand Up @@ -143,11 +148,11 @@
{:animated false
:index
(utils.collection/first-index
#(= active-tab-id (:id %))
#(= tab-id (:id %))
tabs-data)}))))
[active-tab-id tabs-data])
[tab-id tabs-data])
on-tab-press (rn/use-callback (fn [id index]
(set-active-tab-id id)
(set-active-tab-internal-id id)
(when (and scroll-on-press? @flat-list-ref)
(.scrollToIndex ^js @flat-list-ref
#js
Expand All @@ -156,7 +161,8 @@
:viewPosition 0.5}))
(when on-change
(on-change id)))
[set-active-tab-id scroll-on-press? on-change])]
[set-active-tab-internal-id scroll-on-press?
on-change])]
(if scrollable?
[rn/view {:style {:margin-top (- (dec unread-count-offset))}}
[masked-view-wrapper
Expand All @@ -183,7 +189,7 @@
:on-scroll on-scroll
:on-layout set-initial-scroll-poisition
:render-fn tab-view
:render-data {:active-tab-id active-tab-id
:render-data {:active-tab-id tab-id
:blur? blur?
:customization-color customization-color
:number-of-items (count tabs-data)
Expand All @@ -194,11 +200,13 @@
(map-indexed (fn [index item]
^{:key (:id item)}
[tab-view item index nil
{:active-tab-id active-tab-id
{:active-tab-id tab-id
:blur? blur?
:customization-color customization-color
:number-of-items (count tabs-data)
:size size
:on-press on-tab-press
:style style}])
tabs-data)])))

(def view (schema/instrument #'view-internal component-schema/?schema))
95 changes: 48 additions & 47 deletions src/status_im/contexts/wallet/account/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,50 +24,51 @@
[]
(let [selected-tab (or (rf/sub [:wallet/account-tab]) first-tab-id)
{:keys [name color formatted-balance
watch-only?]} (rf/sub [:wallet/current-viewing-account])
customization-color (rf/sub [:profile/customization-color])]
[rn/view {:style {:flex 1}}
[account-switcher/view
{:type :wallet-networks
:on-press #(rf/dispatch [:wallet/close-account-page])}]
[quo/account-overview
{:container-style style/account-overview
:current-value formatted-balance
:account-name name
:account (if watch-only? :watched-address :default)
:customization-color color}]
(when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])
(when (not watch-only?)
[quo/wallet-ctas
{:container-style style/cta-buttons
:send-action (fn []
(rf/dispatch [:wallet/clean-send-data])
(rf/dispatch [:wallet/wizard-navigate-forward
{:start-flow? true
:flow-id :wallet-send-flow}]))
:receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address
{:status :receive}])
:buy-action #(rf/dispatch [:show-bottom-sheet
{:content buy-token/view}])
:bridge-action (fn []
(rf/dispatch [:wallet/clean-send-data])
(rf/dispatch [:wallet/wizard-navigate-forward
{:start-flow? true
:flow-id :wallet-bridge-flow}]))
:swap-action (when (ff/enabled? ::ff/wallet.swap)
#(rf/dispatch [:wallet/start-swap]))}])
[quo/tabs
{:style style/tabs
:size 32
:default-active selected-tab
:data (tabs-data watch-only?)
:on-change #(rf/dispatch [:wallet/select-account-tab %])
:scrollable? true
:scroll-on-press? true}]
[tabs/view {:selected-tab selected-tab}]
[quo/floating-shell-button
{:jump-to
{:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
:customization-color customization-color
:label (i18n/label :t/jump-to)}}
style/shell-button]]))
watch-only?]} (rf/sub [:wallet/current-viewing-account])
customization-color (rf/sub [:profile/customization-color])]
[rn/view {:style {:flex 1}}
[account-switcher/view
{:type :wallet-networks
:on-press #(rf/dispatch [:wallet/close-account-page])}]
[quo/account-overview
{:container-style style/account-overview
:current-value formatted-balance
:account-name name
:account (if watch-only? :watched-address :default)
:customization-color color}]
(when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])
(when (not watch-only?)
[quo/wallet-ctas
{:container-style style/cta-buttons
:send-action (fn []
(rf/dispatch [:wallet/clean-send-data])
(rf/dispatch [:wallet/wizard-navigate-forward
{:start-flow? true
:flow-id :wallet-send-flow}]))
:receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address
{:status :receive}])
:buy-action #(rf/dispatch [:show-bottom-sheet
{:content buy-token/view}])
:bridge-action (fn []
(rf/dispatch [:wallet/clean-send-data])
(rf/dispatch [:wallet/wizard-navigate-forward
{:start-flow? true
:flow-id :wallet-bridge-flow}]))
:swap-action (when (ff/enabled? ::ff/wallet.swap)
#(rf/dispatch [:wallet/start-swap]))}])
[quo/tabs
{:style style/tabs
:size 32
:default-active first-tab-id
:active-tab-id selected-tab
:data (tabs-data watch-only?)
:on-change #(rf/dispatch [:wallet/select-account-tab %])
:scrollable? true
:scroll-on-press? true}]
[tabs/view {:selected-tab selected-tab}]
[quo/floating-shell-button
{:jump-to
{:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
:customization-color customization-color
:label (i18n/label :t/jump-to)}}
style/shell-button]]))

0 comments on commit 82bc6d5

Please sign in to comment.