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/describe "Profile Input"
(h/test "renders user avatar with placeholder name if no value is specified" (h/test "renders user avatar with placeholder name if no value is specified"
(h/render [profile-input/profile-input (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")) (-> (js/expect (h/get-by-text "YN"))
(.toBeTruthy))) (.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.components.inputs.title-input.view :as title-input]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform]
[react-native.hole-view :as hole-view])) [react-native.hole-view :as hole-view]))
(defn profile-input (defn profile-input
@ -15,49 +14,42 @@
on-press on-press
title-input-props title-input-props
image-picker-props]}] image-picker-props]}]
(let [full-name (:full-name image-picker-props)] [rn/view
[rn/view {:style (style/container customization-color)}
{:style (style/container customization-color)} [rn/view
[rn/view [hole-view/hole-view
(if platform/ios? ;; Force re-render hole view when props are changed
[hole-view/hole-view ;; https://github.com/status-im/status-mobile/issues/15577
{:holes [{:x 33 {:key (hash
:y 24 (if (:profile-picture image-picker-props)
:width 24 (:profile-picture image-picker-props)
:height 24 image-picker-props))
:borderRadius 12}]} :holes [{:x 33
[user-avatar/user-avatar :y 24
(assoc image-picker-props :width 24
:customization-color customization-color :height 24
:full-name (if (seq full-name) :borderRadius 12}]}
full-name [user-avatar/user-avatar
placeholder) (assoc image-picker-props
:status-indicator? false :static? true
:size :medium)]] :status-indicator? false
[user-avatar/user-avatar :size :medium)]]
(assoc image-picker-props [buttons/button
:customization-color customization-color {:accessibility-label :select-profile-picture-button
:full-name (if (seq full-name) :type :grey
full-name :override-theme :dark
placeholder) :override-background-color (colors/alpha colors/white 0.05)
:status-indicator? false :on-press on-press
:size :medium)]) :icon-size 20
[buttons/button :width 24
{:accessibility-label :select-profile-picture-button :size 24
:type :grey :icon :i/camera
:override-theme :dark :style style/button
:override-background-color (colors/alpha colors/white 0.05) :inner-style style/button-inner} :i/camera]]
:on-press on-press [rn/view {:style style/input-container}
:icon-size 20 [title-input/title-input
:width 24 (merge title-input-props
:size 24 {:blur? true
:icon :i/camera :override-theme :dark
:style style/button :placeholder placeholder
:inner-style style/button-inner} :i/camera]] :customization-color customization-color})]]])
[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 :content
(fn [] (fn []
[method-menu/view on-change-profile-pic])}])) [method-menu/view on-change-profile-pic])}]))
:image-picker-props {:profile-picture @profile-pic :image-picker-props {:profile-picture (when @profile-pic {:uri @profile-pic})
:full-name @full-name} :full-name (if (seq @full-name)
@full-name
(i18n/label :t/your-name))
:customization-color @custom-color}
:title-input-props {:default-value @full-name :title-input-props {:default-value @full-name
:auto-focus true :auto-focus true
:max-length c/profile-name-max-length :max-length c/profile-name-max-length