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 d302a61
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 64 deletions.
116 changes: 62 additions & 54 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,4 +1,4 @@
(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]
Expand All @@ -10,61 +10,67 @@
[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})
{:size/s-32 {:size 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}
:size/s-24 {:size 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}
:size/s-20 {:size 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}
:size/s-16 {:size 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}
:size/s-14 {:size 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}})

(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)]
[item type size-key border-radius]
(let [size (get-in params [size-key :size])
user-avatar-size (case size-key
:size/s-32 :small
:size/s-24 :xs
:size/s-20 :xxs
:size/s-16 :xxxs
:xxxs)]
(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})]
: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))
(: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
Expand All @@ -89,6 +95,8 @@
(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 @@ -141,7 +149,7 @@
"[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)
Expand All @@ -163,7 +171,7 @@
(when (> number 4)
[overflow-label
{:label (- number 3)
:size size
:size (get-in params [size :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 d302a61

Please sign in to comment.