Implement Quo2 Numbered-Keyboard / Keyboard Key component (#16723)

* Implement Quo2 Numbered-Keyboard / Keyboard Key component

* add tests

* fix lint issues

* add derivation-path icon

* add tests

* refactor preview
This commit is contained in:
mmilad75 2023-08-02 11:38:38 +03:30 committed by GitHub
parent 7c73b7ea12
commit 07336edef6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 186 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 749 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1007 B

View File

@ -0,0 +1,50 @@
(ns quo2.components.numbered-keyboard.keyboard-key.component-spec
(:require [quo2.components.numbered-keyboard.keyboard-key.view :as component]
[test-helpers.component :as h]))
(h/describe "Keyboard Key"
(h/test "render digit type"
(h/render [component/keyboard-key
{:disabled? false
:on-press #(js/alert "pressed")
:blur? false
:type :digit} 1])
(h/is-truthy (h/query-by-label-text :text-label)))
(h/test "render key type"
(h/render [component/keyboard-key
{:disabled? false
:on-press #(js/alert "pressed")
:blur? false
:type :key} :i/delete])
(h/is-truthy (h/query-by-label-text :icon-label)))
(h/test "render derivation path type"
(h/render [component/keyboard-key
{:disabled? false
:on-press #(js/alert "pressed")
:blur? false
:type :derivation-path}])
(h/is-truthy (h/query-by-label-text :derivation-path-label)))
(h/test "Is pressable when disabled is false"
(let [on-press (h/mock-fn)]
(h/render [component/keyboard-key
{:disabled? false
:on-press #(on-press)
:blur? false
:type :digit} 1])
(h/is-truthy (h/query-by-label-text :text-label))
(h/fire-event :press (h/query-by-label-text :keyboard-key))
(h/was-called on-press)))
(h/test "Is not pressable when disabled is true"
(let [on-press (h/mock-fn)]
(h/render [component/keyboard-key
{:disabled? true
:on-press #(on-press)
:blur? false
:type :digit} 1])
(h/is-truthy (h/query-by-label-text :text-label))
(h/fire-event :press (h/query-by-label-text :keyboard-key))
(h/was-not-called on-press))))

View File

@ -0,0 +1,28 @@
(ns quo2.components.numbered-keyboard.keyboard-key.style
(:require [quo2.foundations.colors :as colors]))
(defn get-label-color
[disabled? theme blur?]
(cond
(and disabled? (or (= :dark theme) blur?)) colors/white-opa-30
(and disabled? (or (= :light theme) blur?)) colors/neutral-30
(or (= :dark theme) blur?) colors/white
:else colors/neutral-100))
(defn toggle-background-color
[pressed-in? blur? theme]
(if pressed-in?
(cond
blur? colors/white-opa-10
(= :light theme) colors/neutral-10
(= :dark theme) colors/neutral-80)
:transparent))
(defn container
[color]
{:width 48
:height 48
:justify-content :center
:align-items :center
:border-radius 999
:background-color color})

View File

@ -0,0 +1,39 @@
(ns quo2.components.numbered-keyboard.keyboard-key.view
(:require [react-native.core :as rn]
[quo2.theme :as quo.theme]
[quo2.components.markdown.text :as text]
[quo2.components.icon :as icons]
[quo2.components.numbered-keyboard.keyboard-key.style :as style]
[reagent.core :as reagent]))
(defn- keyboard-key-internal
[]
(let [pressed? (reagent/atom false)]
(fn [{:keys [disabled? theme blur? on-press type]} label]
(let [label-color (style/get-label-color disabled? theme blur?)
background-color (style/toggle-background-color @pressed? blur? theme)]
[rn/pressable
{:accessibility-label :keyboard-key
:disabled disabled?
:on-press on-press
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:style (style/container background-color)}
(condp = type
:key [icons/icon
label
{:color label-color
:accessibility-label :icon-label}]
:digit [text/text
{:accessibility-label :text-label
:weight :regular
:size :heading-1
:style {:color label-color}}
label]
:derivation-path [icons/icon
:i/derivation-path
{:color label-color
:size 32
:accessibility-label :derivation-path-label}])]))))
(def keyboard-key (quo.theme/with-theme keyboard-key-internal))

View File

@ -74,6 +74,7 @@
quo2.components.notifications.notification-dot quo2.components.notifications.notification-dot
quo2.components.notifications.notification.view quo2.components.notifications.notification.view
quo2.components.notifications.toast.view quo2.components.notifications.toast.view
quo2.components.numbered-keyboard.keyboard-key.view
quo2.components.onboarding.small-option-card.view quo2.components.onboarding.small-option-card.view
quo2.components.password.tips.view quo2.components.password.tips.view
quo2.components.profile.profile-card.view quo2.components.profile.profile-card.view
@ -200,6 +201,9 @@
(def search-input quo2.components.inputs.search-input.view/search-input) (def search-input quo2.components.inputs.search-input.view/search-input)
(def title-input quo2.components.inputs.title-input.view/title-input) (def title-input quo2.components.inputs.title-input.view/title-input)
;;;; NUMBERED KEYBOARD
(def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/keyboard-key)
;;;; LIST ITEMS ;;;; LIST ITEMS
(def channel-list-item quo2.components.list-items.channel/list-item) (def channel-list-item quo2.components.list-items.channel/list-item)
(def menu-item quo2.components.list-items.menu-item/menu-item) (def menu-item quo2.components.list-items.menu-item/menu-item)

View File

@ -34,6 +34,7 @@
[quo2.components.markdown.text-component-spec] [quo2.components.markdown.text-component-spec]
[quo2.components.markdown.list.component-spec] [quo2.components.markdown.list.component-spec]
[quo2.components.notifications.notification.component-spec] [quo2.components.notifications.notification.component-spec]
[quo2.components.numbered-keyboard.keyboard-key.component-spec]
[quo2.components.onboarding.small-option-card.component-spec] [quo2.components.onboarding.small-option-card.component-spec]
[quo2.components.password.tips.component-spec] [quo2.components.password.tips.component-spec]
[quo2.components.profile.select-profile.component-spec] [quo2.components.profile.select-profile.component-spec]

View File

@ -50,6 +50,7 @@
[status-im2.contexts.quo-preview.inputs.profile-input :as profile-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.search-input :as search-input]
[status-im2.contexts.quo-preview.inputs.title-input :as title-input] [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
[status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key :as keyboard-key]
[status-im2.contexts.quo-preview.links.url-preview :as url-preview] [status-im2.contexts.quo-preview.links.url-preview :as url-preview]
[status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list] [status-im2.contexts.quo-preview.links.url-preview-list :as url-preview-list]
[status-im2.contexts.quo-preview.links.link-preview :as link-preview] [status-im2.contexts.quo-preview.links.link-preview :as link-preview]
@ -244,6 +245,10 @@
{:name :title-input {:name :title-input
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component title-input/preview-title-input}] :component title-input/preview-title-input}]
:numbered-keyboard [{:name :keyboard-key
:options {:insets {:top? true}
:topBar {:visible true}}
:component keyboard-key/preview-keyboard-key}]
:links [{:name :url-preview :links [{:name :url-preview
:options {:insets {:top? true} :options {:insets {:top? true}
:topBar {:visible true}} :topBar {:visible true}}

View File

@ -0,0 +1,59 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.keyboard-key
(:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "Disable:"
:key :disabled?
:type :boolean}
{:label "Type"
:type :select
:key :type
:options [{:key :digit
:value "Digit"}
{:key :key
:value "Key"}
{:key :derivation-path
:value "Derivation Path"}]}])
(defn cool-preview
[]
(let [state (reagent/atom {:disabled? false
:on-press #(js/alert "pressed" %)
:blur? false
:type :digit})]
(fn []
(let [value (case (:type @state)
:key :i/delete
:derivation-path nil
:digit 1
nil)]
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[preview/blur-view
{:style {:flex 1
:align-self :center
:justify-self :center
:margin-horizontal 20}
:show-blur-background? (:blur? @state)
:blur-view-props (when (:blur? @state)
{:overlay-color colors/neutral-80-opa-80})}
[quo/keyboard-key @state value]]]))))
(defn preview-keyboard-key
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])