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 Preview lists component (#13830)

This commit is contained in:
Parvesh Monu 2022-09-12 17:44:20 +05:30 committed by GitHub
parent 52a32861b1
commit e4feb36ccc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 170 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/more12@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 B

BIN
resources/images/icons/more12@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 B

115
src/quo2/components/list_items/preview_list.cljs Normal file
View File

@ -0,0 +1,115 @@
(ns quo2.components.list-items.preview-list
(:require [quo.react-native :as rn]
[status-im.i18n.i18n :as i18n]
[quo2.foundations.colors :as colors]
[quo2.components.icon :as quo2.icons]
[quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.markdown.text :as quo2.text]))
(def params {32 {:border-radius {:circular 16 :rounded 10}
:hole-radius {:circular 18 :rounded 12}
:margin-left -8
:hole-size 36
:hole-x 22
:hole-y -2}
24 {:border-radius {:circular 12 :rounded 8}
:hole-radius {:circular 13 :rounded 9}
:margin-left -4
:hole-size 26
:hole-x 19
:hole-y -1}
16 {:border-radius {:circular 8 :rounded 8}
:hole-radius {:circular 9 :rounded 9}
:margin-left -4
:hole-size 18
:hole-x 11
:hole-y -1}})
;; TODO - Add avatar components for other types once implemented
(defn avatar [item type size]
(case type
:user [user-avatar/user-avatar
(merge {:ring? false
:status-indicator? false
:size (case size 32 :small 24 :xs 16 :xxxs)}
item)]))
(defn list-item [index type size item list-size margin-left
hole-size hole-radius hole-x hole-y]
(let [last-item? (= index (- list-size 1))]
[rn/hole-view {:style {:margin-left (if (= index 0) 0 margin-left)}
:holes (if last-item? []
[{:x hole-x
:y hole-y
:width hole-size
:height hole-size
:borderRadius hole-radius}])}
[avatar item type size]]))
(defn get-overflow-color [transparent? transparent-color light-color dark-color]
(if transparent?
transparent-color
(colors/theme-colors light-color dark-color)))
(defn overflow-label [label size transparent? border-radius margin-left]
[rn/view {:style {:width size
:height size
:margin-left margin-left
:border-radius border-radius
:justify-content :center
:align-items :center
:background-color (get-overflow-color
transparent?
colors/white-opa-10
colors/neutral-20
colors/neutral-70)}}
(if (= size 16)
[quo2.icons/icon :main-icons2/more {:size 12
:color (get-overflow-color
transparent?
colors/white-opa-70
colors/neutral-50
colors/neutral-40)}]
[quo2.text/text {:size (if (= size 32) :paragraph-2 :label)
:weight :medium
:style {:color (get-overflow-color
transparent?
colors/white-opa-70
colors/neutral-60
colors/neutral-40)
:margin-left -2}}
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
(if (< label 100)
(str "+" label)
(i18n/label :counter-99-plus))])])
(defn border-type [type]
(case type
(:account :collectible) :rounded
:circular))
(defn preview-list
"[preview-list opts items]
opts
{:type :user/:community/:account/:token/:collectible/:dapp
:size 32/24/16
:list-size override items count in overflow label (optional)
:transparent? overflow-label transparent?}
items preview list items (only 4 items is required for preview)
"
[{:keys [type size list-size transparent?]} items]
(let [items-arr (into [] items)
list-size (or list-size (count items))
margin-left (get-in params [size :margin-left])
hole-size (get-in params [size :hole-size])
border-radius (get-in params [size :border-radius (border-type type)])
hole-radius (get-in params [size :hole-radius (border-type type)])
hole-x (get-in params [size :hole-x])
hole-y (get-in params [size :hole-y])]
[rn/view {:style {:flex-direction :row}}
(for [index (range (if (> list-size 4) 3 list-size))]
^{:key (str index list-size)}
[list-item index type size (get items-arr index) list-size
margin-left hole-size hole-radius hole-x hole-y])
(when (> list-size 4)
[overflow-label (- list-size 3) size transparent? border-radius margin-left])]))

50
src/quo2/screens/list_items/preview_lists.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns quo2.screens.list-items.preview-lists
(:require [quo.react-native :as rn]
[reagent.core :as reagent]
[quo.previews.preview :as preview]
[quo2.foundations.colors :as colors]
[quo2.components.list-items.preview-list :as quo2]))
(def descriptor [{:label "Size:"
:key :size
:type :select
:options [{:key 32
:value "32"}
{:key 24
:value "24"}
{:key 16
:value "16"}]}
{:label "List Size"
:key :list-size
:default 10
:type :text}])
(def user-list-mock
[{:full-name "ABC DEF"}
{:full-name "GHI JKL"}
{:full-name "MNO PQR"}
{:full-name "STU VWX"}])
(defn cool-preview []
(let [state (reagent/atom {:type :user
:size 32
:list-size 10})
type (reagent/cursor state [:type])]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/preview-list @state
;; Mocked list items
(case @type
:user user-list-mock)]]])))
(defn preview-preview-lists []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])

6
src/quo2/screens/main.cljs
View File

@ -27,6 +27,7 @@
[quo2.screens.tags.status-tags :as status-tags]
[quo2.screens.tags.token-tag :as token-tag]
[quo2.screens.wallet.token-overview :as token-overview]
[quo2.screens.list-items.preview-lists :as preview-lists]
[re-frame.core :as re-frame]))
(def screens-categories
@ -92,7 +93,10 @@
:component token-tag/preview-token-tag}]
:wallet [{:name :token-overview
:insets {:top false}
:component token-overview/preview-token-overview}]})
:component token-overview/preview-token-overview}]
:list-items [{:name :preview-lists
:insets {:top false}
:component preview-lists/preview-preview-lists}]})
(def screens (flatten (map val screens-categories)))