From 24c4cd150994953804c2c19ff144d3f81d1a401b Mon Sep 17 00:00:00 2001 From: mmilad75 <55688834+mmilad75@users.noreply.github.com> Date: Mon, 7 Aug 2023 20:35:14 +0330 Subject: [PATCH] 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 --- .../keyboard_key/component_spec.cljs | 10 +-- .../numbered_keyboard/keyboard_key/view.cljs | 13 ++-- .../numbered_keyboard/style.cljs | 12 ++++ .../numbered_keyboard/view.cljs | 68 +++++++++++++++++++ src/quo2/core.cljs | 4 +- src/status_im2/contexts/quo_preview/main.cljs | 7 +- .../numbered_keyboard/numbered_keyboard.cljs | 61 +++++++++++++++++ 7 files changed, 162 insertions(+), 13 deletions(-) create mode 100644 src/quo2/components/numbered_keyboard/numbered_keyboard/style.cljs create mode 100644 src/quo2/components/numbered_keyboard/numbered_keyboard/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs index e711a6e33a..954d1a7380 100644 --- a/src/quo2/components/numbered_keyboard/keyboard_key/component_spec.cljs +++ b/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 diff --git a/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs b/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs index 78fea9900b..92d6594041 100644 --- a/src/quo2/components/numbered_keyboard/keyboard_key/view.cljs +++ b/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? - :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)) diff --git a/src/quo2/components/numbered_keyboard/numbered_keyboard/style.cljs b/src/quo2/components/numbered_keyboard/numbered_keyboard/style.cljs new file mode 100644 index 0000000000..f833bd6fab --- /dev/null +++ b/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}) diff --git a/src/quo2/components/numbered_keyboard/numbered_keyboard/view.cljs b/src/quo2/components/numbered_keyboard/numbered_keyboard/view.cljs new file mode 100644 index 0000000000..33bcf04eb0 --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 0f95b70dd7..a81b007cc6 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 67478cfbaa..254e335f9c 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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}} diff --git a/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs b/src/status_im2/contexts/quo_preview/numbered_keyboard/numbered_keyboard.cljs new file mode 100644 index 0000000000..38d7139bb7 --- /dev/null +++ b/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}]])