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

feat: step component (#15711)

This commit is contained in:
yqrashawn 2023-04-21 20:53:58 +08:00 committed by GitHub
parent 3bad3324ae
commit 4d029f06e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 149 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo2/components/counter/counter.cljs
View File

@ -4,7 +4,7 @@
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
[utils.number :as utils-number]))
[utils.number]))
(def themes
{:light {:default colors/primary-50
@ -31,7 +31,7 @@
(= type :default))
colors/white
colors/neutral-100))
value (utils-number/parse-int value)
value (utils.number/parse-int value)
label (if (> value max-value)
(str max-value "+")
(str value))

19
src/quo2/components/counter/step/component_spec.cljs Normal file
View File

@ -0,0 +1,19 @@
(ns quo2.components.counter.step.component-spec
(:require [quo2.components.counter.step.view :as step]
[test-helpers.component :as h]))
(h/describe "step component"
(h/test "default render of step component"
(h/render [step/step {} nil])
(-> (h/expect (h/query-by-label-text :step-counter))
(h/is-truthy)))
(h/test "renders step with a string value"
(h/render [step/step {} "1"])
(-> (h/expect (h/get-by-text "1"))
(h/is-truthy)))
(h/test "renders step with an integer value"
(h/render [step/step {} 1])
(-> (h/expect (h/get-by-text "1"))
(h/is-truthy))))

41
src/quo2/components/counter/step/style.cljs Normal file
View File

@ -0,0 +1,41 @@
(ns quo2.components.counter.step.style
(:require
[quo2.foundations.colors :as colors]))
(def container-base
{:align-items :center
:justify-content :center
:border-radius 6
:height 20})
(defn neutral-border-color
[in-blur-view? override-theme]
(if in-blur-view?
(colors/theme-colors colors/white-opa-10 colors/neutral-80-opa-5 override-theme)
(colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)))
(def active-background-color (colors/custom-color :blue 50 10))
(def complete-background-color (colors/custom-color :blue 50))
(defn container
[size type in-blur-view? override-theme]
(cond-> container-base
(#{1 2} size) (assoc :width 20)
(= size 3) (assoc :width 28)
(= type :neutral)
(assoc :border-width 1
:border-color (neutral-border-color in-blur-view? override-theme))
(= type :active)
(assoc :background-color active-background-color)
(= type :complete)
(assoc :background-color complete-background-color)))
(defn text-color
([type] (text-color type nil))
([type override-theme]
(case type
(:neutral :active) (colors/theme-colors colors/neutral-100-opa-100 colors/white override-theme)
:complete colors/white)))

21
src/quo2/components/counter/step/view.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns quo2.components.counter.step.view
(:require
[quo2.components.counter.step.style :as style]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[utils.number]))
(defn step
[{:keys [type accessibility-label override-theme in-blur-view?]} value]
(let [type (or type :neutral)
value (utils.number/parse-int value)
label (str value)
size (count label)]
[rn/view
{:accessible true
:accessibility-label (or accessibility-label :step-counter)
:style (style/container size type in-blur-view? override-theme)}
[text/text
{:weight :medium
:size :label
:style {:color (style/text-color type override-theme)}} label]]))

6
src/quo2/core.cljs
View File

@ -18,6 +18,7 @@
quo2.components.community.icon
quo2.components.community.token-gating
quo2.components.counter.counter
quo2.components.counter.step.view
quo2.components.dividers.date
quo2.components.dividers.divider-label
quo2.components.dividers.new-messages
@ -83,7 +84,6 @@
(def text quo2.components.markdown.text/text)
(def icon quo2.components.icon/icon)
(def separator quo2.components.separator/separator)
(def counter quo2.components.counter.counter/counter)
(def header quo2.components.header/header)
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
(def info-message quo2.components.info.info-message/info-message)
@ -137,6 +137,10 @@
(def token-gating quo2.components.community.token-gating/token-gating)
(def community-icon quo2.components.community.icon/community-icon)
;;;; COUNTER
(def counter quo2.components.counter.counter/counter)
(def step quo2.components.counter.step.view/step)
;;;; DIVIDERS
(def divider-label quo2.components.dividers.divider-label/divider-label)
(def new-messages quo2.components.dividers.new-messages/new-messages)

