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

fix hole view usage for create profile picture (#16001)

This commit is contained in:
Parvesh Monu 2023-06-09 14:15:26 +05:30 committed by GitHub
parent a5f1028e67
commit 9b52bba95d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo2/components/inputs/profile_input/component_spec.cljs
View File

@ -5,7 +5,8 @@
(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"}])
{:placeholder "Your Name"
:image-picker-props {:full-name "Your Name"}}])
(-> (js/expect (h/get-by-text "YN"))
(.toBeTruthy)))

86
src/quo2/components/inputs/profile_input/view.cljs
View File

@ -6,7 +6,6 @@
[quo2.components.inputs.title-input.view :as title-input]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.hole-view :as hole-view]))
(defn profile-input
@ -15,49 +14,42 @@
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
(if platform/ios?
[hole-view/hole-view
{:holes [{:x 33
:y 24
:width 24
:height 24
:borderRadius 12}]}
[user-avatar/user-avatar
(assoc image-picker-props
:customization-color customization-color
:full-name (if (seq full-name)
full-name
placeholder)
:status-indicator? false
:size :medium)]]
[user-avatar/user-avatar
(assoc 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
{:blur? true
:override-theme :dark
:placeholder placeholder
:customization-color customization-color})]]]))
[rn/view
{:style (style/container customization-color)}
[rn/view
[hole-view/hole-view
;; Force re-render hole view when props are changed
;; https://github.com/status-im/status-mobile/issues/15577
{:key (hash
(if (:profile-picture image-picker-props)
(:profile-picture image-picker-props)
image-picker-props))
:holes [{:x 33
:y 24
:width 24
:height 24
:borderRadius 12}]}
[user-avatar/user-avatar
(assoc image-picker-props
:static? true
: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
{:blur? true
:override-theme :dark
:placeholder placeholder
:customization-color customization-color})]]])

7
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -106,8 +106,11 @@
:content
(fn []
[method-menu/view on-change-profile-pic])}]))
:image-picker-props {:profile-picture @profile-pic
:full-name @full-name}
:image-picker-props {:profile-picture (when @profile-pic {:uri @profile-pic})
:full-name (if (seq @full-name)
@full-name
(i18n/label :t/your-name))
:customization-color @custom-color}
:title-input-props {:default-value @full-name
:auto-focus true
:max-length c/profile-name-max-length