Title input component improvements (#17209)

- Add edit icon
- Fix disable style

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

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
+    (h/render [title-input/view {:value ""}])
-               {:value          ""
+    (h/is-truthy (h/query-by-label-text :profile-title-input)))
-                :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
+    (h/render [title-input/view
-               {:value          ""
+               {:value      ""
-                :max-length     24
+                :max-length 24}])
-                :on-change-text (h/mock-fn)}])
+    (h/fire-event :on-focus (h/query-by-label-text :profile-title-input))
-    (-> (js/expect (h/get-by-text "00"))
+    (h/wait-for #(h/is-truthy (h/query-by-text "00")))
-        (.toBeTruthy))
+    (h/is-truthy (h/query-by-text "/24")))
-    (-> (js/expect (h/get-by-text "/24"))
-        (.toBeTruthy)))
 
   (h/test "renders with max length digits and character count"
-    (h/render [title-input/title-input
+    (h/render [title-input/view
-               {:default-value  "abc"
+               {:default-value "abc"
-                :max-length     24
+                :max-length    24} "abc"])
-                :on-change-text (h/mock-fn)} "abc"])
+    (h/fire-event :on-focus (h/query-by-label-text :profile-title-input))
-    (-> (js/expect (h/get-by-text "03"))
+    (h/wait-for #(h/is-truthy (h/query-by-text "03")))
-        (.toBeTruthy))
+    (h/is-truthy (h/query-by-text "/24")))
-    (-> (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
+      (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)
+      (h/was-called on-change-text))))
-          (.toHaveBeenCalled)))))

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
+(defn get-char-count-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
   [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?
+   :color               (colors/theme-colors colors/neutral-100 colors/white theme)})
-                          (get-disabled-color blur? theme)
-                          (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
+(defn counter-container
-  {:padding-top 8})
+  [focused?]
+  {:padding-top    (if focused? 12 9)
+   :padding-bottom (if focused? 2 3)})

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}
+        {:style (style/counter-container @focused?)}
-        [text/text
+        (if @focused?
-         [text/text
+          [text/text
-          {:style (style/char-count blur? theme)
+           [text/text
-           :size  :paragraph-2}
+            {:style (style/char-count blur? theme)
-          (pad-0
+             :size  :paragraph-2}
-           (str
+            (pad-0
-            (count @value)))]
+             (str
-         [text/text
+              (count @value)))]
-          {:style (style/char-count blur? theme)
+           [text/text
-           :size  :paragraph-2}
+            {:style (style/char-count blur? theme)
-          (str "/"
+             :size  :paragraph-2}
-               (pad-0
+            (str "/"
-                (str max-length)))]]]])))
+                 (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))

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)