Implement Preview lists component (#13830)
This commit is contained in:
Parvesh Monu
GitHub
parent
52a32861b1
commit
e4feb36ccc
Binary file not shown.
|
After Width: | Height: | Size: 181 B |
Binary file not shown.
|
After Width: | Height: | Size: 238 B |
|
|
@ -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])]))
|
||||
|
|
@ -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}]])
|
||||
|
|
@ -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)))
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue