status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-24 08:38:28 +00:00
Code Issues Projects Releases Wiki Activity

Refactor - Info/Info Message component (#20551)

Browse Source
This commit is contained in:
Ajay Sivan 2024-07-02 16:36:37 +05:30 committed by GitHub
parent 0581fc2f9d
commit b650591e58
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 194 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/quo/components/buttons/predictive_keyboard/view.cljs
View File

@ -2,7 +2,7 @@
(:require
[quo.components.buttons.button.view :as button]
[quo.components.buttons.predictive-keyboard.style :as style]
[quo.components.info.info-message :as info-message]
[quo.components.info.info-message.view :as info-message]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
@ -57,17 +57,17 @@
:key-fn str}]
:error
[info-message/info-message
{:icon :i/info
:size :default
:type :error}
[info-message/view
{:icon :i/info
:size :default
:status :error}
text]
:info
[info-message/info-message
(merge {:icon :i/info
:size :default
:type (if (= type :error) :error :default)}
[info-message/view
(merge {:icon :i/info
:size :default
:status (if (= type :error) :error :default)}
(when blur?
{:text-color colors/white-opa-70
:icon-color colors/white-opa-40}))

48
src/quo/components/info/info_message.cljs
View File

@ -1,48 +0,0 @@
(ns quo.components.info.info-message
(:require
[quo.components.icon :as quo.icons]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
(defn get-color
[k theme]
(case k
:success (colors/resolve-color :success theme)
:error (colors/resolve-color :danger theme)
:warning (colors/resolve-color :warning theme)
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(defn info-message
"[info-message opts \"message\"]
opts
{:type :default/:success/:error
:size :default/:tiny
:icon :i/info ;; info message icon
:text-color colors/white ;; text color override
:icon-color colors/white ;; icon color override
:no-icon-color? false ;; disable tint color for icon"
[{:keys [type size icon text-color icon-color no-icon-color? style accessibility-label
container-style]} message]
(let [theme (quo.theme/use-theme)
weight (if (= size :default) :regular :medium)
icon-size (if (= size :default) 16 12)
size (if (= size :default) :paragraph-2 :label)
text-color (or text-color (get-color type theme))
icon-color (or icon-color text-color)]
[rn/view
{:style (merge {:flex-direction :row
:align-items :center}
style
container-style)}
[quo.icons/icon icon
{:color icon-color
:no-color no-icon-color?
:size icon-size}]
[text/text
{:accessibility-label accessibility-label
:size size
:weight weight
:style {:color text-color
:margin-horizontal 4}} message]]))

32
src/quo/components/info/info_message/component_spec.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns quo.components.info.info-message.component-spec
(:require
[quo.components.info.info-message.view :as info-message]
[test-helpers.component :as h]))
(h/describe "Info: Info Message"
(h/test "basic render"
(h/render-with-theme-provider
[info-message/view
{:status :default
:size :default
:accessibility-label :info-message
:icon :i/placeholder} "Message"])
(h/is-truthy (h/get-by-label-text :info-message)))
(h/test "render with correct message"
(h/render-with-theme-provider
[info-message/view
{:status :default
:size :default
:accessibility-label :info-message
:icon :i/placeholder} "Message"])
(h/is-truthy (h/get-by-text "Message")))
(h/test "render icon"
(h/render-with-theme-provider
[info-message/view
{:status :default
:size :default
:accessibility-label :info-message
:icon :i/placeholder} "Message"])
(h/is-truthy (h/get-by-label-text :icon))))

6
src/quo/components/info/info_message/style.cljs Normal file
View File

@ -0,0 +1,6 @@
(ns quo.components.info.info-message.style)
(def container
{:flex-direction :row
:gap 4
:align-items :center})

53
src/quo/components/info/info_message/view.cljs Normal file
View File

@ -0,0 +1,53 @@
(ns quo.components.info.info-message.view
(:require [quo.components.icon :as icons]
[quo.components.info.info-message.style :as style]
[quo.components.markdown.text :as text]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[schema.core :as schema]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:status {:optional true} [:maybe [:enum :default :success :error :warning]]]
[:size {:optional true} [:maybe [:enum :default :tiny]]]
[:blur? {:optional true} [:maybe :boolean]]
[:icon :keyword]
[:color {:optional true} [:maybe :string]]
[:text-color {:optional true} [:maybe :string]]
[:icon-color {:optional true} [:maybe :string]]
[:no-icon-color? {:optional true} [:maybe :boolean]]
[:accessibility-label {:optional true} [:maybe :keyword]]
[:container-style {:optional true} [:maybe :map]]]]
[:message :string]]
:any])
(defn- get-color
[status theme blur?]
(case status
:success (if blur? colors/success-60 (colors/resolve-color :success theme))
:error (if blur? colors/danger-60 (colors/resolve-color :danger theme))
:warning (if blur? colors/warning-60 (colors/resolve-color :warning theme))
(if blur? colors/white-opa-40 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))))
(defn view-internal
[{:keys [status size blur? icon color icon-color text-color no-icon-color? container-style
accessibility-label]} message]
(let [theme (quo.theme/use-theme)
default-color (get-color status theme blur?)
text-color (or text-color color default-color)
icon-color (or icon-color color default-color)]
[rn/view {:style (merge style/container container-style)}
[icons/icon icon
{:size (if (= size :tiny) 12 16)
:color icon-color
:no-color? no-icon-color?}]
[text/text
{:size (if (= size :tiny) :label :paragraph-2)
:accessibility-label accessibility-label
:style {:color text-color}} message]]))
(def view (schema/instrument #'view-internal ?schema))

4
src/quo/core.cljs
View File

@ -68,7 +68,7 @@
quo.components.graph.wallet-graph.view
quo.components.header
quo.components.icon
quo.components.info.info-message
quo.components.info.info-message.view
quo.components.info.information-box.view
quo.components.inputs.address-input.view
quo.components.inputs.input.view
@ -301,7 +301,7 @@
(def icon quo.components.icon/icon)
;;;; Info
(def info-message quo.components.info.info-message/info-message)
(def info-message quo.components.info.info-message.view/view)
(def information-box quo.components.info.information-box.view/view)
;;;; Inputs

1
src/quo/core_spec.cljs
View File

@ -41,6 +41,7 @@
quo.components.dropdowns.network-dropdown.component-spec
quo.components.gradient.gradient-cover.component-spec
quo.components.graph.wallet-graph.component-spec
quo.components.info.info-message.component-spec
quo.components.inputs.address-input.component-spec
quo.components.inputs.input.component-spec
quo.components.inputs.locked-input.component-spec

8
src/status_im/common/password_authentication/view.cljs
View File

@ -31,10 +31,10 @@
:on-change-text #(reset! entered-password %)}]
(when (not-empty error)
[quo/info-message
{:type :error
:size :default
:icon :i/info
:containstyle {:margin-top 8}}
{:status :error
:size :default
:icon :i/info
:container-style {:margin-top 8}}
(i18n/label :t/oops-wrong-password)])
[quo/button
{:container-style {:margin-bottom 12 :margin-top 40}

6
src/status_im/common/standard_authentication/password_input/view.cljs
View File

@ -34,9 +34,9 @@
[theme])]
[rn/view {:style style/error-message}
[quo/info-message
{:type :error
:size :default
:icon :i/info}
{:status :error
:size :default
:icon :i/info}
error-message]
[rn/pressable
{:hit-slop {:top 6 :bottom 20 :left 0 :right 0}

8
src/status_im/contexts/chat/group_create/view.cljs
View File

@ -105,10 +105,10 @@
:max-length constants/max-group-chat-name-length}]
(when error-message
[quo/info-message
{:type :error
:icon :i/info
:size :default
:style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
{:status :error
:icon :i/info
:size :default
:container-style {:margin-top 8 :margin-left 20 :margin-bottom 16}}
error-message])
[quo/divider-line]
[rn/view

13
src/status_im/contexts/onboarding/create_password/view.cljs
View File

@ -38,14 +38,11 @@
[rn/view {:style style/info-message}
(when shown
[quo/info-message
{:type status
:size :default
:icon (if (= status :success) :i/positive-state :i/info)
:text-color (when (= status :default)
colors/white-70-blur)
:icon-color (when (= status :default)
colors/white-70-blur)
:style {}}
{:status status
:size :default
:icon (if (= status :success) :i/positive-state :i/info)
:color (when (= status :default)
colors/white-70-blur)}
text])]])
(defn password-inputs

11
src/status_im/contexts/onboarding/create_profile/view.cljs
View File

@ -158,12 +158,11 @@
:on-change-text on-change-text}}]]
[quo/info-message
{:type info-type
:size :default
:icon (if valid-name? :i/positive-state :i/info)
:text-color (when (= :default info-type) colors/white-70-blur)
:icon-color (when (= :default info-type) colors/white-70-blur)
:style style/info-message}
{:status info-type
:size :default
:icon (if valid-name? :i/positive-state :i/info)
:color (when (= :default info-type) colors/white-70-blur)
:container-style style/info-message}
info-message]
[quo/text
{:size :paragraph-2

35
src/status_im/contexts/preview/quo/info/info_message.cljs
View File

@ -1,28 +1,43 @@
(ns status-im.contexts.preview.quo.info.info-message
(:require
[quo.core :as quo]
[reagent.core :as reagent]
[react-native.core :as rn]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:key :type
[{:key :status
:type :select
:options [{:key :default}
{:key :success}
{:key :error}]}
{:key :error}
{:key :warning}]}
{:key :size
:type :select
:options [{:key :default}
{:key :tiny}]}
{:key :blur?
:type :boolean}
{:key :icon
:type :select
:options [{:key :i/placeholder}
{:key :i/info}]}
{:key :message
:type :text}])
(defn view
[]
(let [state (reagent/atom {:type :default
:size :default
:icon :i/placeholder
:message "This is a message"})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/info-message @state (:message @state)]])))
(let [[state set-state] (rn/use-state
{:status :default
:size :default
:message "This is a message"
:blur? false
:icon :i/placeholder})
blur? (:blur? state)]
[preview/preview-container
{:state state
:descriptor descriptor
:blur-dark-only? true
:show-blur-background? blur?
:blur? blur?
:set-state set-state}
[quo/info-message (dissoc state :message) (:message state)]]))

6
src/status_im/contexts/preview/quo/notifications/notification.cljs
View File

@ -65,9 +65,9 @@
:customization-color :blue}
:header [rn/view
[quo/info-message
{:type :success
:size :tiny
:icon :i/placeholder}
{:status :success
:size :tiny
:icon :i/placeholder}
"info-message as title"]]
:body [quo/snippet {:language :clojure :max-lines 15 :syntax true}
snippet-preview/clojure-example]

