feat: add drawers - action drawers component to quo2 library (#14157)
This commit is contained in:
parent
7f54427df4
commit
62c6a0ea72
Binary file not shown.
After Width: | Height: | Size: 334 B |
Binary file not shown.
After Width: | Height: | Size: 447 B |
|
@ -0,0 +1,68 @@
|
||||||
|
(ns quo2.components.drawers.action-drawers
|
||||||
|
(:require [status-im.ui.components.react :as react]
|
||||||
|
[quo.react-native :as rn]
|
||||||
|
[quo2.components.markdown.text :as text]
|
||||||
|
[quo2.components.icon :as icon]
|
||||||
|
[quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
|
(defn- get-icon-color [section]
|
||||||
|
(if (= section :bottom)
|
||||||
|
(colors/theme-colors colors/danger-50 colors/danger-60)
|
||||||
|
(colors/theme-colors colors/neutral-50 colors/neutral-40)))
|
||||||
|
|
||||||
|
(defn action [section]
|
||||||
|
(fn [{:keys [icon label sub-label right-icon on-press]}]
|
||||||
|
[rn/touchable-opacity {:on-press on-press}
|
||||||
|
[react/view {:style
|
||||||
|
{:flex 1
|
||||||
|
:height (if sub-label 56 47)
|
||||||
|
:margin-horizontal 20
|
||||||
|
:flex-direction :row}}
|
||||||
|
[react/view {:style
|
||||||
|
{:height 20
|
||||||
|
:margin-top :auto
|
||||||
|
:margin-bottom :auto
|
||||||
|
:margin-right 12
|
||||||
|
:width 20}}
|
||||||
|
[icon/icon icon
|
||||||
|
{:color (get-icon-color section)
|
||||||
|
:size 20}]]
|
||||||
|
[react/view
|
||||||
|
{:style
|
||||||
|
{:flex 1
|
||||||
|
:justify-content :center}}
|
||||||
|
[text/text
|
||||||
|
{:size :paragraph-1
|
||||||
|
:weight :medium
|
||||||
|
:style
|
||||||
|
{:color (when (= section :bottom)
|
||||||
|
(colors/theme-colors colors/danger-50 colors/danger-60))}}
|
||||||
|
label]
|
||||||
|
(when sub-label [text/text
|
||||||
|
{:size :paragraph-2
|
||||||
|
:style
|
||||||
|
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||||
|
sub-label])]
|
||||||
|
(when right-icon
|
||||||
|
[react/view {:style
|
||||||
|
{:height 20
|
||||||
|
:margin-top :auto
|
||||||
|
:margin-bottom :auto
|
||||||
|
:width 20}}
|
||||||
|
[icon/icon right-icon
|
||||||
|
{:color (get-icon-color section)
|
||||||
|
:size 20}]])]]))
|
||||||
|
|
||||||
|
(defn action-drawer [{:keys [actions actions-with-consequence]}]
|
||||||
|
[:<> {:style
|
||||||
|
{:flex 1}}
|
||||||
|
(map (action :top) actions)
|
||||||
|
(when actions-with-consequence
|
||||||
|
[:<>
|
||||||
|
[rn/view {:style {:border-top-width 1
|
||||||
|
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
|
||||||
|
:margin-top 8
|
||||||
|
:margin-bottom 7
|
||||||
|
:align-items :center
|
||||||
|
:flex-direction :row}}]
|
||||||
|
(map (action :bottom) actions-with-consequence)])])
|
|
@ -0,0 +1,59 @@
|
||||||
|
(ns quo2.screens.drawers.action-drawers
|
||||||
|
(:require [quo.previews.preview :as preview]
|
||||||
|
[quo.react-native :as rn]
|
||||||
|
[quo2.components.drawers.action-drawers :as quo2]
|
||||||
|
[quo2.components.buttons.button :as button]
|
||||||
|
[quo2.foundations.colors :as colors]
|
||||||
|
[status-im.utils.handlers :refer [>evt]]
|
||||||
|
[reagent.core :as reagent]))
|
||||||
|
|
||||||
|
(def descriptor [{:label "Muted?"
|
||||||
|
:key :muted?
|
||||||
|
:type :boolean}
|
||||||
|
{:label "Show red options?"
|
||||||
|
:key :show-red-options?
|
||||||
|
:type :boolean}])
|
||||||
|
|
||||||
|
(def options-with-consequences [{:icon :main-icons2/share-context
|
||||||
|
:label "Clear history"}])
|
||||||
|
|
||||||
|
(defn render-action-sheet [state]
|
||||||
|
[quo2/action-drawer {:actions-with-consequence (when (:show-red-options? @state) options-with-consequences)
|
||||||
|
:actions [{:icon :main-icons2/share-context
|
||||||
|
:label "View channel members and details"}
|
||||||
|
{:icon :main-icons2/communities
|
||||||
|
:label "Mark as read"}
|
||||||
|
{:icon :main-icons2/muted
|
||||||
|
:label (if (:muted? @state) "Unmute channel" "Mute channel")
|
||||||
|
:right-icon :main-icons2/chevron-right
|
||||||
|
:sub-label (when (:muted? @state) "Muted for 15 min")}
|
||||||
|
{:icon :main-icons2/scanner
|
||||||
|
:right-icon :main-icons2/chevron-right
|
||||||
|
:label "Fetch messages"}
|
||||||
|
{:icon :main-icons2/add-user
|
||||||
|
:label "Share link to the channel"}]}])
|
||||||
|
|
||||||
|
(defn cool-preview []
|
||||||
|
(let [state (reagent/atom {:muted? true
|
||||||
|
:show-red-options? true})]
|
||||||
|
(fn []
|
||||||
|
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||||
|
[rn/view {:padding-bottom 400}
|
||||||
|
[preview/customizer state descriptor]
|
||||||
|
[button/button
|
||||||
|
{:style {:margin-horizontal 40}
|
||||||
|
:on-press #(>evt [:bottom-sheet/show-sheet
|
||||||
|
{:content (constantly (render-action-sheet state))
|
||||||
|
:content-height 300}])}
|
||||||
|
"See in bottom sheet"]
|
||||||
|
[rn/view {:padding-vertical 60}
|
||||||
|
(render-action-sheet state)]]])))
|
||||||
|
(defn preview-action-drawers []
|
||||||
|
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||||
|
:flex 1}
|
||||||
|
|
||||||
|
[rn/flat-list {:flex 1
|
||||||
|
:nestedScrollEnabled true
|
||||||
|
:keyboardShouldPersistTaps :always
|
||||||
|
:header [cool-preview]
|
||||||
|
:key-fn (fn [_ index] (str "actions-drawers-" index))}]])
|
|
@ -18,6 +18,7 @@
|
||||||
[quo2.screens.community.community-card-view :as community-card]
|
[quo2.screens.community.community-card-view :as community-card]
|
||||||
[quo2.screens.dividers.divider-label :as divider-label]
|
[quo2.screens.dividers.divider-label :as divider-label]
|
||||||
[quo2.screens.dividers.new-messages :as new-messages]
|
[quo2.screens.dividers.new-messages :as new-messages]
|
||||||
|
[quo2.screens.drawers.action-drawers :as drawers]
|
||||||
[quo2.screens.dropdowns.dropdown :as dropdown]
|
[quo2.screens.dropdowns.dropdown :as dropdown]
|
||||||
[quo2.screens.info.info-message :as info-message]
|
[quo2.screens.info.info-message :as info-message]
|
||||||
[quo2.screens.info.information-box :as information-box]
|
[quo2.screens.info.information-box :as information-box]
|
||||||
|
@ -83,6 +84,9 @@
|
||||||
{:name :new-messages
|
{:name :new-messages
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component new-messages/preview-new-messages}]
|
:component new-messages/preview-new-messages}]
|
||||||
|
:drawers [{:name :action-drawers
|
||||||
|
:insets {:top false}
|
||||||
|
:component drawers/preview-action-drawers}]
|
||||||
:dropdowns [{:name :dropdown
|
:dropdowns [{:name :dropdown
|
||||||
:insets {:top false}
|
:insets {:top false}
|
||||||
:component dropdown/preview-dropdown}]
|
:component dropdown/preview-dropdown}]
|
||||||
|
|
|
@ -74,8 +74,7 @@
|
||||||
{:style
|
{:style
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:border-radius 20}}
|
:border-radius 20}}
|
||||||
[react/view (styles/community-cover-container 148)
|
[react/view (styles/community-cover-container 148)
|
||||||
|
|
||||||
[react/image
|
[react/image
|
||||||
{:source cover
|
{:source cover
|
||||||
:style {:position :relative
|
:style {:position :relative
|
||||||
|
|
Loading…
Reference in New Issue