Skip to content

Commit

Permalink
Refactor preview-list component
Browse files Browse the repository at this point in the history 
Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
  • Loading branch information
@smohamedjavid
smohamedjavid committed Aug 23, 2023
1 parent 59f98b0 commit f7b2f40
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 100 deletions.
49 changes: 49 additions & 0 deletions src/quo2/components/list_items/preview_list/properties.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
(ns quo2.components.list-items.preview-list.properties)

(defn border-type
[type]
(case type
(:accounts :collectibles) :squared
:rounded))

(def sizes
{:size/s-32 {:size 32
:user-avatar-size :small
:border-radius {:rounded 16 :squared 10}
:hole-radius {:rounded 18 :squared 12}
:margin-left -8
:hole-size 36
:hole-x 22
:hole-y -2}
:size/s-24 {:size 24
:user-avatar-size :xs
:border-radius {:rounded 12 :squared 8}
:hole-radius {:rounded 13 :squared 9}
:margin-left -4
:hole-size 26
:hole-x 19
:hole-y -1}
:size/s-20 {:size 20
:user-avatar-size :xxs
:border-radius {:rounded 10 :squared 8}
:hole-radius {:rounded 11 :squared 9}
:margin-left -4
:hole-size 22
:hole-x 15
:hole-y -1}
:size/s-16 {:size 16
:user-avatar-size :xxxs
:border-radius {:rounded 8 :squared 8}
:hole-radius {:rounded 9 :squared 9}
:margin-left -4
:hole-size 18
:hole-x 11
:hole-y -1}
:size/s-14 {:size 14
:user-avatar-size :xxxs
:border-radius {:rounded 7 :squared 7}
:hole-radius {:rounded 8 :squared 8}
:margin-left -2
:hole-size 16
:hole-x 11
:hole-y -1}})
157 changes: 67 additions & 90 deletions ...2/components/list_items/preview_list.cljs → ...ponents/list_items/preview_list/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,25 @@
(ns quo2.components.list-items.preview-list
(ns quo2.components.list-items.preview-list.view
(:require [quo2.components.avatars.account-avatar.view :as account-avatar]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as quo2.text]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[quo2.components.list-items.preview-list.properties :as properties]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[react-native.hole-view :as hole-view]))

(def params
{32 {:border-radius {:rounded 16 :squared 10}
:hole-radius {:rounded 18 :squared 12}
:margin-left -8
:hole-size 36
:hole-x 22
:hole-y -2}
24 {:border-radius {:rounded 12 :squared 8}
:hole-radius {:rounded 13 :squared 9}
:margin-left -4
:hole-size 26
:hole-x 19
:hole-y -1}
20 {:border-radius {:rounded 10 :squared 8}
:hole-radius {:rounded 11 :squared 9}
:margin-left -4
:hole-size 22
:hole-x 15
:hole-y -1}
16 {:border-radius {:rounded 8 :squared 8}
:hole-radius {:rounded 9 :squared 9}
:margin-left -4
:hole-size 18
:hole-x 11
:hole-y -1}
14 {:border-radius {:rounded 7 :squared 7}
:hole-radius {:rounded 8 :squared 8}
:margin-left -2
:hole-size 16
:hole-x 11
:hole-y -1}})

(def more-icon-for-sizes #{16 14})

(defn avatar
[item type size border-radius]
(case type
:user [user-avatar/user-avatar
(merge {:ring? false
:status-indicator? false
:size (case size
32 :small
24 :xs
20 :xxs
16 :xxxs)}
item)]

:accounts [account-avatar/view
(merge item {:size size})]

(:communities :tokens :collectibles :network :dapps) [fast-image/fast-image
{:source (:source item)
:style {:width size
:height size
:border-radius border-radius}}]
nil))

(defn list-item
[index type size item number margin-left
hole-size hole-radius hole-x hole-y border-radius]
(let [last-item? (= index (- number 1))]
[hole-view/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 border-radius]]))

;; This needs to be cleaned up once the "number tag" component is implemented
;; This overflow item needs to be cleaned up once the "number tag" component is implemented
;; https://github.com/status-im/status-mobile/issues/17045
(defn get-overflow-color
[blur? blur-light-color blur-dark-color light-color dark-color theme]
(if blur?
(colors/theme-colors blur-light-color blur-dark-color theme)
(colors/theme-colors light-color dark-color theme)))

(def more-icon-for-sizes #{16 14})

(defn overflow-label
[{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
[rn/view
Expand Down Expand Up @@ -131,39 +62,85 @@
(str "+" label)
more-than-99-label)])])

