status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-17 05:16:46 +00:00
Code Issues Projects Releases Wiki Activity

Buttons/Swap-Order-Button Component (#20119)

Browse Source
This commit is contained in:
Ajay Sivan 2024-05-22 17:33:13 +05:30 committed by GitHub
parent 8bd1c8de95
commit 05a09d1fa1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/quo/components/buttons/swap_order_button/component_spec.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns quo.components.buttons.swap-order-button.component-spec
(:require [quo.components.buttons.swap-order-button.view :as swap-order-button]
[test-helpers.component :as h]))
(h/describe "Buttons: Swap Order Button"
(h/test "should render correctly"
(h/render-with-theme-provider
[swap-order-button/view {:on-press identity}])
(h/is-truthy (h/get-by-label-text :swap-order-button)))
(h/test "should call on-press handler when pressed"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider
[swap-order-button/view {:on-press on-press}])
(h/fire-event :press (h/get-by-label-text :swap-order-button))
(h/was-called on-press)))
(h/test "should not call on-press handler when button is disabled"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider
[swap-order-button/view {:on-press on-press :disabled? true}])
(h/fire-event :press (h/get-by-label-text :swap-order-button))
(h/was-not-called on-press))))

11
src/quo/components/buttons/swap_order_button/schema.cljs Normal file
View File

@ -0,0 +1,11 @@
(ns quo.components.buttons.swap-order-button.schema)
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:disabled? {:optional true} [:maybe :boolean]]
[:on-press fn?]
[:container-style {:optional true} [:maybe :any]]]]]
:any])

18
src/quo/components/buttons/swap_order_button/style.cljs Normal file
View File

@ -0,0 +1,18 @@
(ns quo.components.buttons.swap-order-button.style
(:require [quo.foundations.colors :as colors]))
(defn container
[pressed? disabled? theme]
{:width 32
:height 32
:border-radius 10
:border-width 1
:opacity (if disabled? 0.3 1)
:align-items :center
:justify-content :center
:border-color (if pressed?
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
:background-color (if pressed?
(colors/theme-colors colors/neutral-5 colors/neutral-80 theme)
(colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme))})

28
src/quo/components/buttons/swap_order_button/view.cljs Normal file
View File

@ -0,0 +1,28 @@
(ns quo.components.buttons.swap-order-button.view
(:require [quo.components.buttons.swap-order-button.schema :as swap-order-button.schema]
[quo.components.buttons.swap-order-button.style :as style]
[quo.components.icon :as icon]
[quo.foundations.colors :as colors]
quo.theme
[react-native.core :as rn]
[schema.core :as schema]))
(defn view-internal
[{:keys [disabled? on-press container-style]}]
(let [theme (quo.theme/use-theme)
[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
{:style (merge (style/container pressed? disabled? theme)
container-style)
:accessibility-label :swap-order-button
:disabled disabled?
:on-press on-press
:on-press-in on-press-in
:on-press-out on-press-out}
[icon/icon :i/arrow-down
{:size 20
:color (colors/theme-colors colors/neutral-100 colors/white theme)}]]))
(def view (schema/instrument #'view-internal swap-order-button.schema/?schema))

2
src/quo/core.cljs
View File

@ -17,6 +17,7 @@
quo.components.buttons.logout-button.view
quo.components.buttons.predictive-keyboard.view
quo.components.buttons.slide-button.view
quo.components.buttons.swap-order-button.view
quo.components.buttons.wallet-button.view
quo.components.buttons.wallet-ctas.view
quo.components.calendar.calendar-day.view
@ -202,6 +203,7 @@
(def logout-button quo.components.buttons.logout-button.view/view)
(def predictive-keyboard quo.components.buttons.predictive-keyboard.view/view)
(def slide-button quo.components.buttons.slide-button.view/view)
(def swap-order-button quo.components.buttons.swap-order-button.view/view)
(def wallet-button quo.components.buttons.wallet-button.view/view)
(def wallet-ctas quo.components.buttons.wallet-ctas.view/view)

1
src/quo/core_spec.cljs
View File

@ -9,6 +9,7 @@
quo.components.buttons.logout-button.component-spec
quo.components.buttons.predictive-keyboard.component-spec
quo.components.buttons.slide-button.component-spec
quo.components.buttons.swap-order-button.component-spec
quo.components.buttons.wallet-button.component-spec
quo.components.buttons.wallet-ctas.component-spec
quo.components.calendar.calendar-day.component-spec

21
src/status_im/contexts/preview/quo/buttons/swap_order_button.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns status-im.contexts.preview.quo.buttons.swap-order-button
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:type :boolean
:key :disabled?}])
(defn view
[]
(let [[state set-state] (rn/use-state {:disabled? false})]
[preview/preview-container
{:state state
:set-state set-state
:descriptor descriptor}
[quo/swap-order-button
(assoc state
:on-press
#(js/alert "Pressed"))]]))

3
src/status_im/contexts/preview/quo/main.cljs
View File

@ -24,6 +24,7 @@
[status-im.contexts.preview.quo.buttons.predictive-keyboard :as
predictive-keyboard]
[status-im.contexts.preview.quo.buttons.slide-button :as slide-button]
[status-im.contexts.preview.quo.buttons.swap-order-button :as swap-order-button]
[status-im.contexts.preview.quo.buttons.wallet-button :as wallet-button]
[status-im.contexts.preview.quo.buttons.wallet-ctas :as wallet-ctas]
[status-im.contexts.preview.quo.calendar.calendar :as calendar]
@ -241,6 +242,8 @@
:component dynamic-button/view}
{:name :slide-button
:component slide-button/view}
{:name :swap-order-button
:component swap-order-button/view}
{:name :predictive-keyboard
:component predictive-keyboard/view}
{:name :wallet-button