1
src/quo2/core_spec.cljs
View File

@ -5,6 +5,7 @@
[quo2.components.buttons.--tests--.buttons-component-spec]
[quo2.components.colors.color-picker.component-spec]
[quo2.components.counter.--tests--.counter-component-spec]
[quo2.components.counter.step.component-spec]
[quo2.components.dividers.--tests--.divider-label-component-spec]
[quo2.components.dividers.strength-divider.component-spec]
[quo2.components.drawers.action-drawers.component-spec]

46
src/status_im2/contexts/quo_preview/counter/step.cljs Normal file
View File

@ -0,0 +1,46 @@
(ns status-im2.contexts.quo-preview.counter.step
(:require [quo2.components.counter.step.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Type:"
:key :type
:type :select
:options [{:key :neutral
:value "Neutral (default)"}
{:key :active
:value "Active"}
{:key :complete
:value "Complete"}]}
{:label "In blur view?"
:key :in-blur-view?
:type :boolean}
{:label "Value"
:key :value
:type :text}])
(defn cool-preview
[]
(let [state (reagent/atom {:value 5 :type :neutral :in-blur-view? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/step @state (:value @state)]]]])))
(defn preview-step
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

8
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -26,6 +26,7 @@
[status-im2.contexts.quo-preview.community.discover-card :as discover-card]
[status-im2.contexts.quo-preview.community.token-gating :as token-gating]
[status-im2.contexts.quo-preview.counter.counter :as counter]
[status-im2.contexts.quo-preview.counter.step :as step]
[status-im2.contexts.quo-preview.dividers.date :as divider-date]
[status-im2.contexts.quo-preview.dividers.divider-label :as divider-label]
[status-im2.contexts.quo-preview.dividers.new-messages :as new-messages]
@ -39,6 +40,7 @@
[status-im2.contexts.quo-preview.info.information-box :as information-box]
[status-im2.contexts.quo-preview.inputs.input :as input]
[status-im2.contexts.quo-preview.inputs.profile-input :as profile-input]
[status-im2.contexts.quo-preview.inputs.search-input :as search-input]
[status-im2.contexts.quo-preview.inputs.title-input :as title-input]
[status-im2.contexts.quo-preview.links.url-preview :as url-preview]
[status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
@ -81,7 +83,6 @@
[status-im2.contexts.quo-preview.tags.tags :as tags]
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
[status-im2.contexts.quo-preview.title.title :as title]
[status-im2.contexts.quo-preview.inputs.search-input :as search-input]
[status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
@ -144,7 +145,10 @@
:component token-gating/preview-token-gating}]
:counter [{:name :counter
:insets {:top false}
:component counter/preview-counter}]
:component counter/preview-counter}
{:name :step
:insets {:top false}
:component step/preview-step}]
:dividers [{:name :divider-label
:inset {:top false}
:component divider-label/preview-divider-label}

16
src/utils/number_test.cljs
View File

@ -1,17 +1,17 @@
(ns utils.number-test
(:require [cljs.test :refer [deftest is testing]]
[utils.number :as utils-number]))
[utils.number]))
(deftest parse-int
(testing "defaults to zero"
(is (= 0 (utils-number/parse-int nil))))
(is (= 0 (utils.number/parse-int nil))))
(testing "accepts any other default value"
(is (= 3 (utils-number/parse-int "" 3)))
(is (= :invalid-int (utils-number/parse-int "" :invalid-int))))
(is (= 3 (utils.number/parse-int "" 3)))
(is (= :invalid-int (utils.number/parse-int "" :invalid-int))))
(testing "valid numbers"
(is (= -6 (utils-number/parse-int "-6a" 0)))
(is (= 6 (utils-number/parse-int "6" 0)))
(is (= 6 (utils-number/parse-int "6.99" 0)))
(is (= -6 (utils-number/parse-int "-6" 0)))))
(is (= -6 (utils.number/parse-int "-6a" 0)))
(is (= 6 (utils.number/parse-int "6" 0)))
(is (= 6 (utils.number/parse-int "6.99" 0)))
(is (= -6 (utils.number/parse-int "-6" 0)))))