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

feat: category quo2 component (#16713) 

* feat: category component
This commit is contained in:
Omar Basem 2023-07-21 10:13:36 +04:00 committed by GitHub
parent 1b2ad33926
commit 76eea91ba2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 164 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/quo2/components/settings/category/component_spec.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns quo2.components.settings.category.component-spec
(:require [test-helpers.component :as h]
[quo2.components.settings.category.view :as category]))
(h/describe "category tests"
(h/test "category label renders"
(h/render [category/category
{:label "label"
:data [{:title "Item 1"
:left-icon :i/browser
:chevron? true}]}])
(h/is-truthy (h/get-by-text "label")))
(h/test "category item renders"
(h/render [category/category
{:label "label"
:data [{:title "Item 1"
:left-icon :i/browser
:chevron? true}]}])
(h/is-truthy (h/get-by-text "Item 1"))))

44
src/quo2/components/settings/category/style.cljs Normal file
View File

@ -0,0 +1,44 @@
(ns quo2.components.settings.category.style
(:require [quo2.foundations.colors :as colors]))
(def container
{:left 0
:right 0
:padding-horizontal 20
:padding-top 12
:padding-bottom 8})
(defn items
[theme blur?]
{:margin-top 12
:border-radius 16
:background-color (if blur?
colors/white-opa-5
(colors/theme-colors colors/white colors/neutral-95 theme))
:border-width 1
:border-color (if blur?
colors/white-opa-5
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
(defn separator
[theme blur?]
{:height 1
:background-color (if blur?
colors/white-opa-5
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
(defn blur-container
[]
{:position :absolute
:left 0
:right 0
:bottom 0
:top 0
:overflow :hidden})
(defn blur-view
[]
{:style {:flex 1}
:blur-radius 10
:blur-type (colors/theme-colors :light :dark)
:blur-amount 20})

27
src/quo2/components/settings/category/view.cljs Normal file
View File

@ -0,0 +1,27 @@
(ns quo2.components.settings.category.view
(:require
[quo2.components.markdown.text :as text]
[quo2.components.settings.settings-list.view :as settings-list]
[quo2.foundations.colors :as colors]
[react-native.blur :as blur]
[react-native.core :as rn]
[quo2.components.settings.category.style :as style]
[quo2.theme :as quo.theme]))
(defn- category-internal
[{:keys [label data blur? theme]}]
[rn/view {:style style/container}
(when blur?
[rn/view (style/blur-container) [blur/view (style/blur-view)]])
[text/text
{:weight :medium
:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
label]
[rn/flat-list
{:data data
:style (style/items theme blur?)
:render-fn (fn [item] [settings-list/settings-list item])
:separator [rn/view {:style (style/separator theme blur?)}]}]])
(def category (quo.theme/with-theme category-internal))

2
src/quo2/core.cljs
View File

@ -82,6 +82,7 @@
quo2.components.settings.privacy-option
quo2.components.settings.reorder-item.view
quo2.components.settings.settings-list.view
quo2.components.settings.category.view
quo2.components.share.qr-code.view
quo2.components.share.share-qr-code.view
quo2.components.tabs.account-selector
@ -231,6 +232,7 @@
(def account quo2.components.settings.accounts.view/account)
(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)
;;;; SHARE
(def qr-code quo2.components.share.qr-code.view/qr-code)

1
src/quo2/core_spec.cljs
View File

@ -37,5 +37,6 @@
[quo2.components.selectors.selectors.component-spec]
[quo2.components.settings.reorder-item.component-spec]
[quo2.components.settings.settings-list.component-spec]
[quo2.components.settings.category.component-spec]
[quo2.components.share.share-qr-code.component-spec]
[quo2.components.tags.--tests--.status-tags-component-spec]))

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

@ -95,6 +95,7 @@
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
[status-im2.contexts.quo-preview.settings.category :as category]
[status-im2.contexts.quo-preview.keycard.keycard :as keycard]
[status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]))
@ -330,7 +331,10 @@
:component settings-list/preview-settings-list}
{:name :reorder-item
:options {:topBar {:visible true}}
:component reorder-item/preview-reorder-item}]
:component reorder-item/preview-reorder-item}
{:name :category
:options {:topBar {:visible true}}
:component category/preview}]
:share [{:name :qr-code
:options {:topBar {:visible true}}
:component qr-code/preview-qr-code}

65
src/status_im2/contexts/quo_preview/settings/category.cljs Normal file
View File

@ -0,0 +1,65 @@
(ns status-im2.contexts.quo-preview.settings.category
(:require
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def item
{:title "Item 1"
:left-icon :i/browser
:chevron? true})
(def descriptor
[{:label "Category label:"
:key :label
:type :text}
{:label "Category size:"
:key :size
:type :text}
{:label "Blur:"
:key :blur?
:type :boolean}])
(def image-uri
"https://4kwallpapers.com/images/wallpapers/giau-pass-mountain-pass-italy-dolomites-landscape-mountain-750x1334-4282.jpg")
(def label "Label")
(defn preview
[]
(let [state (reagent/atom {:label "Label"
:size "5"
:blur? false})
{:keys [width height]} (rn/get-window)]
[:f>
(fn []
(let [data (repeat (js/parseInt (:size @state)) item)]
(rn/use-effect (fn []
(if (:blur? @state)
(theme/set-theme :dark)
(theme/set-theme :light)))
[(:blur? @state)])
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view
{:style {:flex 1
:padding-bottom 150
:margin-bottom 50
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}}
[rn/view
{:style {:min-height 180
:z-index 1}} [preview/customizer state descriptor]]
(when (:blur? @state)
[fast-image/fast-image
{:source {:uri image-uri}
:style {:width width
:height height
:position :absolute}}])
[rn/view
{:style {:background-color (if (:blur? @state)
colors/neutral-80-opa-80
(colors/theme-colors colors/neutral-5 colors/neutral-95))}}
[quo/category {:label (:label @state) :data data :blur? (:blur? @state)}]]]]))]))