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

Implement Quo2 Numbered-Keyboard / Numbered Keyboard component #16606 (#16851) 

* Implement Quo2 Numbered-Keyboard / Numbered Keyboard component

* fix lint

* fix margin bottom

* fix android issue

* retructure a bit

* refactor code

* resolve comments

* fix styles

---------

Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>
This commit is contained in:
mmilad75 2023-08-07 20:35:14 +03:30 committed by GitHub
parent 86e16564fa
commit 24c4cd1509
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 162 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs
View File

@ -4,7 +4,7 @@
(h/describe "Keyboard Key"
(h/test "render digit type"
(h/render [component/keyboard-key
(h/render [component/view
{:disabled? false
:on-press #(js/alert "pressed")
:blur? false
@ -12,7 +12,7 @@
(h/is-truthy (h/query-by-label-text :text-label)))
(h/test "render key type"
(h/render [component/keyboard-key
(h/render [component/view
{:disabled? false
:on-press #(js/alert "pressed")
:blur? false
@ -20,7 +20,7 @@
(h/is-truthy (h/query-by-label-text :icon-label)))
(h/test "render derivation path type"
(h/render [component/keyboard-key
(h/render [component/view
{:disabled? false
:on-press #(js/alert "pressed")
:blur? false
@ -29,7 +29,7 @@
(h/test "Is pressable when disabled is false"
(let [on-press (h/mock-fn)]
(h/render [component/keyboard-key
(h/render [component/view
{:disabled? false
:on-press #(on-press)
:blur? false
@ -40,7 +40,7 @@
(h/test "Is not pressable when disabled is true"
(let [on-press (h/mock-fn)]
(h/render [component/keyboard-key
(h/render [component/view
{:disabled? true
:on-press #(on-press)
:blur? false

13
src/quo2/components/numbered_keyboard/keyboard_key/view.cljs
View File

@ -6,7 +6,7 @@
[quo2.components.numbered-keyboard.keyboard-key.style :as style]
[reagent.core :as reagent]))
(defn- keyboard-key-internal
(defn- view-internal
[]
(let [pressed? (reagent/atom false)]
(fn [{:keys [disabled? theme blur? on-press type]} label]
@ -14,12 +14,12 @@
background-color (style/toggle-background-color @pressed? blur? theme)]
[rn/pressable
{:accessibility-label :keyboard-key
:disabled disabled?
:on-press on-press
:disabled (or disabled? (not label))
:on-press (fn [] (on-press label))
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:style (style/container background-color)}
(condp = type
(case type
:key [icons/icon
label
{:color label-color
@ -34,6 +34,7 @@
:i/derivation-path
{:color label-color
:size 32
:accessibility-label :derivation-path-label}])]))))
:accessibility-label :derivation-path-label}]
nil)]))))
(def keyboard-key (quo.theme/with-theme keyboard-key-internal))
(def view (quo.theme/with-theme view-internal))

12
src/quo2/components/numbered_keyboard/numbered_keyboard/style.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns quo2.components.numbered-keyboard.numbered-keyboard.style)
(def container
{:flex 1
:padding-top 8
:padding-horizontal 48})
(def row-container
{:flex-direction :row
:justify-content :space-between
:margin-bottom 12
:align-items :center})

68
src/quo2/components/numbered_keyboard/numbered_keyboard/view.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns quo2.components.numbered-keyboard.numbered-keyboard.view
(:require [quo2.theme :as quo.theme]
[quo2.components.numbered-keyboard.keyboard-key.view :as keyboard-key]
[react-native.core :as rn]
[quo2.components.numbered-keyboard.numbered-keyboard.style :as style]))
(defn keyboard-item
[{:keys [item type disabled? on-press blur? theme]}]
[keyboard-key/view
{:disabled? disabled?
:on-press on-press
:blur? blur?
:theme theme
:type type}
item])
(defn- view-internal
[]
(fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
[rn/view
{:style style/container}
(for [row-index (range 1 4)]
^{:key row-index}
[rn/view {:style style/row-container}
(for [column-index (range 1 4)]
[keyboard-item
{:item (+ (* (dec row-index) 3) column-index)
:type :digit
:disabled? disabled?
:on-press on-press
:blur? blur?
:theme theme}])])
;; bottom row
[rn/view {:style style/row-container}
(case left-action
:dot [keyboard-item
{:item "."
:type :digit
:disabled? disabled?
:on-press on-press
:blur? blur?
:theme theme}]
:face-id [keyboard-item
{:item :i/faceid-key
:type :key
:disabled? disabled?
:on-press on-press
:blur? blur?
:theme theme}]
:none [keyboard-item])
[keyboard-item
{:item "0"
:type :digit
:disabled? disabled?
:on-press on-press
:blur? blur?
:theme theme}]
(if delete-key?
[keyboard-item
{:item :i/delete
:type :key
:disabled? disabled?
:on-press on-press
:blur? blur?
:theme theme}]
[keyboard-item])]]))
(def view (quo.theme/with-theme view-internal))

4
src/quo2/core.cljs
View File

@ -75,6 +75,7 @@
quo2.components.notifications.notification.view
quo2.components.notifications.toast.view
quo2.components.numbered-keyboard.keyboard-key.view
quo2.components.numbered-keyboard.numbered-keyboard.view
quo2.components.onboarding.small-option-card.view
quo2.components.password.tips.view
quo2.components.profile.profile-card.view
@ -204,7 +205,8 @@
(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)
(def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/view)
(def numbered-keyboard quo2.components.numbered-keyboard.numbered-keyboard.view/view)
;;;; LIST ITEMS
(def channel-list-item quo2.components.list-items.channel/list-item)

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

@ -51,6 +51,7 @@
[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.numbered-keyboard.keyboard-key :as keyboard-key]
[status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard :as numbered-keyboard]
[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.link-preview :as link-preview]
@ -252,7 +253,11 @@
:numbered-keyboard [{:name :keyboard-key
:options {:insets {:top? true}
:topBar {:visible true}}
:component keyboard-key/preview-keyboard-key}]
:component keyboard-key/preview-keyboard-key}
{:name :numbered-keyboard
:options {:insets {:top? true}
:topBar {:visible true}}
:component numbered-keyboard/preview-numbered-keyboard}]
:links [{:name :url-preview
:options {:insets {:top? true}
:topBar {:visible true}}

61
src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs Normal file
View File

@ -0,0 +1,61 @@
(ns status-im2.contexts.quo-preview.numbered-keyboard.numbered-keyboard
(: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]
[react-native.blur :as blur]))
(def descriptor
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "Disable:"
:key :disabled?
:type :boolean}
{:label "Delete Key:"
:key :delete-key?
:type :boolean}
{:label "Left Action:"
:type :select
:key :left-action
:options [{:key :dot
:value "Dot"}
{:key :face-id
:value "Face ID"}
{:key :none
:value "None"}]}])
(defn cool-preview
[]
(let [state (reagent/atom {:disabled? false
:on-press (fn [item] (js/alert (str item " pressed")))
:blur? false
:delete-key? true
:left-action :dot})
blur? (reagent/cursor state [:blur?])]
(fn []
[rn/view
[rn/view {:flex 1}
[preview/customizer state descriptor]]
(when @blur?
[blur/view
{:style {:position :absolute
:left 0
:right 0
:bottom 0
:height 220
:background-color colors/neutral-80-opa-70}
:overlay-color :transparent}])
[quo/numbered-keyboard @state]])))
(defn preview-numbered-keyboard
[]
[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}]])