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>

src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs

@@ -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

src/quo2/components/numbered_keyboard/keyboard_key/view.cljs

@@ -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?
+          :disabled            (or disabled? (not label))
-          :on-press            on-press
+          :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))

src/quo2/components/numbered_keyboard/numbered_keyboard/style.cljs

@@ -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})

src/quo2/components/numbered_keyboard/numbered_keyboard/view.cljs

@@ -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))

src/quo2/core.cljs

@@ -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)

src/status_im2/contexts/quo_preview/main.cljs

@@ -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}}

src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs

@@ -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}]])