-
Notifications
You must be signed in to change notification settings - Fork 985
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add title input component to quo2 #15133
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
(ns quo2.components.inputs.title-input.component-spec | ||
(:require [quo2.components.inputs.title-input.view :as title-input] | ||
[test-helpers.component :as h])) | ||
|
||
(h/describe "profile: title-input" | ||
(h/test "renders empty" | ||
(h/render [title-input/title-input | ||
{:value "" | ||
:on-change-text (h/mock-fn)}]) | ||
(-> (js/expect (h/get-by-label-text :profile-title-input)) | ||
(.toBeTruthy))) | ||
|
||
(h/test "empty text renders with max length digits and 00" | ||
(h/render [title-input/title-input | ||
{:value "" | ||
:max-length 24 | ||
:on-change-text (h/mock-fn)}]) | ||
(-> (js/expect (h/get-by-text "00")) | ||
(.toBeTruthy)) | ||
(-> (js/expect (h/get-by-text "/24")) | ||
(.toBeTruthy))) | ||
|
||
(h/test "renders with max length digits and character count" | ||
(h/render [title-input/title-input | ||
{:default-value "abc" | ||
:max-length 24 | ||
:on-change-text (h/mock-fn)} "abc"]) | ||
(-> (js/expect (h/get-by-text "03")) | ||
(.toBeTruthy)) | ||
(-> (js/expect (h/get-by-text "/24")) | ||
(.toBeTruthy))) | ||
|
||
(h/test "text updates on change" | ||
(let [on-change-text (h/mock-fn)] | ||
(h/render [title-input/title-input | ||
{:value "mock text" | ||
:on-change-text on-change-text}]) | ||
(h/fire-event :change-text (h/get-by-label-text :profile-title-input) "mock-text-new") | ||
(-> (js/expect on-change-text) | ||
(.toHaveBeenCalled))))) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
(ns quo2.components.inputs.title-input.style | ||
(:require [quo2.foundations.colors :as colors])) | ||
|
||
(defn get-focused-placeholder-color | ||
[blur?] | ||
(if blur? | ||
(colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2)) | ||
(colors/theme-colors colors/neutral-30 colors/neutral-60))) | ||
|
||
(defn get-placeholder-color | ||
[blur?] | ||
(if blur? | ||
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3)) | ||
(colors/theme-colors colors/neutral-40 colors/neutral-50))) | ||
|
||
(defn- get-disabled-color | ||
[blur?] | ||
(if blur? | ||
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3)) | ||
(colors/theme-colors colors/neutral-40 colors/neutral-50))) | ||
|
||
(defn- get-char-count-color | ||
[blur?] | ||
(if blur? | ||
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4)) | ||
(colors/theme-colors colors/neutral-40 colors/neutral-50))) | ||
|
||
(defn get-selection-color | ||
[customization-color blur?] | ||
(if blur? | ||
(colors/theme-colors colors/neutral-100 colors/white) | ||
(colors/custom-color customization-color (if colors/dark? 60 50)))) | ||
|
||
(def text-input-container {:flex 1}) | ||
|
||
(defn title-text | ||
[disabled? blur?] | ||
{:text-align-vertical :bottom | ||
:color (when disabled? (get-disabled-color blur?))}) | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. extra line |
||
(defn char-count | ||
[blur?] | ||
{:color (get-char-count-color blur?)}) | ||
|
||
(def container | ||
{:flex-direction :row | ||
:flex 1 | ||
:justify-content :center | ||
:align-items :center}) | ||
|
||
(def counter-container | ||
{:padding-top 8}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
(ns quo2.components.inputs.title-input.view | ||
(:require | ||
[quo2.components.inputs.title-input.style :as style] | ||
[quo2.components.markdown.text :as text] | ||
[reagent.core :as reagent] | ||
[react-native.core :as rn])) | ||
|
||
(defn- pad-0 | ||
[value] | ||
(if (<= (count value) 1) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. im not sure this is needed, i guess its just in design for the demo purposes, there is an example There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think I meant There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. better to ask in figma, to make sure There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yes, I will double check with design team 👍 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. FYI: If we want to format with leading zeros, in CLJS we should probably use (goog.string/format "%02d" 9) ; => 09 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @ilmotta, this caused issues with the component tests. The compiler makes
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No problem then, thanks for the info. It could be a good idea to create a quick issue if we haven't one. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah sure I can create an issue for this 👍 |
||
(str 0 value) | ||
value)) | ||
|
||
(defn title-input | ||
ulisesmac marked this conversation as resolved.
Show resolved
Hide resolved
|
||
[{:keys [blur? | ||
on-change-text | ||
placeholder | ||
max-length | ||
default-value] | ||
:or {max-length 0 | ||
default-value ""}}] | ||
(let [focused? (reagent/atom false) | ||
value (reagent/atom default-value) | ||
on-change (fn [v] | ||
(reset! value v) | ||
(when on-change-text | ||
(on-change-text v)))] | ||
(fn [{:keys [customization-color disabled?]}] | ||
[rn/view | ||
{:style style/container} | ||
[rn/view {:style style/text-input-container} | ||
[rn/text-input | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've seen some problems while testing on Android: Pixel4 API 30:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I will take a look, think I need to re-approach that alignment. Will adjust the cursor too! |
||
{:style | ||
(text/text-style | ||
{:size :heading-2 | ||
:weight :semi-bold | ||
:style (style/title-text disabled? blur?)}) | ||
:default-value default-value | ||
:accessibility-label :profile-title-input | ||
:on-focus #(swap! focused? (fn [] true)) | ||
:on-blur #(swap! focused? (fn [] false)) | ||
:input-mode :text | ||
:on-change-text on-change | ||
:editable (not disabled?) | ||
:max-length max-length | ||
:placeholder placeholder | ||
:selection-color (style/get-selection-color customization-color blur?) | ||
:placeholder-text-color (if @focused? | ||
(style/get-focused-placeholder-color blur?) | ||
(style/get-placeholder-color blur?))}]] | ||
[rn/view | ||
{:style style/counter-container} | ||
[text/text | ||
[text/text | ||
{:style (style/char-count blur?) | ||
:size :paragraph-2} | ||
(pad-0 | ||
(str | ||
(count @value)))] | ||
[text/text | ||
{:style (style/char-count blur?) | ||
:size :paragraph-2} | ||
(str "/" | ||
(pad-0 | ||
(str max-length)))]]]]))) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
(ns status-im2.contexts.quo-preview.inputs.title-input | ||
(:require [quo2.foundations.colors :as colors] | ||
[react-native.core :as rn] | ||
[reagent.core :as reagent] | ||
[quo2.core :as quo] | ||
[status-im2.contexts.quo-preview.preview :as preview])) | ||
|
||
(def descriptor | ||
[{:label "disabled?" | ||
:key :disabled? | ||
:type :boolean} | ||
{:label "blur?" | ||
:key :blur? | ||
:type :boolean} | ||
{:label "Cursor Color" | ||
:key :color | ||
:type :select | ||
:options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}]) | ||
|
||
(defn cool-preview | ||
[] | ||
(let [state (reagent/atom {:color nil | ||
:blur? false | ||
:disabled? false}) | ||
max-length 24 | ||
on-change-text (fn [_v] | ||
(println (str "cool-preview -> on-change-text called " _v)))] | ||
(fn [] | ||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} | ||
[rn/view {:padding-bottom 150} | ||
[rn/view {:flex 1}] | ||
[preview/customizer state descriptor] | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Extra lines There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. my bad 😅 |
||
[preview/blur-view | ||
{:show-blur-background? (:blur? @state) | ||
:style {:flex-direction :row | ||
:justify-content :center}} | ||
[quo/title-input | ||
{:max-length max-length | ||
:default-value "" | ||
:on-change-text on-change-text | ||
:disabled? (:disabled? @state) | ||
:customization-color (:color @state) | ||
:blur? (:blur? @state) | ||
:placeholder "type something here"}]]]]))) | ||
|
||
(defn preview-title-input | ||
[] | ||
[rn/view | ||
{:background-color (colors/theme-colors colors/white | ||
colors/neutral-90) | ||
:flex 1} | ||
[rn/flat-list | ||
{:flex 1 | ||
:keyboard-should-persist-taps :always | ||
:header [cool-preview] | ||
:key-fn str}]]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Parveshdhull updated the docs for customization color :)