Drawer Action Component - Input action variant (#20383)

* Drawer action component

* Component tests

* PR review feedback

src/quo/components/drawers/drawer_action/component_spec.cljs

@@ -47,6 +47,14 @@
     (h/has-style (h/query-by-label-text :container)
                  {:backgroundColor :transparent}))
 
+  (h/test "render :input action"
+    (h/render-with-theme-provider
+     [drawer-action/view
+      {:action      :input
+       :input-props {:placeholder "Type something"}
+       :state       :selected}])
+    (h/is-truthy (h/query-by-label-text "input")))
+
   (h/test "render default action with icon, title, description"
     (h/render-with-theme-provider [drawer-action/view
                                    {:icon        :i/contact

src/quo/components/drawers/drawer_action/schema.cljs

@@ -6,12 +6,13 @@
     [:map {:closed true}
      [:accessibility-label {:optional true} [:maybe :keyword]]
      [:type {:optional true} [:maybe [:enum :main :danger]]]
-     [:action {:optional true} [:maybe [:enum :arrow :toggle]]]
+     [:action {:optional true} [:maybe [:enum :arrow :toggle :input]]]
      [:icon {:optional true} [:maybe :keyword]]
      [:description {:optional true} [:maybe :string]]
      [:state {:optional true} [:maybe [:enum :selected]]]
      [:title {:optional true} :string]
      [:on-press {:optional true} [:maybe fn?]]
+     [:input-props {:optional true} [:maybe :map]]
      [:customization-color {:optional true}
       [:maybe :schema.common/customization-color]]
      [:blur? {:optional true} [:maybe :boolean]]]]

src/quo/components/drawers/drawer_action/style.cljs

@@ -4,7 +4,7 @@
 
 (defn- background-color
   [{:keys [state action customization-color theme pressed? blur?]}]
-  (let [checked? (and (= :selected state) (nil? action))]
+  (let [checked? (and (= :selected state) (or (nil? action) (= action :input)))]
     (cond
       (and (or checked? pressed?) blur?)
       colors/white-opa-5
@@ -15,23 +15,25 @@
       :else :transparent)))
 
 (defn container
-  [{:keys [description?] :as props}]
-  {:flex-direction     :row
-   :align-items        :center
-   :padding-vertical   (if description? 8 13)
+  [{:keys [description? action state] :as props}]
+  {:padding-top        (if description? 8 13)
+   :padding-bottom     (if (and (= action :input)
+                                (= state :selected))
+                         12
+                         (if description? 8 13))
    :padding-horizontal 13
    :border-radius      12
+   :gap                8
    :background-color   (background-color props)})
 
-(defn text-container
-  []
+(def text-container
   {:flex         1
    :margin-right 12})
 
 (defn text
   [{:keys [theme blur? type]}]
   (let [base {:weight :medium}
-        theme-with-blur (if blur? :blue theme)
+        theme-with-blur (if blur? :blur theme)
         matcher [theme-with-blur type]
         color
         (case matcher
@@ -51,8 +53,7 @@
     colors/white-70-blur
     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
-(defn left-icon
-  []
+(def left-icon
   {:align-self   :flex-start
    :margin-right 13
    :margin-top   1})

src/quo/components/drawers/drawer_action/view.cljs

@@ -3,6 +3,7 @@
     [quo.components.drawers.drawer-action.schema :as component-schema]
     [quo.components.drawers.drawer-action.style :as style]
     [quo.components.icon :as icon]
+    [quo.components.inputs.input.view :as input]
     [quo.components.markdown.text :as text]
     [quo.components.selectors.selectors.view :as selectors]
     [quo.theme]
@@ -11,7 +12,7 @@
 
 (defn view-internal
   [{:keys       [action icon description state title on-press customization-color
-                 blur? accessibility-label]
+                 blur? accessibility-label input-props]
     action-type :type
     :or         {customization-color :blue
                  blur?               false}}]
@@ -20,6 +21,7 @@
         [pressed? set-pressed] (rn/use-state false)
         on-press-in            (rn/use-callback #(set-pressed true))
         on-press-out           (rn/use-callback #(set-pressed false))]
+
     [rn/pressable
      {:on-press            on-press
       :on-press-in         on-press-in
@@ -32,50 +34,59 @@
                                              :description?        (not-empty description)
                                              :blur?               blur?})
       :accessibility-label accessibility-label}
-     (when icon
-       [icon/icon icon
-        {:accessibility-label :left-icon
-         :container-style     (style/left-icon)
-         :color               (style/icon-color {:theme theme
-                                                 :type  action-type
-                                                 :blur? blur?})}])
-
      [rn/view
-      {:style (style/text-container)}
-      [text/text
-       (style/text {:theme theme
-                    :type  action-type
-                    :blur? blur?})
-       title]
+      {:style {:flex-direction :row
+               :align-items    :center}}
+      (when icon
+        [icon/icon icon
+         {:accessibility-label :left-icon
+          :container-style     style/left-icon
+          :color               (style/icon-color {:theme theme
+                                                  :type  action-type
+                                                  :blur? blur?})}])
 
-      (when (seq description)
-        [text/text
-         {:size  :paragraph-2
-          :style (style/desc {:theme theme
-                              :blur? blur?})}
-         description])]
+      [rn/view
+       {:style style/text-container}
+       [text/text
+        (style/text {:theme theme
+                     :type  action-type
+                     :blur? blur?})
+        title]
 
-     (cond
-       (= action :toggle)
-       [selectors/view
-        {:theme               theme
-         :label-prefix        "toggle"
-         :customization-color customization-color
-         :type                :toggle
-         :checked?            (= state :selected)}]
+       (when (seq description)
+         [text/text
+          {:size  :paragraph-2
+           :style (style/desc {:theme theme
+                               :blur? blur?})}
+          description])]
 
-       (= action :arrow)
-       [icon/icon :i/chevron-right
-        {:accessibility-label :arrow-icon
-         :color               (style/icon-color {:theme theme
-                                                 :type  action-type
-                                                 :blur? blur?})}]
+      (cond
+        (= action :toggle)
+        [selectors/view
+         {:theme               theme
+          :label-prefix        "toggle"
+          :customization-color customization-color
+          :type                :toggle
+          :checked?            (= state :selected)}]
 
-       (= state :selected)
-       [icon/icon :i/check
-        {:accessibility-label :check-icon
-         :color               (style/check-color {:theme               theme
-                                                  :blur?               blur?
-                                                  :customization-color customization-color})}])]))
+        (= action :arrow)
+        [icon/icon :i/chevron-right
+         {:accessibility-label :arrow-icon
+          :color               (style/icon-color {:theme theme
+                                                  :type  action-type
+                                                  :blur? blur?})}]
+
+        (= state :selected)
+        [icon/icon :i/check
+         {:accessibility-label :check-icon
+          :color               (style/check-color {:theme               theme
+                                                   :blur?               blur?
+                                                   :customization-color customization-color})}])]
+
+     (when (and (= action :input) (= state :selected))
+       [input/input
+        (assoc input-props
+               :blur?               blur?
+               :accessibility-label :input)])]))
 
 (def view (schema/instrument #'view-internal component-schema/?schema))

src/status_im/contexts/preview/quo/drawers/drawer_action.cljs

@@ -1,7 +1,7 @@
 (ns status-im.contexts.preview.quo.drawers.drawer-action
   (:require
     [quo.core :as quo]
-    [reagent.core :as reagent]
+    [react-native.core :as rn]
     [status-im.contexts.preview.quo.preview :as preview]))
 
 (def descriptor
@@ -18,7 +18,8 @@
    {:key     :action
     :type    :select
     :options [{:key :arrow}
-              {:key :toggle}]}
+              {:key :toggle}
+              {:key :input}]}
    {:key  :description
     :type :text}
    {:key  :blur?
@@ -27,15 +28,18 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:title               "Action"
-                             :description         "This is a description"
-                             :customization-color :blue
-                             :on-press            #(js/alert "Pressed!")})]
-    (fn []
-      [preview/preview-container
-       {:state                 state
-        :descriptor            descriptor
-        :blur?                 (:blur? @state)
-        :show-blur-background? true
-        :blur-dark-only?       true}
-       [quo/drawer-action @state]])))
+  (let [[state set-state] (rn/use-state {:title               "Action"
+                                         :description         "This is a description"
+                                         :customization-color :blue
+                                         :on-press            #(js/alert "Pressed!")
+                                         :input-props         {:placeholder "Type something"
+                                                               :right-icon  {:icon-name :i/placeholder
+                                                                             :style-fn  identity}}})]
+    [preview/preview-container
+     {:state                 state
+      :set-state             set-state
+      :descriptor            descriptor
+      :blur?                 (:blur? state)
+      :show-blur-background? true
+      :blur-dark-only?       true}
+     [quo/drawer-action state]]))