feat: add profile input to quo2 (#15323)

src/quo2/components/buttons/button.cljs

@@ -204,7 +204,7 @@
    [button opts \"label\"]
    opts
    {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
-            :danger/:photo-bg/:blur-bg/:blur-bg-ouline/:shell/:community
+            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
     :size   40/32/24
     :icon   true/false
     :community-color '#FFFFFF'
@@ -213,14 +213,14 @@
     :after  :icon-keyword}
 
    only icon
-   [button {:icon true} :main-icons/close-circle]"
+   [button {:icon true} :i/close-circle]"
   [_ _]
   (let [pressed (reagent/atom false)]
     (fn
       [{:keys [on-press disabled type size community-color community-text-color before after above
                width
                override-theme override-background-color
-               on-long-press accessibility-label icon icon-no-color style test-ID]
+               on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type :primary
                size 40}}
        children]
@@ -275,7 +275,8 @@
                       (community-themed? type community-color)
                       (merge
                        {:background-color community-color}
-                       (when (= state :pressed) {:opacity 0.9}))))}
+                       (when (= state :pressed) {:opacity 0.9})))
+                    inner-style)}
            (when above
              [rn/view
               [quo2.icons/icon above

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

@@ -0,0 +1,29 @@
+(ns quo2.components.inputs.profile-input.component-spec
+  (:require [quo2.components.inputs.profile-input.view :as profile-input]
+            [test-helpers.component :as h]))
+
+(h/describe "Profile Input"
+  (h/test "renders user avatar with placeholder name if no value is specified"
+    (h/render [profile-input/profile-input
+               {:placeholder "Your Name"}])
+    (-> (js/expect (h/get-by-text "YN"))
+        (.toBeTruthy)))
+
+  (h/test "renders user avatar with full name if a value is specified"
+    (let [event (h/mock-fn)]
+      (h/render [profile-input/profile-input
+                 {:on-change          event
+                  :placeholder        "Your Name"
+                  :image-picker-props {:full-name "Test Name"}}])
+      (h/fire-event :change (h/get-by-text "TN"))
+      (-> (js/expect (h/get-by-text "TN"))
+          (.toBeTruthy))))
+
+  (h/test "on press event fires"
+    (let [event (h/mock-fn)]
+      (h/render [profile-input/profile-input
+                 {:placeholder "Your Name"
+                  :on-press    event}])
+      (h/fire-event :press (h/get-by-label-text :select-profile-picture-button))
+      (-> (js/expect event)
+          (.toHaveBeenCalledTimes 1)))))

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

@@ -0,0 +1,29 @@
+(ns quo2.components.inputs.profile-input.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [customization-color]
+  {:background-color   (colors/custom-color customization-color 50 40)
+   :padding-horizontal 12
+   :padding-top        12
+   :padding-bottom     10
+   :border-radius      16
+   :height             102
+   :flex               1})
+
+(def button
+  {:position      :absolute
+   :top           23
+   :bottom        0
+   :left          33
+   :right         0
+   :width         24
+   :height        24
+   :border-radius 24})
+
+(def button-inner {:border-radius 24})
+
+(def input-container
+  {:flex-direction :row
+   :margin-top     4
+   :align-items    :center})

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

@@ -0,0 +1,51 @@
+(ns quo2.components.inputs.profile-input.view
+  (:require
+    [quo2.components.buttons.button :as buttons]
+    [quo2.components.avatars.user-avatar.view :as user-avatar]
+    [quo2.components.inputs.profile-input.style :as style]
+    [quo2.components.inputs.title-input.view :as title-input]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]))
+
+(defn profile-input
+  [{:keys [customization-color
+           placeholder
+           on-press
+           title-input-props
+           image-picker-props]}]
+  (let [full-name (:full-name image-picker-props)]
+    [rn/view
+     {:style (style/container customization-color)}
+     [rn/view
+      [hole-view/hole-view
+       {:holes [{:x            33
+                 :y            23
+                 :width        24
+                 :height       24
+                 :borderRadius 12}]}
+       [user-avatar/user-avatar
+        (merge image-picker-props
+               {:customization-color customization-color
+                :full-name           (if (seq full-name)
+                                       full-name
+                                       placeholder)
+                :status-indicator?   false
+                :size                :medium})]]
+      [buttons/button
+       {:accessibility-label       :select-profile-picture-button
+        :type                      :grey
+        :override-theme            :dark
+        :override-background-color (colors/alpha colors/white 0.05)
+        :on-press                  on-press
+        :icon-size                 20
+        :width                     24
+        :size                      24
+        :icon                      :i/camera
+        :style                     style/button
+        :inner-style               style/button-inner} :i/camera]]
+     [rn/view {:style style/input-container}
+      [title-input/title-input
+       (merge title-input-props
+              {:placeholder         placeholder
+               :customization-color customization-color})]]]))

src/quo2/core.cljs

@@ -32,6 +32,7 @@
     quo2.components.info.information-box
     quo2.components.inputs.input.view
     quo2.components.inputs.title-input.view
+    quo2.components.inputs.profile-input.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
@@ -144,6 +145,7 @@
 
 ;;;; INPUTS
 (def input quo2.components.inputs.input.view/input)
+(def profile-input quo2.components.inputs.profile-input.view/profile-input)
 (def title-input quo2.components.inputs.title-input.view/title-input)
 
 ;;;; LIST ITEMS

src/quo2/core_spec.cljs

@@ -9,6 +9,7 @@
             [quo2.components.drawers.drawer-buttons.component-spec]
             [quo2.components.drawers.permission-context.component-spec]
             [quo2.components.colors.color-picker.component-spec]
+            [quo2.components.inputs.profile-input.component-spec]
             [quo2.components.inputs.title-input.component-spec]
             [quo2.components.markdown.--tests--.text-component-spec]
             [quo2.components.onboarding.small-option-card.component-spec]

src/status_im2/contexts/quo_preview/inputs/profile_input.cljs

@@ -0,0 +1,67 @@
+(ns status-im2.contexts.quo-preview.inputs.profile-input
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [quo2.core :as quo]
+            [react-native.blur :as blur]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "disabled?"
+    :key   :disabled?
+    :type  :boolean}
+   {:label "image selected?"
+    :key   :image-selected?
+    :type  :boolean}
+   {:label   "Custom Color"
+    :key     :color
+    :type    :select
+    :options (map (fn [color]
+                    (let [key (get color :name)]
+                      {:key key :value key}))
+                  (quo/picker-colors))}])
+
+(defn cool-preview
+  []
+  (let [state          (reagent/atom {:color           :blue
+                                      :image-selected? false
+                                      :disabled?       false})
+        max-length     24
+
+        value          (reagent/atom "")
+        on-change-text #(reset! value %)]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}]
+        [preview/customizer state descriptor]
+        [blur/view
+         {:background-color  colors/neutral-80-opa-80
+          :flex-direction    :row
+          :margin-horizontal 20
+          :justify-content   :center}
+         [quo/profile-input
+          {:default-value       ""
+           :on-change-text      on-change-text
+           :customization-color (:color @state)
+           :placeholder         "Your Name"
+           :on-press            #(js/alert "show image selector")
+           :image-picker-props  {:profile-picture (when (:image-selected? @state)
+                                                    (resources/get-mock-image :user-picture-male5))
+                                 :full-name       @value}
+           :title-input-props   {:disabled?      (:disabled? @state)
+                                 :max-length     max-length
+                                 :on-change-text on-change-text}}]]]])))
+
+(defn preview-profile-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}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -37,6 +37,7 @@
     [status-im2.contexts.quo-preview.foundations.shadows :as shadows]
     [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.profile-input :as profile-input]
     [status-im2.contexts.quo-preview.inputs.title-input :as title-input]
     [status-im2.contexts.quo-preview.list-items.channel :as channel]
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
@@ -170,6 +171,9 @@
    :inputs                [{:name      :input
                             :insets    {:top false}
                             :component input/preview-input}
+                           {:name      :profile-input
+                            :insets    {:top false}
+                            :component profile-input/preview-profile-input}
                            {:name      :title-input
                             :insets    {:top false}
                             :component title-input/preview-title-input}]