6
src/status_im/contexts/profile/contact/add_nickname/view.cljs
View File

@ -68,9 +68,9 @@
:on-change-text on-nickname-change
:on-submit-editing on-nickname-submit}]
[quo/info-message
{:icon :i/info
:size :default
:type (if-not (string/blank? error-msg) :error :default)}
{:icon :i/info
:size :default
:status (if-not (string/blank? error-msg) :error :default)}
(if-not (string/blank? error-msg)
error-msg
(i18n/label :t/nickname-visible-to-you))]]

6
src/status_im/contexts/profile/edit/bio/view.cljs
View File

@ -58,9 +58,9 @@
:on-change-text on-change-text}]
(when-not (string/blank? error-msg)
[quo/info-message
{:type :error
:size :default
:icon :i/info}
{:status :error
:size :default
:icon :i/info}
error-msg])]
[rn/view {:style style/button-wrapper}
[quo/button

6
src/status_im/contexts/profile/edit/name/view.cljs
View File

@ -58,9 +58,9 @@
:on-change-text on-change-text}]
(when-not (string/blank? @error-msg)
[quo/info-message
{:type :error
:size :default
:icon :i/info}
{:status :error
:size :default
:icon :i/info}
@error-msg])]
[rn/view {:style style/button-wrapper}
[quo/button

7
src/status_im/contexts/profile/settings/screens/password/change_password/new_password_form.cljs
View File

@ -24,12 +24,11 @@
[rn/view {:style style/info-message}
(when shown?
[quo/info-message
(cond-> {:type status
:size :default}
(cond-> {:status status
:size :default}
(not= :success status) (assoc :icon :i/info)
(= :success status) (assoc :icon :i/positive-state)
(= :default status) (assoc :text-color colors/white-70-blur
:icon-color colors/white-70-blur))
(= :default status) (assoc :color colors/white-70-blur))
text])]])
(defn- calc-password-strength

6
src/status_im/contexts/profile/settings/screens/password/change_password/old_password_form.cljs
View File

@ -43,9 +43,9 @@
{:style style/error-container}
(when error
[quo/info-message
{:type :error
:size :default
:icon :i/info}
{:status :error
:size :default
:icon :i/info}
(i18n/label :t/oops-wrong-password)])]
[quo/information-box
{:type :error

6
src/status_im/contexts/settings/wallet/keypairs_and_accounts/missing_keypairs/import_private_key/view.cljs
View File

@ -128,9 +128,9 @@
:default-value private-key}]
(when flow-state
[quo/info-message
{:type (if (= flow-state :correct-private-key) :success :error)
:size :default
:icon :i/info}
{:status (if (= flow-state :correct-private-key) :success :error)
:size :default
:icon :i/info}
(case flow-state
:correct-private-key (i18n/label :t/correct-private-key)
:invalid-private-key (i18n/label :t/invalid-private-key)

3
src/status_im/contexts/settings/wallet/keypairs_and_accounts/rename/view.cljs
View File

@ -94,9 +94,8 @@
:error? (not (string/blank? error-msg))}]
(when-not (string/blank? error-msg)
[quo/info-message
{:type :error
{:status :error
:size :default
:icon :i/info
:container-style style/error-container}
error-msg])]]))

