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:
parent
419e84db08
commit
9481890624
|
@ -7,20 +7,23 @@
|
||||||
[react-native.core :as rn]))
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
(defn settings-category
|
(defn settings-category
|
||||||
[{:keys [label data container-style] :as props}]
|
[{:keys [label data blur? container-style]}]
|
||||||
(let [theme (quo.theme/use-theme)
|
(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)}
|
[rn/view {:style (merge (style/container label) container-style)}
|
||||||
(when label
|
(when label
|
||||||
[text/text
|
[text/text
|
||||||
{:weight :medium
|
{:weight :medium
|
||||||
:size :paragraph-2
|
:size :paragraph-2
|
||||||
:style (style/label props theme)}
|
:style (style/label blur? theme)}
|
||||||
label])
|
label])
|
||||||
[rn/view {:style (style/settings-items props theme)}
|
[rn/view {:style (style/settings-items blur? theme)}
|
||||||
(for [item settings-item]
|
(map-indexed
|
||||||
^{:key item}
|
(fn [index item]
|
||||||
|
^{:key (str label (:title item))}
|
||||||
[:<>
|
[:<>
|
||||||
[settings-item/view item]
|
[settings-item/view item]
|
||||||
(when-not (= item (last settings-item))
|
(when-not (= last-index index)
|
||||||
[rn/view {:style (style/settings-separator props theme)}])])]]))
|
[rn/view {:style (style/settings-separator blur? theme)}])])
|
||||||
|
settings-items)]]))
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
:padding-bottom 8})
|
:padding-bottom 8})
|
||||||
|
|
||||||
(defn settings-items
|
(defn settings-items
|
||||||
[{:keys [blur?]} theme]
|
[blur? theme]
|
||||||
{:border-radius 16
|
{:border-radius 16
|
||||||
:background-color (if blur?
|
:background-color (if blur?
|
||||||
colors/white-opa-5
|
colors/white-opa-5
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||||
|
|
||||||
(defn label
|
(defn label
|
||||||
[{:keys [blur?]} theme]
|
[blur? theme]
|
||||||
{:margin-bottom 12
|
{:margin-bottom 12
|
||||||
:color (if blur?
|
:color (if blur?
|
||||||
colors/white-opa-40
|
colors/white-opa-40
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
{:margin-top 12})
|
{:margin-top 12})
|
||||||
|
|
||||||
(defn settings-separator
|
(defn settings-separator
|
||||||
[{:keys [blur?]} theme]
|
[blur? theme]
|
||||||
{:height 1
|
{:height 1
|
||||||
:background-color (if blur?
|
:background-color (if blur?
|
||||||
colors/white-opa-5
|
colors/white-opa-5
|
||||||
|
|
|
@ -116,7 +116,8 @@
|
||||||
[rn/view {:style (style/left-container (:image props))}
|
[rn/view {:style (style/left-container (:image props))}
|
||||||
[text/text
|
[text/text
|
||||||
{:weight :medium
|
{:weight :medium
|
||||||
:style {:color (when blur? colors/white)}} title]
|
:style {:color (when blur? colors/white)}}
|
||||||
|
title]
|
||||||
[description-component props]
|
[description-component props]
|
||||||
[tag-component props]]]
|
[tag-component props]]]
|
||||||
[rn/view {:style (style/sub-container (:alignment action-props))}
|
[rn/view {:style (style/sub-container (:alignment action-props))}
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
[quo.foundations.colors :as colors]
|
[quo.foundations.colors :as colors]
|
||||||
[status-im.common.not-implemented :as not-implemented]
|
[status-im.common.not-implemented :as not-implemented]
|
||||||
[status-im.config :as config]
|
[status-im.config :as config]
|
||||||
|
[status-im.constants :as constants]
|
||||||
[status-im.contexts.profile.edit.style :as style]
|
[status-im.contexts.profile.edit.style :as style]
|
||||||
[status-im.contexts.profile.utils :as profile.utils]
|
[status-im.contexts.profile.utils :as profile.utils]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
|
@ -19,7 +20,7 @@
|
||||||
:on-press #(rf/dispatch [:open-modal :edit-name])
|
:on-press #(rf/dispatch [:open-modal :edit-name])
|
||||||
:blur? true
|
:blur? true
|
||||||
:label :text
|
:label :text
|
||||||
:label-props full-name
|
:label-props (utils/truncate-str full-name constants/profile-name-max-length)
|
||||||
:action :arrow
|
:action :arrow
|
||||||
:container-style style/item-container}
|
:container-style style/item-container}
|
||||||
{:title (i18n/label :t/bio)
|
{:title (i18n/label :t/bio)
|
||||||
|
|
Loading…
Reference in New Issue