Implement Preview lists component (#13830)

src/quo2/components/list_items/preview_list.cljs

@@ -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])]))

src/quo2/screens/list_items/preview_lists.cljs

@@ -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}]])

src/quo2/screens/main.cljs

@@ -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)))