diff --git a/src/quo/components/tabs/tabs/schema.cljs b/src/quo/components/tabs/tabs/schema.cljs new file mode 100644 index 000000000000..e1aba38b37c4 --- /dev/null +++ b/src/quo/components/tabs/tabs/schema.cljs @@ -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]]]) diff --git a/src/quo/components/tabs/tabs/view.cljs b/src/quo/components/tabs/tabs/view.cljs index 74b8cb0451a2..ae096b62a21e 100644 --- a/src/quo/components/tabs/tabs/view.cljs +++ b/src/quo/components/tabs/tabs/view.cljs @@ -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])) @@ -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`. @@ -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. @@ -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)) @@ -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 @@ -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 @@ -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) @@ -194,7 +200,7 @@ (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) @@ -202,3 +208,5 @@ :on-press on-tab-press :style style}]) tabs-data)]))) + +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/status_im/contexts/wallet/account/view.cljs b/src/status_im/contexts/wallet/account/view.cljs index 246699378d84..b2862068e2dd 100644 --- a/src/status_im/contexts/wallet/account/view.cljs +++ b/src/status_im/contexts/wallet/account/view.cljs @@ -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]]))