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

Implement Data Item component (#16960) 

Implement Data Item component #16960
This commit is contained in:
mmilad75 2023-08-26 18:33:10 +03:30 committed by GitHub
parent 0ef7dc34e4
commit 6870000490
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 513 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/quo2/components/common/not_implemented/style.cljs Normal file
View File

@ -0,0 +1,12 @@
(ns quo2.components.common.not-implemented.style
(:require [quo2.foundations.colors :as colors]))
(defn text
[blur? theme]
{:border-color :red
:border-width 1
:color (if blur?
colors/white
(colors/theme-colors colors/neutral-100
colors/white
theme))})

11
src/quo2/components/common/not_implemented/view.cljs Normal file
View File

@ -0,0 +1,11 @@
(ns quo2.components.common.not-implemented.view
(:require [react-native.core :as rn]
[quo2.theme :as quo.theme]
[quo2.components.common.not-implemented.style :as style]))
(defn- view-internal
[{:keys [blur? theme]}]
[rn/text {:style (style/text blur? theme)}
"not implemented"])
(def view (quo.theme/with-theme view-internal))

178
src/quo2/components/settings/data_item/component_spec.cljs Normal file
View File

@ -0,0 +1,178 @@
(ns quo2.components.settings.data-item.component-spec
(:require [test-helpers.component :as h]
[quo2.core :as quo]))
(h/describe
"date item tests"
(h/test "title is visible"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-truthy (h/get-by-text "Label")))
(h/test "data item renders correctly if card? is false"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? false
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/has-style (h/query-by-label-text :data-item)
{:borderWidth nil}))
(h/test "data item renders correctly if card? is true and size is small"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :small
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/has-style (h/query-by-label-text :data-item)
{:borderWidth nil}))
(h/test "data item renders correctly if card? is true"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/has-style (h/query-by-label-text :data-item)
{:borderWidth 1}))
(h/test "subtitle is visible when status is not loading"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-truthy (h/get-by-text "Description")))
(h/test "right icon is not visible when icon-right? is false"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-falsy (h/query-by-label-text :icon-right)))
(h/test "right icon is visible when icon-right? is true"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? true
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-truthy (h/query-by-label-text :icon-right)))
(h/test "description icon is visible when description is icon"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :icon
:icon-right? true
:card? true
:label :preview
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-truthy (h/query-by-label-text :description-icon)))
(h/test "description image is visible when description is network"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :network
:icon-right? true
:card? true
:label :preview
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-truthy (h/query-by-label-text :description-image)))
(h/test "description emoji is visible when description is account"
(h/render [quo/data-item
{:on-press (h/mock-fn)
:blur? false
:description :account
:icon-right? true
:card? true
:label :preview
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow}])
(h/is-truthy (h/query-by-label-text :account-emoji))))

71
src/quo2/components/settings/data_item/style.cljs Normal file
View File

@ -0,0 +1,71 @@
(ns quo2.components.settings.data-item.style
(:require [quo2.foundations.colors :as colors]))
(defn container
[size card? blur? theme]
{:flex 1
:flex-direction :row
:justify-content :space-between
:padding-vertical (when (= size :default) 8)
:padding-horizontal (when (= size :default) 12)
:border-radius 16
:border-width (when (and card? (not= size :small)) 1)
:border-color (if blur?
colors/white-opa-10
(colors/theme-colors colors/neutral-10
colors/neutral-80
theme))})
(defn loading-container
[size blur? theme]
{:width (if (= size :default) 132 72)
:height (if (= size :default) 16 10)
:background-color (if blur?
colors/white-opa-5
(colors/theme-colors colors/neutral-5
colors/neutral-90
theme))
:border-radius (if (= size :default) 6 3)
:margin-vertical (if (= size :default) 4 3)})
(def subtitle-container
{:flex-direction :row
:margin-bottom 1})
(def right-container
{:flex-direction :row
:align-items :center})
(defn subtitle-icon-container
[description]
{:margin-right (when (not= :default description) 4)
:justify-content :center})
(defn title
[theme]
{:color (colors/theme-colors colors/neutral-50
colors/neutral-40
theme)
:margin-right 4})
(def title-container
{:flex-direction :row
:align-items :center})
(def image
{:width 16
:height 16})
(defn description
[blur? theme]
{:color (if blur?
colors/white
(colors/theme-colors colors/neutral-100
colors/white
theme))})
(defn right-icon
[label]
{:margin-left (if (or (= label :graph) (= label :none)) 12 8)})
(def left-side
{:flex 1})

