Implementation of Top Nav Component (#14094)
Parvesh Monu
GitHub
|
After Width: | Height: | Size: 806 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 625 B After Width: | Height: | Size: 913 B |
|
Before Width: | Height: | Size: 904 B After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 720 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 521 B After Width: | Height: | Size: 888 B |
|
Before Width: | Height: | Size: 677 B After Width: | Height: | Size: 1.2 KiB |
|
|
@ -175,7 +175,7 @@
|
|||
[_ _]
|
||||
(let [pressed (reagent/atom false)]
|
||||
(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]
|
||||
:or {type :primary
|
||||
size 40}}
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
type
|
||||
size
|
||||
disabled
|
||||
(get background-color state)
|
||||
(or override-background-color (get background-color state))
|
||||
(get border-color state)
|
||||
icon
|
||||
above
|
||||
|
|
|
|||
|
|
@ -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}}]))]]]))
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
[quo2.screens.selectors.disclaimer :as disclaimer]
|
||||
[quo2.screens.selectors.selectors :as selectors]
|
||||
[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.tabs.account-selector :as account-selector]
|
||||
[quo2.screens.tabs.segmented-tab :as segmented]
|
||||
|
|
@ -98,7 +99,10 @@
|
|||
:component messages-gap/preview-messages-gap}]
|
||||
:navigation [{:name :bottom-nav-tab
|
||||
: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
|
||||
:insets {:top false}
|
||||
:component activity-logs/preview-activity-logs}]
|
||||
|
|
|
|||
|
|
@ -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}]])
|
||||