From 7bb4f9cfe8815ed0f860f67d7c9c49ed4ae9e326 Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Fri, 8 Sep 2023 04:59:51 -0700 Subject: [PATCH] Title input component improvements (#17209) - Add edit icon - Fix disable style --- .../components/inputs/profile_input/view.cljs | 2 +- .../inputs/title_input/component_spec.cljs | 42 +++++++--------- .../components/inputs/title_input/style.cljs | 27 +++++------ .../components/inputs/title_input/view.cljs | 48 +++++++++++-------- src/quo2/core.cljs | 2 +- 5 files changed, 58 insertions(+), 63 deletions(-) diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs index 690aaa82a6..fe8d9f9620 100644 --- a/src/quo2/components/inputs/profile_input/view.cljs +++ b/src/quo2/components/inputs/profile_input/view.cljs @@ -46,7 +46,7 @@ :container-style style/button :inner-style style/button-inner} :i/camera]] [rn/view {:style style/input-container} - [title-input/title-input + [title-input/view (merge title-input-props {:blur? true :placeholder placeholder diff --git a/src/quo2/components/inputs/title_input/component_spec.cljs b/src/quo2/components/inputs/title_input/component_spec.cljs index 22910b420a..6a42a5a154 100644 --- a/src/quo2/components/inputs/title_input/component_spec.cljs +++ b/src/quo2/components/inputs/title_input/component_spec.cljs @@ -2,39 +2,31 @@ (:require [quo2.components.inputs.title-input.view :as title-input] [test-helpers.component :as h])) -(h/describe "profile: title-input" +(h/describe "input -> title-input component" (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/render [title-input/view {:value ""}]) + (h/is-truthy (h/query-by-label-text :profile-title-input))) (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/render [title-input/view + {:value "" + :max-length 24}]) + (h/fire-event :on-focus (h/query-by-label-text :profile-title-input)) + (h/wait-for #(h/is-truthy (h/query-by-text "00"))) + (h/is-truthy (h/query-by-text "/24"))) (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/render [title-input/view + {:default-value "abc" + :max-length 24} "abc"]) + (h/fire-event :on-focus (h/query-by-label-text :profile-title-input)) + (h/wait-for #(h/is-truthy (h/query-by-text "03"))) + (h/is-truthy (h/query-by-text "/24"))) (h/test "text updates on change" (let [on-change-text (h/mock-fn)] - (h/render [title-input/title-input + (h/render [title-input/view {: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))))) + (h/was-called on-change-text)))) diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs index 143d69d26c..815f48fa2b 100644 --- a/src/quo2/components/inputs/title_input/style.cljs +++ b/src/quo2/components/inputs/title_input/style.cljs @@ -6,8 +6,7 @@ [blur? theme] (if blur? (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme) - (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)) -) + (colors/theme-colors colors/neutral-30 colors/neutral-60 theme))) (defn get-placeholder-color [blur? theme] @@ -15,13 +14,7 @@ (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme) (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) -(defn- get-disabled-color - [blur? theme] - (if blur? - (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30) - (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))) - -(defn- get-char-count-color +(defn get-char-count-color [blur? theme] (if blur? (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40) @@ -38,21 +31,23 @@ (def text-input-container {:flex 1}) (defn title-text - [disabled? blur? theme] + [theme] {:text-align-vertical :bottom :padding 0 - :color (if disabled? - (get-disabled-color blur? theme) - (colors/theme-colors colors/neutral-100 colors/white theme))}) + :color (colors/theme-colors colors/neutral-100 colors/white theme)}) (defn char-count [blur? theme] {:color (get-char-count-color blur? theme)}) -(def container +(defn container + [disabled?] {:flex-direction :row + :opacity (if disabled? 0.3 1) :justify-content :center :align-items :center}) -(def counter-container - {:padding-top 8}) +(defn counter-container + [focused?] + {:padding-top (if focused? 12 9) + :padding-bottom (if focused? 2 3)}) diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index 301f9bc1f6..aaddd5ab60 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -4,7 +4,8 @@ [quo2.components.markdown.text :as text] [reagent.core :as reagent] [react-native.core :as rn] - [quo2.theme :as theme])) + [quo2.theme :as quo.theme] + [quo2.components.icon :as icon])) (defn- pad-0 [value] @@ -12,7 +13,7 @@ (str 0 value) value)) -(defn- title-input-internal +(defn- view-internal [{:keys [blur? on-change-text auto-focus @@ -26,23 +27,24 @@ default-value ""}}] (let [focused? (reagent/atom auto-focus) value (reagent/atom default-value) + input-ref (atom nil) on-change (fn [v] (reset! value v) (when on-change-text (on-change-text v)))] (fn [{:keys [customization-color disabled?]}] [rn/view - {:style (merge style/container container-style)} + {:style (merge (style/container disabled?) container-style)} [rn/view {:style style/text-input-container} [rn/text-input {:style (text/text-style {:size :heading-2 :weight :semi-bold - :style (style/title-text disabled? blur? theme)}) + :style (style/title-text theme)}) :default-value default-value :accessibility-label :profile-title-input - :keyboard-appearance (theme/theme-value :light :dark theme) + :keyboard-appearance (quo.theme/theme-value :light :dark theme) :on-focus #(swap! focused? (constantly true)) :on-blur #(swap! focused? (constantly false)) :auto-focus auto-focus @@ -51,24 +53,30 @@ :editable (not disabled?) :max-length max-length :placeholder placeholder + :ref #(reset! input-ref %) :selection-color (style/get-selection-color customization-color blur? theme) :placeholder-text-color (if @focused? (style/get-focused-placeholder-color blur? theme) (style/get-placeholder-color blur? theme))}]] [rn/view - {:style style/counter-container} - [text/text - [text/text - {:style (style/char-count blur? theme) - :size :paragraph-2} - (pad-0 - (str - (count @value)))] - [text/text - {:style (style/char-count blur? theme) - :size :paragraph-2} - (str "/" - (pad-0 - (str max-length)))]]]]))) + {:style (style/counter-container @focused?)} + (if @focused? + [text/text + [text/text + {:style (style/char-count blur? theme) + :size :paragraph-2} + (pad-0 + (str + (count @value)))] + [text/text + {:style (style/char-count blur? theme) + :size :paragraph-2} + (str "/" + (pad-0 + (str max-length)))]] + [rn/pressable + {:on-press #(when-not disabled? + (.focus ^js @input-ref))} + [icon/icon :i/edit {:color (style/get-char-count-color blur? theme)}]])]]))) -(def title-input (theme/with-theme title-input-internal)) +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 7a0aceae50..8941b3b7d3 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -232,7 +232,7 @@ (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) +(def title-input quo2.components.inputs.title-input.view/view) ;;;; Numbered Keyboard (def keyboard-key quo2.components.numbered-keyboard.keyboard-key.view/view)