4
src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs
View File

@ -85,8 +85,8 @@
{:accessibility-label :error-message
:size :default
:icon :i/alert
:type :error
:style style/info-message}
:status :error
:container-style style/info-message}
error-msg])))
(defn- existing-saved-address

10
src/status_im/contexts/wallet/add_account/add_address_to_watch/view.cljs
View File

@ -103,8 +103,8 @@
(when activity-state
[quo/info-message
(assoc props
:style style/info-message
:size :default)
:container-style style/info-message
:size :default)
(i18n/label message)])))
(defn view
@ -163,7 +163,7 @@
{:accessibility-label :error-message
:size :default
:icon :i/info
:type :error
:style style/info-message}
:status :error
:container-style style/info-message}
@validation-msg]
[activity-indicator activity-state])]]))))
[activity-indicator])]]))))

12
src/status_im/contexts/wallet/add_account/create_account/edit_derivation_path/view.cljs
View File

@ -117,12 +117,12 @@
{:weight :monospace}
(:address derivation-path)]]
[quo/info-message
{:type (case state
:has-activity :success
:no-activity :warning
:default)
:icon (if (= state :scanning) :i/scanning :i/done)
:style style/info}
{:status (case state
:has-activity :success
:no-activity :warning
:default)
:icon (if (= state :scanning) :i/scanning :i/done)
:style style/info}
(i18n/label (case state
:has-activity :t/address-activity
:no-activity :t/address-no-activity

2
src/status_im/contexts/wallet/add_account/create_account/key_pair_name/view.cljs
View File

@ -91,7 +91,7 @@
:error error}]
(when error
[quo/info-message
{:type :error
{:status :error
:size :default
:icon :i/info
:container-style style/error-container}

2
src/status_im/contexts/wallet/add_account/create_account/view.cljs
View File

@ -87,7 +87,7 @@
:container-style (style/title-input-container error)}]
(when error
[quo/info-message
{:type :error
{:status :error
:size :default
:icon :i/info
:container-style {:margin-left 20

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

@ -62,7 +62,7 @@
:container-style (style/title-input-container error)}]
(when error
[quo/info-message
{:type :error
{:status :error
:size :default
:icon :i/info
:container-style {:margin-left 20

8
src/status_im/contexts/wallet/send/input_amount/view.cljs
View File

@ -109,10 +109,10 @@
[]
[rn/view {:style style/no-routes-found-container}
[quo/info-message
{:type :error
:icon :i/alert
:size :default
:style {:margin-top 15}}
{:status :error
:icon :i/alert
:size :default
:container-style {:margin-top 15}}
(i18n/label :t/no-routes-found)]])
(defn- not-enough-asset

6
src/status_im/contexts/wallet/send/select_address/view.cljs
View File

@ -200,9 +200,9 @@
(when (and (not valid-ens-or-address?) (> (count @input-value) 0))
[rn/view {:style {:padding 20}}
[quo/info-message
{:type :error
:icon :i/info
:size :default}
{:status :error
:icon :i/info
:size :default}
(i18n/label :t/invalid-address)]])
(if (or @input-focused? (> (count @input-value) 0))
[rn/keyboard-avoiding-view