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

Fix account edit confirmation button (#18930) 

* fix: confirm button not visible

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: edit account btn text

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: removed bottom-action? prop

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: removed unused on-focus and on-blur props

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* ref: using floating-button-page

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: linting error

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: hide btn when disabled and keyboard hidden

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: react warning and header height (again)

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: replace padding prop with style

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: addressed review comments

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* chore: removed redundant :f> due to new reagent compiler

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

---------

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>
This commit is contained in:
Lungu Cristian 2024-03-01 12:00:32 +02:00 committed by GitHub
parent abd2b43ce6
commit a4b973970b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 67 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/status_im/common/floating_button_page/view.cljs
View File

@ -52,7 +52,8 @@
:remove-listeners remove-listeners})) :remove-listeners remove-listeners}))
(defn view (defn view
[{:keys [header footer customization-color footer-container-padding gradient-cover?] [{:keys [header footer customization-color footer-container-padding header-container-style
gradient-cover?]
:or {footer-container-padding (safe-area/get-top)}} & :or {footer-container-padding (safe-area/get-top)}} &
children] children]
(reagent/with-let [window-height (:height (rn/get-window)) (reagent/with-let [window-height (:height (rn/get-window))
@ -85,7 +86,9 @@
[:<> [:<>
(when gradient-cover? [quo/gradient-cover {:customization-color customization-color}]) (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}])
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[rn/view {:on-layout set-header-height} [rn/view
{:on-layout set-header-height
:style header-container-style}
header] header]
[rn/scroll-view [rn/scroll-view
{:on-scroll set-content-y-scroll {:on-scroll set-content-y-scroll

1
src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs
View File

@ -40,7 +40,6 @@
:on-change-color on-change-color :on-change-color on-change-color
:on-change-emoji on-change-emoji :on-change-emoji on-change-emoji
:watch-only? true :watch-only? true
:bottom-action? true
:bottom-action-label :t/add-watched-address :bottom-action-label :t/add-watched-address
:bottom-action-props {:customization-color @account-color :bottom-action-props {:customization-color @account-color
:disabled? (string/blank? @account-name) :disabled? (string/blank? @account-name)

6
src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs
View File

@ -1,4 +1,5 @@
(ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.style) (ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.style
(:require [quo.foundations.colors :as colors]))
(defn root-container (defn root-container
[top] [top]
@ -49,7 +50,8 @@
:margin-bottom 12}) :margin-bottom 12})
(defn bottom-action (defn bottom-action
[bottom] [{:keys [bottom theme]}]
{:padding-horizontal 20 {:padding-horizontal 20
:padding-vertical 12 :padding-vertical 12
:background-color (colors/theme-colors colors/white colors/neutral-100 theme)
:margin-bottom bottom}) :margin-bottom bottom})

60
src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs
View File

@ -1,34 +1,44 @@
(ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.view (ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.view
(:require [quo.core :as quo] (:require [quo.core :as quo]
[quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[status-im.common.floating-button-page.view :as floating-button-page]
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.contexts.wallet.common.screen-base.create-or-edit-account.style :as style] [status-im.contexts.wallet.common.screen-base.create-or-edit-account.style :as style]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
(defn view (defn view
[{:keys [margin-top? page-nav-right-side placeholder account-name account-color account-emoji [{:keys [page-nav-right-side placeholder account-name account-color account-emoji
on-change-name on-change-name
on-change-color on-change-color
on-change-emoji on-focus on-blur section-label bottom-action? on-change-emoji section-label
hide-bottom-action?
bottom-action-label bottom-action-props bottom-action-label bottom-action-props
custom-bottom-action watch-only?]} & children] custom-bottom-action watch-only?]} & children]
(let [{:keys [top bottom]} (safe-area/get-insets) (let [{window-width :width} (rn/get-window)
margin-top (if (false? margin-top?) 0 top) footer (when-not hide-bottom-action?
{window-width :width} (rn/get-window)] (if custom-bottom-action
[rn/keyboard-avoiding-view custom-bottom-action
{:style (style/root-container margin-top) [quo/button
:keyboard-vertical-offset (- bottom)} (merge
[quo/page-nav {:size 40
{:type :no-title :type :primary}
:background :blur bottom-action-props)
:right-side page-nav-right-side (i18n/label bottom-action-label)]))]
:icon-name :i/close [floating-button-page/view
:on-press #(rf/dispatch [:navigate-back])}] {:header [quo/page-nav
[quo/gradient-cover {:type :no-title
{:customization-color account-color :background :blur
:container-style (style/gradient-cover-container margin-top)}] :right-side page-nav-right-side
:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])}]
:footer footer
:gradient-cover? true
:footer-container-padding 0
:header-container-style {:padding-top (safe-area/get-top)}
:customization-color account-color}
(into (into
[:<> [:<>
[rn/view {:style style/account-avatar-container} [rn/view {:style style/account-avatar-container}
@ -52,9 +62,7 @@
:default-value account-name :default-value account-name
:auto-focus true :auto-focus true
:on-change-text on-change-name :on-change-text on-change-name
:container-style style/title-input-container :container-style style/title-input-container}]
:on-focus on-focus
:on-blur on-blur}]
[quo/divider-line {:container-style style/divider-1}] [quo/divider-line {:container-style style/divider-1}]
[quo/section-label [quo/section-label
{:section (i18n/label :t/colour) {:section (i18n/label :t/colour)
@ -71,14 +79,4 @@
[quo/section-label [quo/section-label
{:section (i18n/label section-label) {:section (i18n/label section-label)
:container-style style/section-container}])] :container-style style/section-container}])]
children) children)]))
(when bottom-action?
[rn/view {:style (style/bottom-action bottom)}
(if custom-bottom-action
custom-bottom-action
[quo/button
(merge
{:size 40
:type :primary}
bottom-action-props)
(i18n/label bottom-action-label)])])]))

59
src/status_im/contexts/wallet/edit_account/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.contexts.wallet.edit-account.view (ns status-im.contexts.wallet.edit-account.view
(:require [quo.core :as quo] (:require [quo.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.hooks :as hooks]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.contexts.wallet.common.screen-base.create-or-edit-account.view [status-im.contexts.wallet.common.screen-base.create-or-edit-account.view
:as create-or-edit-account] :as create-or-edit-account]
@ -35,34 +36,34 @@
(defn view (defn view
[] []
(let [edited-account-name (reagent/atom nil) (let [edited-account-name (reagent/atom nil)
show-confirm-button? (reagent/atom false) on-change-color (fn [edited-color {:keys [color] :as account}]
on-change-color (fn [edited-color {:keys [color] :as account}] (when (not= edited-color color)
(when (not= edited-color color) (save-account {:account account
(save-account {:account account :updated-key :color
:updated-key :color :new-value edited-color})))
:new-value edited-color}))) on-change-emoji (fn [edited-emoji {:keys [emoji] :as account}]
on-change-emoji (fn [edited-emoji {:keys [emoji] :as account}] (when (not= edited-emoji emoji)
(when (not= edited-emoji emoji) (save-account {:account account
(save-account {:account account :updated-key :emoji
:updated-key :emoji :new-value edited-emoji})))
:new-value edited-emoji}))) on-confirm-name (fn [account]
on-confirm-name (fn [account] (rn/dismiss-keyboard!)
(rn/dismiss-keyboard!) (save-account {:account account
(save-account {:account account :updated-key :name
:updated-key :name :new-value @edited-account-name}))]
:new-value @edited-account-name}))]
(fn [] (fn []
(let [{:keys [name emoji address color watch-only? default-account?] (let [{:keys [name emoji address color watch-only? default-account?]
:as account} (rf/sub [:wallet/current-viewing-account]) :as account} (rf/sub [:wallet/current-viewing-account])
network-details (rf/sub [:wallet/network-preference-details]) network-details (rf/sub [:wallet/network-preference-details])
test-networks-enabled? (rf/sub [:profile/test-networks-enabled?]) test-networks-enabled? (rf/sub [:profile/test-networks-enabled?])
network-preferences-key (if test-networks-enabled? network-preferences-key (if test-networks-enabled?
:test-preferred-chain-ids :test-preferred-chain-ids
:prod-preferred-chain-ids) :prod-preferred-chain-ids)
account-name (or @edited-account-name name) account-name (or @edited-account-name name)
button-disabled? (or (nil? @edited-account-name) button-disabled? (or (nil? @edited-account-name)
(= name @edited-account-name))] (= name @edited-account-name))
{:keys [keyboard-shown]} (hooks/use-keyboard)]
[create-or-edit-account/view [create-or-edit-account/view
{:page-nav-right-side [(when-not default-account? {:page-nav-right-side [(when-not default-account?
{:icon-name :i/delete {:icon-name :i/delete
@ -80,10 +81,8 @@
:on-change-color #(on-change-color % account) :on-change-color #(on-change-color % account)
:on-change-emoji #(on-change-emoji % account) :on-change-emoji #(on-change-emoji % account)
:section-label :t/account-info :section-label :t/account-info
:on-focus #(reset! show-confirm-button? true) :hide-bottom-action? (and button-disabled? (not keyboard-shown))
:on-blur #(reset! show-confirm-button? false) :bottom-action-label :t/confirm
:bottom-action? @show-confirm-button?
:bottom-action-label :t/update-account-name
:bottom-action-props {:customization-color color :bottom-action-props {:customization-color color
:disabled? button-disabled? :disabled? button-disabled?
:on-press #(on-confirm-name account)}} :on-press #(on-confirm-name account)}}