status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Drawer Action Component - Input action variant (#20383) 

* Drawer action component

* Component tests

* PR review feedback
This commit is contained in:
Ajay Sivan 2024-06-11 16:40:51 +05:30 committed by GitHub
parent 48f00f17a9
commit f226f0db18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 91 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/quo/components/drawers/drawer_action/component_spec.cljs
View File

@ -47,6 +47,14 @@
(h/has-style (h/query-by-label-text :container) (h/has-style (h/query-by-label-text :container)
{:backgroundColor :transparent})) {: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/test "render default action with icon, title, description"
(h/render-with-theme-provider [drawer-action/view (h/render-with-theme-provider [drawer-action/view
{:icon :i/contact {:icon :i/contact

3
src/quo/components/drawers/drawer_action/schema.cljs
View File

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

21
src/quo/components/drawers/drawer_action/style.cljs
View File

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

93
src/quo/components/drawers/drawer_action/view.cljs
View File

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

32
src/status_im/contexts/preview/quo/drawers/drawer_action.cljs
View File

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