feat: add drawers - action drawers component to quo2 library (#14157)

src/quo2/components/drawers/action_drawers.cljs

@@ -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)])])

src/quo2/screens/drawers/action_drawers.cljs

@@ -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))}]])

src/quo2/screens/main.cljs

@@ -18,6 +18,7 @@
             [quo2.screens.community.community-card-view :as community-card]
             [quo2.screens.dividers.divider-label :as divider-label]
             [quo2.screens.dividers.new-messages :as new-messages]
+            [quo2.screens.drawers.action-drawers :as drawers]
             [quo2.screens.dropdowns.dropdown :as dropdown]
             [quo2.screens.info.info-message :as info-message]
             [quo2.screens.info.information-box :as information-box]
@@ -83,6 +84,9 @@
               {:name      :new-messages
                :insets    {:top false}
                :component new-messages/preview-new-messages}]
+   :drawers [{:name      :action-drawers
+              :insets    {:top false}
+              :component drawers/preview-action-drawers}]
    :dropdowns [{:name      :dropdown
                 :insets    {:top false}
                 :component dropdown/preview-dropdown}]

src/status_im/ui/screens/communities/community_overview_redesign.cljs

@@ -75,7 +75,6 @@
     {:flex 1
      :border-radius   20}}
    [react/view (styles/community-cover-container 148)
-
     [react/image
      {:source      cover
       :style  {:position :relative