Create recovery-phrase input

Add simple test

asd

Author: ulisesmac

src/quo2/components/inputs/recovery_phrase/component_spec.cljs

@@ -0,0 +1,8 @@
+(ns quo2.components.inputs.recovery-phrase.component-spec
+  (:require [quo2.components.inputs.recovery-phrase.view :as recovery-phrase]
+            [test-helpers.component :as h]))
+
+(h/describe "Recovery phrase input"
+  (h/test "Default render"
+    (h/render [recovery-phrase/recovery-phrase-input {}])
+    (h/is-truthy (h/get-by-label-text :recovery-phrase-input))))

src/quo2/components/inputs/recovery_phrase/style.cljs

@@ -0,0 +1,45 @@
+(ns quo2.components.inputs.recovery-phrase.style
+  (:require [quo2.components.markdown.text :as markdown.text]
+            [quo2.foundations.colors :as colors]))
+
+(def container
+  {:min-height         40
+   :flex               1
+   :padding-vertical   4
+   :padding-horizontal 20})
+
+(defn input
+  []
+  (assoc (markdown.text/text-style {})
+         :height              32
+         :flex-grow           1
+         :padding-vertical    5
+         :text-align-vertical :top))
+
+(defn placeholder-color
+  [input-state override-theme blur?]
+  (cond
+    (and (= input-state :focused) blur?)
+    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+
+    (= input-state :focused) ; Not blur
+    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
+
+    blur? ; :default & blur
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+
+    :else ; :default & not blur
+    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+
+(defn cursor-color
+  [customization-color override-theme]
+  (colors/theme-colors (colors/custom-color customization-color 50)
+                       (colors/custom-color customization-color 60)
+                       override-theme))
+
+(defn error-word
+  []
+  {:height             22
+   :padding-horizontal 20
+   :background-color   colors/danger-50-opa-10
+   :color              (colors/theme-colors colors/danger-50 colors/danger-60)})

src/quo2/components/inputs/recovery_phrase/view.cljs

@@ -0,0 +1,54 @@
+(ns quo2.components.inputs.recovery-phrase.view
+  (:require [clojure.string :as string]
+            [quo2.components.inputs.recovery-phrase.style :as style]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(def ^:private custom-props
+  [:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
+   :placeholder-text-color :mark-errors? :error-pred :word-limit])
+
+(defn- error-word
+  [text]
+  [rn/text {:style (style/error-word)}
+   text])
+
+(defn- mark-error-words
+  [pred text word-limit]
+  (let [word-limit (or word-limit ##Inf)]
+    (into [:<>]
+          (comp (map-indexed (fn [idx word]
+                               (if (or (pred word) (>= idx word-limit))
+                                 [error-word word]
+                                 word)))
+                (interpose " "))
+          (string/split text #" "))))
+
+(defn recovery-phrase-input
+  [_ _]
+  (let [state       (reagent/atom :default)
+        set-focused #(reset! state :focused)
+        set-default #(reset! state :default)]
+    (fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
+                 error-pred word-limit]
+          :or   {customization-color :blue}
+          :as   props}
+         text]
+      (let [extra-props (apply dissoc props custom-props)]
+        [rn/view {:style style/container}
+         [rn/text-input
+          (merge {:accessibility-label    :recovery-phrase-input
+                  :style                  (style/input)
+                  :placeholder-text-color (style/placeholder-color @state override-theme blur?)
+                  :cursor-color           (style/cursor-color customization-color override-theme)
+                  :multiline              true
+                  :on-focus               (fn []
+                                            (set-focused)
+                                            (when on-focus (on-focus)))
+                  :on-blur                (fn []
+                                            (set-default)
+                                            (when on-blur (on-blur)))}
+                 extra-props)
+          (if mark-errors?
+            (mark-error-words error-pred text word-limit)
+            text)]]))))

src/quo2/core.cljs

@@ -33,6 +33,7 @@
     quo2.components.info.information-box
     quo2.components.inputs.input.view
     quo2.components.inputs.profile-input.view
+    quo2.components.inputs.recovery-phrase.view
     quo2.components.inputs.search-input.view
     quo2.components.inputs.title-input.view
     quo2.components.links.url-preview-list.view
@@ -154,8 +155,9 @@
 
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
-(def search-input quo2.components.inputs.search-input.view/search-input)
 (def profile-input quo2.components.inputs.profile-input.view/profile-input)
+(def recovery-phrase-input quo2.components.inputs.recovery-phrase.view/recovery-phrase-input)
+(def search-input quo2.components.inputs.search-input.view/search-input)
 (def title-input quo2.components.inputs.title-input.view/title-input)
 
 ;;;; LIST ITEMS

src/quo2/core_spec.cljs

@@ -13,6 +13,7 @@
     [quo2.components.drawers.permission-context.component-spec]
     [quo2.components.inputs.input.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
+    [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]