Implementation of Top Nav Component (#14094)

This commit is contained in:
Parvesh Monu 2022-10-01 02:55:41 +05:30 committed by GitHub
parent 7f1e83672e
commit 99b2809532
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 156 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 806 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 625 B

After

Width:  |  Height:  |  Size: 913 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 904 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 720 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 521 B

After

Width:  |  Height:  |  Size: 888 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -175,7 +175,7 @@
[_ _] [_ _]
(let [pressed (reagent/atom false)] (let [pressed (reagent/atom false)]
(fn [{:keys [on-press disabled type size before after above width (fn [{:keys [on-press disabled type size before after above width
override-theme override-theme override-background-color
on-long-press accessibility-label icon style] on-long-press accessibility-label icon style]
:or {type :primary :or {type :primary
size 40}} size 40}}
@ -205,7 +205,7 @@
type type
size size
disabled disabled
(get background-color state) (or override-background-color (get background-color state))
(get border-color state) (get border-color state)
icon icon
above above

View File

@ -0,0 +1,98 @@
(ns quo2.components.navigation.top-nav
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.counter.counter :as counter]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.avatars.user-avatar :as user-avatar]))
(defn- get-button-common-props [type]
(let [default? (= type :default)
dark? (colors/dark?)]
{:icon true
:size 32
:style {:margin-left 12}
:type (if default?
(if dark? :grey :dark-grey)
type)
:override-background-color (when (and dark? default?)
colors/neutral-90)}))
(defn- base-button [icon on-press accessibility-label button-common-props]
[quo2.button/button
(merge
{:on-press on-press
:accessibility-label accessibility-label}
button-common-props)
icon])
(defn top-nav
"[top-nav opts]
opts
{:type :default/:blurred/:shell
:new-notifications? true/false
:notification-indicator :unread-dot/:counter
:open-profile fn
:open-search fn
:open-scanner fn
:show-qr fn
:open-activity-center fn
:style override-style
:avatar user-avatar
:counter-label number}
"
[{:keys [type new-notifications? notification-indicator open-profile open-search
open-scanner show-qr open-activity-center style avatar counter-label]}]
(let [button-common-props (get-button-common-props type)]
[rn/view {:style (merge
{:height 56
:flex 1}
style)}
;; Left Section
[rn/touchable-without-feedback {:on-press open-profile}
[rn/view {:style {:position :absolute
:left 20
:top 12}}
[user-avatar/user-avatar
(merge
{:ring? true
:status-indicator? true
:size :small}
avatar)]]]
;; Right Section
[rn/view {:style {:position :absolute
:right 20
:top 12
:flex-direction :row}}
[base-button :main-icons2/search open-search :open-search-button button-common-props]
[base-button :main-icons2/scan open-scanner :open-scanner-button button-common-props]
[base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props]
[rn/view ;; Keep view instead of "[:<>" to make sure relative
;; position is calculated from this view instead of its parent
[rn/hole-view {:key new-notifications? ;; Key is required to force removal of holes
:holes (cond
(not new-notifications?) ;; No new notifications, remove holes
[]
(= notification-indicator :unread-dot)
[{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
:else
[{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
[base-button :main-icons2/activity-center open-activity-center
:open-activity-center-button button-common-props]]
(when new-notifications?
(if (= notification-indicator :counter)
[counter/counter {:outline false
:override-text-color colors/white
:override-bg-color colors/primary-50
:style {:position :absolute
:left 34
:top -6}}
counter-label]
[rn/view {:style {:width 8
:height 8
:border-radius 4
:top -2
:left 38
:position :absolute
:background-color colors/primary-50}}]))]]]))

View File

@ -30,6 +30,7 @@
[quo2.screens.selectors.disclaimer :as disclaimer] [quo2.screens.selectors.disclaimer :as disclaimer]
[quo2.screens.selectors.selectors :as selectors] [quo2.screens.selectors.selectors :as selectors]
[quo2.screens.switcher.switcher-cards :as switcher-cards] [quo2.screens.switcher.switcher-cards :as switcher-cards]
[quo2.screens.navigation.top-nav :as top-nav]
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab] [quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
[quo2.screens.tabs.account-selector :as account-selector] [quo2.screens.tabs.account-selector :as account-selector]
[quo2.screens.tabs.segmented-tab :as segmented] [quo2.screens.tabs.segmented-tab :as segmented]
@ -98,7 +99,10 @@
:component messages-gap/preview-messages-gap}] :component messages-gap/preview-messages-gap}]
:navigation [{:name :bottom-nav-tab :navigation [{:name :bottom-nav-tab
:insets {:top false} :insets {:top false}
:component bottom-nav-tab/preview-bottom-nav-tab}] :component bottom-nav-tab/preview-bottom-nav-tab}
{:name :top-nav
:insets {:top false}
:component top-nav/preview-top-nav}]
:notifications [{:name :activity-logs :notifications [{:name :activity-logs
:insets {:top false} :insets {:top false}
:component activity-logs/preview-activity-logs}] :component activity-logs/preview-activity-logs}]

View File

@ -0,0 +1,51 @@
(ns quo2.screens.navigation.top-nav
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.navigation.top-nav :as quo2]
[quo2.foundations.colors :as colors]))
(def descriptor [{:label "Type"
:key :type
:type :select
:options [{:key :default
:value "Default"}
{:key :blur-bg
:value "Blurred BG"}
{:key :shell
:value "Shell"}]}
{:label "New Notifications?"
:key :new-notifications?
:type :boolean}
{:label "Notification Indicator"
:key :notification-indicator
:type :select
:options [{:key :unread-dot
:value :unread-dot}
{:key :counter
:value :counter}]}
{:label "Counter Label"
:key :counter-label
:type :text}])
(defn cool-preview []
(let [state (reagent/atom {:type :default
:new-notifications? true
:notification-indicator :unread-dot
:counter-label 5})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:flex-direction :row
:align-items :center}
[quo2/top-nav @state (:value @state)]]]])))
(defn preview-top-nav []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])