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

Create recovery-phrase input

This commit is contained in:
Ulises M 2023-04-19 19:08:36 -06:00 committed by Andrea Maria Piana
parent d80021b6a3
commit e676b3dab4
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
7 changed files with 191 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/quo2/components/inputs/recovery_phrase/component_spec.cljs Normal file
View File

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

45
src/quo2/components/inputs/recovery_phrase/style.cljs Normal file
View File

@ -0,0 +1,45 @@
(ns quo2.components.inputs.recovery-phrase.style
(:require [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]))
(def container
{:min-height 40
:flex 1
:padding-vertical 4
:padding-horizontal 20})
(defn input
[]
(assoc (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)})

54
src/quo2/components/inputs/recovery_phrase/view.cljs Normal file
View File

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

4
src/quo2/core.cljs
View File

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

1
src/quo2/core_spec.cljs
View File

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

76
src/status_im2/contexts/quo_preview/inputs/recovery_phrase_input.cljs Normal file
View File

@ -0,0 +1,76 @@
(ns status-im2.contexts.quo-preview.inputs.recovery-phrase-input
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Text"
:key :text
:type :text}
{:label "Placeholder"
:key :placeholder
:type :text}
{:label "Blur"
:key :blur?
:type :boolean}
{:label "Mark errors"
:key :mark-errors?
:type :boolean}
{:label "Customization color"
:key :customization-color
:type :select
:options (map (fn [[color _]]
{:key color :value (name color)})
colors/customization)}
{:label "Word limit"
:key :word-limit
:type :select
:options [{:key nil :value "No limit"}
{:key 5 :value "5 words"}
{:key 10 :value "10 words"}
{:key 20 :value "20 words"}]}])
(defn cool-preview
[]
(let [state (reagent/atom {:text ""
:placeholder "Type or paste your recovery phrase"
:customization-color :blue
:word-limit 20
:mark-errors? true})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]
[quo/text {:size :paragraph-2}
"(Any word with at least 6 chars is marked as error)"]]
[preview/blur-view
{:style {:align-items :center
:margin-vertical 20
:width "100%"}
:height 200
:show-blur-background? (:blur? @state)}
[rn/view
{:style {:height 150
:width "100%"}}
[quo/recovery-phrase-input
{:mark-errors? (:mark-errors? @state)
:error-pred #(> (count %) 5)
:on-change-text #(swap! state assoc :text %)
:placeholder (:placeholder @state)
:customization-color (:customization-color @state)
:word-limit (:word-limit @state)}
(:text @state)]]]]])))
(defn preview-recovery-phrase-input
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

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

@ -39,6 +39,7 @@
[status-im2.contexts.quo-preview.info.info-message :as info-message]
[status-im2.contexts.quo-preview.info.information-box :as information-box]
[status-im2.contexts.quo-preview.inputs.input :as input]
[status-im2.contexts.quo-preview.inputs.recovery-phrase-input :as recovery-phrase-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.title-input :as title-input]
@ -185,6 +186,9 @@
{:name :profile-input
:insets {:top false}
:component profile-input/preview-profile-input}
{:name :recovery-phrase-input
:insets {:top false}
:component recovery-phrase-input/preview-recovery-phrase-input}
{:name :search-input
:insets {:top false}
:component search-input/preview-search-input}