status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add profile input to quo2 (#15323)

This commit is contained in:
Jamie Caprani 2023-03-14 13:52:15 +00:00 committed by GitHub
parent 4097aba39b
commit e98ce54830
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 188 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/quo2/components/buttons/button.cljs
View File

@ -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

29
src/quo2/components/inputs/profile_input/component_spec.cljs Normal file
View File

@ -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)))))

29
src/quo2/components/inputs/profile_input/style.cljs Normal file
View File

@ -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})

51
src/quo2/components/inputs/profile_input/view.cljs Normal file
View File

@ -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})]]]))

2
src/quo2/core.cljs
View File

@ -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

1
src/quo2/core_spec.cljs
View File

@ -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]

67
src/status_im2/contexts/quo_preview/inputs/profile_input.cljs Normal file
View File

@ -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}]])

4
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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}]