diff --git a/src/quo/components/drawers/drawer_action/component_spec.cljs b/src/quo/components/drawers/drawer_action/component_spec.cljs index 2eb16da107..4153c842f6 100644 --- a/src/quo/components/drawers/drawer_action/component_spec.cljs +++ b/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 diff --git a/src/quo/components/drawers/drawer_action/schema.cljs b/src/quo/components/drawers/drawer_action/schema.cljs index 60d1cc9ded..db5f9b7dd3 100644 --- a/src/quo/components/drawers/drawer_action/schema.cljs +++ b/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]]]] diff --git a/src/quo/components/drawers/drawer_action/style.cljs b/src/quo/components/drawers/drawer_action/style.cljs index aba77c501b..296b0b80f3 100644 --- a/src/quo/components/drawers/drawer_action/style.cljs +++ b/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}) diff --git a/src/quo/components/drawers/drawer_action/view.cljs b/src/quo/components/drawers/drawer_action/view.cljs index 86ee77d074..69658ffc84 100644 --- a/src/quo/components/drawers/drawer_action/view.cljs +++ b/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)) diff --git a/src/status_im/contexts/preview/quo/drawers/drawer_action.cljs b/src/status_im/contexts/preview/quo/drawers/drawer_action.cljs index 5a2bbb690b..de54523bfc 100644 --- a/src/status_im/contexts/preview/quo/drawers/drawer_action.cljs +++ b/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]]))