From e98ce548301ef8d972e1ce83bb0d8ed60e11cd0e Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Tue, 14 Mar 2023 13:52:15 +0000 Subject: [PATCH] feat: add profile input to quo2 (#15323) --- src/quo2/components/buttons/button.cljs | 9 +-- .../inputs/profile_input/component_spec.cljs | 29 ++++++++ .../inputs/profile_input/style.cljs | 29 ++++++++ .../components/inputs/profile_input/view.cljs | 51 ++++++++++++++ src/quo2/core.cljs | 2 + src/quo2/core_spec.cljs | 1 + .../quo_preview/inputs/profile_input.cljs | 67 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 4 ++ 8 files changed, 188 insertions(+), 4 deletions(-) create mode 100644 src/quo2/components/inputs/profile_input/component_spec.cljs create mode 100644 src/quo2/components/inputs/profile_input/style.cljs create mode 100644 src/quo2/components/inputs/profile_input/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/inputs/profile_input.cljs diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index 0414bfa2a9..4254f268dd 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/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 diff --git a/src/quo2/components/inputs/profile_input/component_spec.cljs b/src/quo2/components/inputs/profile_input/component_spec.cljs new file mode 100644 index 0000000000..6a767ac105 --- /dev/null +++ b/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))))) diff --git a/src/quo2/components/inputs/profile_input/style.cljs b/src/quo2/components/inputs/profile_input/style.cljs new file mode 100644 index 0000000000..46c521d683 --- /dev/null +++ b/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}) diff --git a/src/quo2/components/inputs/profile_input/view.cljs b/src/quo2/components/inputs/profile_input/view.cljs new file mode 100644 index 0000000000..a904527ea0 --- /dev/null +++ b/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})]]])) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index b283da6267..3b6d9b0a78 100644 --- a/src/quo2/core.cljs +++ b/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 diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 9ca6336d40..9cfa4dbfa3 100644 --- a/src/quo2/core_spec.cljs +++ b/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] diff --git a/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs b/src/status_im2/contexts/quo_preview/inputs/profile_input.cljs new file mode 100644 index 0000000000..3667bcfe40 --- /dev/null +++ b/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}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c43c14e775..552fde2c08 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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}]