fix(profile)_: Truncate profile name in settings screen (#20483)

After migrating from v1 to v2, some user names may be too long to fit in some
devices in the "Settings > Edit Profile > Name" setting. The solution was to
truncate in the UI the name to the max valid length in v2, which is 20
characters.

Other small improvements:

- Don't use entire Clojure maps as the :key in React. This is known to be slow
  because it's expensive for Clojure to generally transform a data structure
  into its string representation.
- Don't find the last item of a list using last and an equality between two
  maps. This will force each iteration to call last, which in turn will iterate
  over the entire list of items (we can think of the Clojure lazy seq as a
  linked list). Instead, we now cache the index outside the loop and do a number
  comparison.
- Don't pass entire props to style functions when not needed because
  destructuring has a cost. I wouldn't personally worry about this 99% of the
  time, but when there's only argument like in this PR where we were passing a
  single blur? argument, it's preferable to not use a map.
This commit is contained in:
Icaro Motta 2024-06-24 20:08:23 -03:00 committed by GitHub
parent 419e84db08
commit 9481890624
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 21 additions and 16 deletions

View File

@ -7,20 +7,23 @@
[react-native.core :as rn]))
(defn settings-category
[{:keys [label data container-style] :as props}]
[{:keys [label data blur? container-style]}]
(let [theme (quo.theme/use-theme)
settings-item (filter identity data)]
settings-items (remove nil? data)
last-index (dec (count settings-items))]
[rn/view {:style (merge (style/container label) container-style)}
(when label
[text/text
{:weight :medium
:size :paragraph-2
:style (style/label props theme)}
:style (style/label blur? theme)}
label])
[rn/view {:style (style/settings-items props theme)}
(for [item settings-item]
^{:key item}
[rn/view {:style (style/settings-items blur? theme)}
(map-indexed
(fn [index item]
^{:key (str label (:title item))}
[:<>
[settings-item/view item]
(when-not (= item (last settings-item))
[rn/view {:style (style/settings-separator props theme)}])])]]))
(when-not (= last-index index)
[rn/view {:style (style/settings-separator blur? theme)}])])
settings-items)]]))

View File

@ -11,7 +11,7 @@
:padding-bottom 8})
(defn settings-items
[{:keys [blur?]} theme]
[blur? theme]
{:border-radius 16
:background-color (if blur?
colors/white-opa-5
@ -22,7 +22,7 @@
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
(defn label
[{:keys [blur?]} theme]
[blur? theme]
{:margin-bottom 12
:color (if blur?
colors/white-opa-40
@ -32,7 +32,7 @@
{:margin-top 12})
(defn settings-separator
[{:keys [blur?]} theme]
[blur? theme]
{:height 1
:background-color (if blur?
colors/white-opa-5

View File

@ -116,7 +116,8 @@
[rn/view {:style (style/left-container (:image props))}
[text/text
{:weight :medium
:style {:color (when blur? colors/white)}} title]
:style {:color (when blur? colors/white)}}
title]
[description-component props]
[tag-component props]]]
[rn/view {:style (style/sub-container (:alignment action-props))}

View File

@ -3,6 +3,7 @@
[quo.foundations.colors :as colors]
[status-im.common.not-implemented :as not-implemented]
[status-im.config :as config]
[status-im.constants :as constants]
[status-im.contexts.profile.edit.style :as style]
[status-im.contexts.profile.utils :as profile.utils]
[utils.i18n :as i18n]
@ -19,7 +20,7 @@
:on-press #(rf/dispatch [:open-modal :edit-name])
:blur? true
:label :text
:label-props full-name
:label-props (utils/truncate-str full-name constants/profile-name-max-length)
:action :arrow
:container-style style/item-container}
{:title (i18n/label :t/bio)