126
src/quo2/components/settings/data_item/view.cljs Normal file
View File

@ -0,0 +1,126 @@
(ns quo2.components.settings.data-item.view
(:require [quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.settings.data-item.style :as style]
[quo2.foundations.colors :as colors]
[quo2.components.common.not-implemented.view :as not-implemented]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.components.list-items.preview-list.view :as preview-list]
[quo2.foundations.resources :as quo.resources]
[quo2.components.avatars.account-avatar.view :as account-avatar]
[utils.i18n :as i18n]))
(defn- left-loading
[{:keys [size blur? theme]}]
[rn/view {:style (style/loading-container size blur? theme)}])
(defn- left-subtitle
[{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
[rn/view {:style style/subtitle-container}
(when (not= :small size)
[rn/view {:style (style/subtitle-icon-container description)}
(case description
:icon [icons/icon icon
{:accessibility-label :description-icon
:size 16
:color icon-color}]
:account [account-avatar/view
{:customization-color customization-color
:size 16
:emoji emoji
:type :default}]
:network [rn/image
{:accessibility-label :description-image
:source (quo.resources/tokens :eth)
:style style/image}]
nil)])
[text/text
{:weight :medium
:size :paragraph-2
:style (style/description blur? theme)}
subtitle]])
(defn- left-title
[{:keys [title label size theme]}]
[rn/view {:style style/title-container}
[text/text
{:weight :regular
:size :paragraph-2
:style (style/title theme)}
title]
(when (and (= :graph label) (not= :small size))
[text/text
{:weight :regular
:size :label
:style (style/title theme)}
(i18n/label :t/days)])])
(defn- left-side
[{:keys [theme title status size blur? description icon subtitle label icon-color customization-color
emoji]}]
[rn/view {:style style/left-side}
[left-title
{:title title
:label label
:size size
:theme theme}]
(if (= status :loading)
[left-loading
{:size size
:blur? blur?
:theme theme}]
[left-subtitle
{:theme theme
:size size
:description description
:icon icon
:icon-color icon-color
:blur? blur?
:subtitle subtitle
:customization-color customization-color
:emoji emoji}])])
(defn- right-side
[{:keys [label icon-right? icon-color communities-list]}]
[rn/view {:style style/right-container}
(case label
:preview [preview-list/view
{:type :communities
:number 3
:size :size/s-24}
communities-list]
:graph [text/text "graph"]
:none nil
nil)
(when icon-right?
[rn/view {:style (style/right-icon label)}
[icons/icon
(if (= :none label)
:i/copy
:i/chevron-right)
{:accessibility-label :icon-right
:color icon-color
:size 20}]])])
(def view-internal
(fn [{:keys [blur? card? icon-right? label status size theme on-press communities-list] :as props}]
(let [icon-color (if (or blur? (= :dark theme))
colors/neutral-40
colors/neutral-50)]
(if (= :graph label)
[not-implemented/view {:blur? blur?}]
[rn/pressable
{:accessibility-label :data-item
:disabled (not icon-right?)
:on-press on-press
:style (style/container size card? blur? theme)}
[left-side props]
(when (and (= :default status) (not= :small size))
[right-side
{:label label
:icon-right? icon-right?
:icon-color icon-color
:communities-list communities-list}])]))))
(def view (quo.theme/with-theme view-internal))

2
src/quo2/core.cljs
View File

@ -96,6 +96,7 @@
quo2.components.selectors.reactions.view
quo2.components.selectors.selectors.view
quo2.components.settings.accounts.view
quo2.components.settings.data-item.view
quo2.components.settings.privacy-option
quo2.components.settings.reorder-item.view
quo2.components.settings.settings-list.view
@ -297,6 +298,7 @@
(def settings-list quo2.components.settings.settings-list.view/settings-list)
(def reorder-item quo2.components.settings.reorder-item.view/reorder-item)
(def category quo2.components.settings.category.view/category)
(def data-item quo2.components.settings.data-item.view/view)
;;;; Share
(def qr-code quo2.components.share.qr-code.view/qr-code)

1
src/quo2/core_spec.cljs
View File

@ -55,6 +55,7 @@
[quo2.components.settings.reorder-item.component-spec]
[quo2.components.settings.settings-list.component-spec]
[quo2.components.settings.category.component-spec]
[quo2.components.settings.data-item.component-spec]
[quo2.components.share.share-qr-code.component-spec]
[quo2.components.tags.status-tags-component-spec]
[quo2.components.wallet.account-card.component-spec]

6
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -92,6 +92,7 @@
[status-im2.contexts.quo-preview.selectors.filter :as filter]
[status-im2.contexts.quo-preview.selectors.selectors :as selectors]
[status-im2.contexts.quo-preview.settings.accounts :as accounts]
[status-im2.contexts.quo-preview.settings.data-item :as data-item]
[status-im2.contexts.quo-preview.settings.settings-list :as settings-list]
[status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
[status-im2.contexts.quo-preview.settings.reorder-item :as reorder-item]
@ -321,7 +322,10 @@
{:name :reorder-item
:component reorder-item/preview-reorder-item}
{:name :category
:component category/preview}]
:options {:topBar {:visible true}}
:component category/preview}
{:name :data-item
:component data-item/preview-data-item}]
:share [{:name :qr-code
:component qr-code/preview-qr-code}
{:name :share-qr-code

105
src/status_im2/contexts/quo_preview/settings/data_item.cljs Normal file
View File

@ -0,0 +1,105 @@
(ns status-im2.contexts.quo-preview.settings.data-item
(:require [quo2.core :as quo]
[react-native.core :as rn]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]
[react-native.blur :as blur]))
(def descriptor
[{:label "Blur:"
:key :blur?
:type :boolean}
{:label "Card:"
:key :card?
:type :boolean}
{:label "Icon Right:"
:key :icon-right?
:type :boolean}
{:label "Label:"
:type :select
:key :label
:options [{:key :none
:value "None"}
{:key :graph
:value "Graph"}
{:key :preview
:value "Preview"}]}
{:label "Description:"
:type :select
:key :description
:options [{:key :default
:value "Default"}
{:key :icon
:value "Icon"}
{:key :network
:value "Network"}
{:key :account
:value "Account"}]}
{:label "Status:"
:type :select
:key :status
:options [{:key :default
:value "Default"}
{:key :loading
:value "Loading"}]}
{:label "Size:"
:type :select
:key :size
:options [{:key :default
:value "Default"}
{:key :small
:value "Small"}]}])
(def communities-list
[{:source (resources/get-mock-image :coinbase)}
{:source (resources/get-mock-image :decentraland)}
{:source (resources/get-mock-image :rarible)}])
(defn cool-preview
[]
(let [state (reagent/atom {:on-press #(js/alert (str "pressed"))
:blur? false
:description :account
:icon-right? false
:card? true
:label :none
:status :default
:size :default
:title "Label"
:subtitle "Description"
:icon :i/placeholder
:emoji "🎮"
:customization-color :yellow
:communities-list communities-list})
blur? (reagent/cursor state [:blur?])]
(fn []
[rn/view
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
(when @blur?
[blur/view
{:style {:position :absolute
:left 0
:right 0
:bottom 0
:height 75
:background-color colors/neutral-80-opa-70}
:overlay-color :transparent}])
[rn/view
{:style {:align-items :center
:padding-vertical 10
:margin-horizontal 20}}
[quo/data-item @state]]])))
(defn preview-data-item
[]
[rn/view
{:style {:background-color (colors/theme-colors colors/white colors/neutral-100)
:flex 1}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

3
translations/en.json
View File

@ -2288,5 +2288,6 @@
"keypair-title": "{{name}}'s default keypair",
"about": "About",
"no-permissions": "No permissions",
"no-dapps": "No connected dApps"
"no-dapps": "No connected dApps",
"days": "Days"
}