(defn border-type
[type]
(case type
(:accounts :collectibles) :squared
:rounded))
(defn- preview-item
[{:keys [item type size-key]}]
(let [size (get-in properties/sizes [size-key :size])
user-avatar-size (get-in properties/sizes [size-key :user-avatar-size])
border-radius (get-in properties/sizes
[size-key :border-radius (properties/border-type type)])]
(case type
:user [user-avatar/user-avatar
(merge {:ring? false
:status-indicator? false
:size user-avatar-size}
item)]

:accounts [account-avatar/view
(merge item {:size size})]

(:communities :collectibles) [fast-image/fast-image
{:source (:source item)
:style {:width size
:height size
:border-radius border-radius}}]

(:tokens :network :dapps) [fast-image/fast-image
{:source (:source item)
:style {:width size
:height size
:border-radius border-radius}}]
nil)))

(defn- list-item
[{:keys [index type size-key item number]}]
(let [last-item? (= index (- number 1))
margin-left (get-in properties/sizes [size-key :margin-left])
hole-size (get-in properties/sizes [size-key :hole-size])
hole-radius (get-in properties/sizes [size-key :hole-radius (properties/border-type type)])
hole-x (get-in properties/sizes [size-key :hole-x])
hole-y (get-in properties/sizes [size-key :hole-y])]
[hole-view/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}])}
[preview-item
{:item item
:type type
:size-key size-key}]]))

(defn- view-internal
"[preview-list opts items]
opts
{:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
:size 32/24/20/16/14
:size :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
:number number of items in the list (optional)
:blur? overflow-label blur?}
items preview list items (only 4 items is required for preview)
"
[{:keys [type size number blur? theme more-than-99-label]} items]
(let [items-arr (into [] items)
(let [size-key (if (contains? properties/sizes size) size :size/s-24)
items-arr (into [] items)
number (or number (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])]
margin-left (get-in properties/sizes [size-key :margin-left])
border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
[rn/view {:style {:flex-direction :row}}
(for [index (range (if (> number 4) 3 number))]
^{:key (str index number)}
[list-item index type size (get items-arr index) number
margin-left hole-size hole-radius hole-x hole-y border-radius])
[list-item
{:index index
:type type
:size-key size-key
:item (get items-arr index)
:number number}])
(when (> number 4)
[overflow-label
{:label (- number 3)
:size size
:size (get-in properties/sizes [size-key :size])
:blur? blur?
:border-radius border-radius
:margin-left margin-left
Expand Down
4 changes: 2 additions & 2 deletions src/quo2/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
quo2.components.list-items.channel
quo2.components.list-items.community.view
quo2.components.list-items.menu-item
quo2.components.list-items.preview-list
quo2.components.list-items.preview-list.view
quo2.components.list-items.token-value.view
quo2.components.list-items.user-list
quo2.components.loaders.skeleton
Expand Down Expand Up @@ -233,7 +233,7 @@
(def account-list-card quo2.components.list-items.account-list-card.view/view)
(def channel-list-item quo2.components.list-items.channel/list-item)
(def menu-item quo2.components.list-items.menu-item/menu-item)
(def preview-list quo2.components.list-items.preview-list/view)
(def preview-list quo2.components.list-items.preview-list.view/view)
(def user-list quo2.components.list-items.user-list/user-list)
(def community-list-item quo2.components.list-items.community.view/view)
(def token-value quo2.components.list-items.token-value.view/view)
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/communities/overview/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
[quo/preview-list
{:type :user
:number (count user-list)
:size 24}
:size :size/s-24}
user-list]
[quo/text
{:accessibility-label :communities-screen-title
Expand Down
12 changes: 6 additions & 6 deletions src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@
{:label "Size:"
:key :size
:type :select
:options [{:key 32
:options [{:key :size/s-32
:value "32"}
{:key 24
{:key :size/s-24
:value "24"}
{:key 20
{:key :size/s-20
:value "20"}
{:key 16
{:key :size/s-16
:value "16"}
{:key 14
{:key :size/s-14
:value "14"}]}
{:label "Number"
:key :number
Expand Down Expand Up @@ -109,7 +109,7 @@
(defn preview-preview-lists
[]
(let [state (reagent/atom {:type :accounts
:size 32
:size :size/s-32
:number 4
:more-than-99-label (i18n/label :counter-99-plus)})
type (reagent/cursor state [:type])
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
[quo/preview-list
{:type :collectibles
:more-than-99-label (i18n/label :counter-99-plus)
:size 24}
:size :size/s-24}
data]

constants/content-type-sticker
Expand Down

0 comments on commit f7b2f40

Please sign in to comment.