chore(quo): implement drawer action component (#19289)
Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>
This commit is contained in:
parent
6c07fac28b
commit
3ee004afab
|
@ -0,0 +1,54 @@
|
|||
(ns quo.components.drawers.drawer-action.component-spec
|
||||
(:require
|
||||
[quo.components.drawers.drawer-action.view :as drawer-action]
|
||||
[quo.foundations.colors :as colors]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Drawers: drawer-action"
|
||||
(h/test "default render"
|
||||
(h/render-with-theme-provider [drawer-action/view {}])
|
||||
(h/is-truthy (h/query-by-label-text :container)))
|
||||
|
||||
(h/test "on-press-in changes internal state to :pressed"
|
||||
(h/render-with-theme-provider [drawer-action/view {}])
|
||||
(h/fire-event :on-press-in (h/get-by-label-text :container))
|
||||
(h/wait-for #(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor (colors/resolve-color :blue :light 5)})))
|
||||
|
||||
(h/test "render default action with state :selected"
|
||||
(h/render-with-theme-provider [drawer-action/view {:state :selected}])
|
||||
(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor (colors/resolve-color :blue :light 5)})
|
||||
(h/is-truthy (h/query-by-label-text :check-icon)))
|
||||
|
||||
(h/test "call on-press"
|
||||
(let [on-press (h/mock-fn)]
|
||||
(h/render-with-theme-provider [drawer-action/view {:on-press on-press}])
|
||||
(h/fire-event :on-press (h/get-by-label-text :container))
|
||||
(h/was-called on-press)))
|
||||
|
||||
|
||||
(h/test "render :arrow action"
|
||||
(h/render-with-theme-provider [drawer-action/view {:action :arrow}])
|
||||
(h/is-truthy (h/query-by-label-text :arrow-icon)))
|
||||
|
||||
(h/test "render :toggle action"
|
||||
(h/render-with-theme-provider [drawer-action/view {:action :toggle}])
|
||||
(h/is-truthy (h/query-by-label-text "toggle-off")))
|
||||
|
||||
(h/test "render :toggle action with state :selected"
|
||||
(h/render-with-theme-provider [drawer-action/view
|
||||
{:action :toggle
|
||||
:state :selected}])
|
||||
(h/is-truthy (h/query-by-label-text "toggle-on"))
|
||||
(h/has-style (h/query-by-label-text :container)
|
||||
{:backgroundColor :transparent}))
|
||||
|
||||
(h/test "render default action with icon, title, description"
|
||||
(h/render-with-theme-provider [drawer-action/view
|
||||
{:icon :i/contact
|
||||
:title "Check contact"
|
||||
:description "Just a small desc"}])
|
||||
(h/is-truthy (h/query-by-label-text :left-icon))
|
||||
(h/is-truthy (h/query-by-text "Check contact"))
|
||||
(h/is-truthy (h/query-by-text "Just a small desc"))))
|
|
@ -0,0 +1,16 @@
|
|||
(ns quo.components.drawers.drawer-action.schema)
|
||||
|
||||
(def ?schema
|
||||
[:=>
|
||||
[:cat
|
||||
[:map {:closed true}
|
||||
[:action {:optional true} [:maybe [:enum :arrow :toggle]]]
|
||||
[: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?]]
|
||||
[:customization-color {:optional true}
|
||||
[:maybe :schema.common/customization-color]]
|
||||
[:blur? {:optional true} [:maybe :boolean]]]]
|
||||
:any])
|
|
@ -0,0 +1,55 @@
|
|||
(ns quo.components.drawers.drawer-action.style
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(defn- background-color
|
||||
[{:keys [state action customization-color theme pressed? blur?]}]
|
||||
(let [checked? (and (= :selected state) (nil? action))]
|
||||
(cond
|
||||
(and (or checked? pressed?) blur?)
|
||||
colors/white-opa-5
|
||||
|
||||
(or pressed? checked?)
|
||||
(colors/resolve-color customization-color theme 5)
|
||||
|
||||
:else :transparent)))
|
||||
|
||||
(defn container
|
||||
[{:keys [description?] :as props}]
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:padding-vertical (if description? 8 13)
|
||||
:padding-horizontal 13
|
||||
:border-radius 12
|
||||
:background-color (background-color props)})
|
||||
|
||||
(defn text-container
|
||||
[]
|
||||
{:flex 1
|
||||
:margin-right 12})
|
||||
|
||||
(defn- neutral-color
|
||||
[theme blur?]
|
||||
(if blur?
|
||||
colors/white-70-blur
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
|
||||
(defn left-icon
|
||||
[]
|
||||
{:align-self :flex-start
|
||||
:margin-right 13
|
||||
:margin-top 1})
|
||||
|
||||
(defn icon-color
|
||||
[{:keys [theme blur?]}]
|
||||
(neutral-color theme blur?))
|
||||
|
||||
(defn desc
|
||||
[{:keys [theme blur?]}]
|
||||
{:color (neutral-color theme blur?)})
|
||||
|
||||
(defn check-color
|
||||
[{:keys [theme blur? customization-color]}]
|
||||
(if blur?
|
||||
colors/white-70-blur
|
||||
(colors/resolve-color customization-color theme)))
|
|
@ -0,0 +1,73 @@
|
|||
(ns quo.components.drawers.drawer-action.view
|
||||
(:require
|
||||
[quo.components.drawers.drawer-action.schema :as component-schema]
|
||||
[quo.components.drawers.drawer-action.style :as style]
|
||||
[quo.components.icon :as icon]
|
||||
[quo.components.markdown.text :as text]
|
||||
[quo.components.selectors.selectors.view :as selectors]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[schema.core :as schema]))
|
||||
|
||||
(defn view-internal
|
||||
[{:keys [action icon description state title on-press
|
||||
customization-color blur?]
|
||||
:or {customization-color :blue
|
||||
blur? false}}]
|
||||
(let [theme (theme/use-theme-value)
|
||||
[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
|
||||
:on-press-out on-press-out
|
||||
:style (style/container {:state state
|
||||
:action action
|
||||
:customization-color customization-color
|
||||
:theme theme
|
||||
:pressed? pressed?
|
||||
:description? (not-empty description)
|
||||
:blur? blur?})
|
||||
:accessibility-label :container}
|
||||
(when icon
|
||||
[icon/icon icon
|
||||
{:accessibility-label :left-icon
|
||||
:container-style (style/left-icon)
|
||||
:color (style/icon-color {:theme theme
|
||||
:blur? blur?})}])
|
||||
|
||||
[rn/view {:style (style/text-container)}
|
||||
[text/text {:weight :medium}
|
||||
title]
|
||||
|
||||
(when (seq description)
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style (style/desc {:theme theme
|
||||
:blur? blur?})}
|
||||
description])]
|
||||
|
||||
(cond
|
||||
(= action :toggle)
|
||||
[selectors/view
|
||||
{:theme theme
|
||||
:label-prefix "toggle"
|
||||
:customization-color customization-color
|
||||
:type :toggle
|
||||
:checked? (= state :selected)}]
|
||||
|
||||
(= action :arrow)
|
||||
[icon/icon :i/chevron-right
|
||||
{:accessibility-label :arrow-icon
|
||||
:color (style/icon-color {:theme theme
|
||||
:blur? blur?})}]
|
||||
|
||||
(= state :selected)
|
||||
[icon/icon :i/check
|
||||
{:accessibility-label :check-icon
|
||||
:color (style/check-color {:theme theme
|
||||
:blur? blur?
|
||||
:customization-color customization-color})}])]))
|
||||
|
||||
(def view (schema/instrument #'view-internal component-schema/?schema))
|
|
@ -48,6 +48,7 @@
|
|||
quo.components.drawers.action-drawers.view
|
||||
quo.components.drawers.bottom-actions.view
|
||||
quo.components.drawers.documentation-drawers.view
|
||||
quo.components.drawers.drawer-action.view
|
||||
quo.components.drawers.drawer-buttons.view
|
||||
quo.components.drawers.drawer-top.view
|
||||
quo.components.drawers.permission-context.view
|
||||
|
@ -250,6 +251,7 @@
|
|||
|
||||
;;;; Drawers
|
||||
(def action-drawer quo.components.drawers.action-drawers.view/action-drawer)
|
||||
(def drawer-action quo.components.drawers.drawer-action.view/view)
|
||||
(def documentation-drawers quo.components.drawers.documentation-drawers.view/view)
|
||||
(def drawer-buttons quo.components.drawers.drawer-buttons.view/view)
|
||||
(def drawer-top quo.components.drawers.drawer-top.view/view)
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
quo.components.drawers.action-drawers.component-spec
|
||||
quo.components.drawers.bottom-actions.component-spec
|
||||
quo.components.drawers.documentation-drawers.component-spec
|
||||
quo.components.drawers.drawer-action.component-spec
|
||||
quo.components.drawers.drawer-buttons.component-spec
|
||||
quo.components.drawers.drawer-top.component-spec
|
||||
quo.components.drawers.permission-context.component-spec
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
(ns status-im.contexts.preview.quo.drawers.drawer-action
|
||||
(:require
|
||||
[quo.core :as quo]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.contexts.preview.quo.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:key :title
|
||||
:type :text}
|
||||
{:key :state
|
||||
:type :select
|
||||
:options [{:key :selected}]}
|
||||
{:key :icon
|
||||
:type :select
|
||||
:options [{:key :i/placeholder}
|
||||
{:key :i/info}
|
||||
{:key :i/browser}]}
|
||||
{:key :action
|
||||
:type :select
|
||||
:options [{:key :arrow}
|
||||
{:key :toggle}]}
|
||||
{:key :description
|
||||
:type :text}
|
||||
{:key :blur?
|
||||
:type :boolean}
|
||||
(preview/customization-color-option)])
|
||||
|
||||
(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]])))
|
|
@ -58,6 +58,7 @@
|
|||
[status-im.contexts.preview.quo.drawers.bottom-actions :as bottom-actions]
|
||||
[status-im.contexts.preview.quo.drawers.documentation-drawers :as
|
||||
documentation-drawers]
|
||||
[status-im.contexts.preview.quo.drawers.drawer-action :as drawer-action]
|
||||
[status-im.contexts.preview.quo.drawers.drawer-buttons :as drawer-buttons]
|
||||
[status-im.contexts.preview.quo.drawers.drawer-top :as drawer-top]
|
||||
[status-im.contexts.preview.quo.drawers.permission-drawers :as
|
||||
|
@ -294,6 +295,8 @@
|
|||
:component action-drawers/view}
|
||||
{:name :documentation-drawer
|
||||
:component documentation-drawers/view}
|
||||
{:name :drawer-action
|
||||
:component drawer-action/view}
|
||||
{:name :drawer-buttons
|
||||
:component drawer-buttons/view}
|
||||
{:name :drawer-top
|
||||
|
|
Loading…
Reference in New Issue