Implement activity logs photos component (#16760)

src/quo2/components/notifications/activity_logs_photos/style.cljs

@@ -0,0 +1,13 @@
+(ns quo2.components.notifications.activity-logs-photos.style)
+
+(def photos-container
+  {:flex           1
+   :height         40
+   :flex-direction :row})
+
+(defn photo
+  [index]
+  {:width         40
+   :height        40
+   :border-radius 10
+   :margin-left   (if (= index 0) 0 8)})

src/quo2/components/notifications/activity_logs_photos/view.cljs

@@ -0,0 +1,14 @@
+(ns quo2.components.notifications.activity-logs-photos.view
+  (:require [react-native.core :as rn]
+            [quo2.components.notifications.activity-logs-photos.style :as style]))
+
+(defn view
+  [{:keys [photos]}]
+  [rn/view {:style style/photos-container}
+   (map-indexed
+    (fn [index photo]
+      ^{:key index}
+      [rn/image
+       {:source photo
+        :style  (style/photo index)}])
+    photos)])

src/quo2/core.cljs

@@ -63,6 +63,7 @@
     quo2.components.navigation.floating-shell-button
     quo2.components.navigation.page-nav
     quo2.components.notifications.activity-log.view
+    quo2.components.notifications.activity-logs-photos.view
     quo2.components.notifications.count-down-circle
     quo2.components.notifications.info-count
     quo2.components.notifications.notification-dot
@@ -214,6 +215,7 @@
 
 ;;;; NOTIFICATIONS
 (def activity-log quo2.components.notifications.activity-log.view/view)
+(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
 (def info-count quo2.components.notifications.info-count/info-count)
 (def notification-dot quo2.components.notifications.notification-dot/notification-dot)
 (def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)

src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs

@@ -40,9 +40,9 @@
   [{:source (resources/get-mock-image :photo1)}
    {:source (resources/get-mock-image :photo2)}
    {:source (resources/get-mock-image :photo3)}
-   {:source (resources/get-mock-image :photo4)}
+   {:source (resources/get-mock-image :photo1)}
-   {:source (resources/get-mock-image :photo5)}
+   {:source (resources/get-mock-image :photo2)}
-   {:source (resources/get-mock-image :photo6)}])
+   {:source (resources/get-mock-image :photo3)}])
 
 (defn cool-preview
   []

src/status_im2/contexts/quo_preview/main.cljs

@@ -63,6 +63,7 @@
     [status-im2.contexts.quo-preview.navigation.page-nav :as page-nav]
     [status-im2.contexts.quo-preview.navigation.top-nav :as top-nav]
     [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
+    [status-im2.contexts.quo-preview.notifications.activity-logs-photos :as activity-logs-photos]
     [status-im2.contexts.quo-preview.notifications.notification :as notification]
     [status-im2.contexts.quo-preview.notifications.toast :as toast]
     [status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card]
@@ -282,6 +283,9 @@
    :notifications     [{:name      :activity-logs
                         :options   {:topBar {:visible true}}
                         :component activity-logs/preview-activity-logs}
+                       {:name      :activity-logs-photos
+                        :options   {:topBar {:visible true}}
+                        :component activity-logs-photos/preview-activity-logs-photos}
                        {:name      :toast
                         :options   {:topBar {:visible true}}
                         :component toast/preview-toasts}

src/status_im2/contexts/quo_preview/notifications/activity_logs_photos.cljs

@@ -0,0 +1,53 @@
+(ns status-im2.contexts.quo-preview.notifications.activity-logs-photos
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label   "Photos Count:"
+    :key     :count
+    :type    :select
+    :options [{:key   1
+               :value "1"}
+              {:key   2
+               :value "2"}
+              {:key   3
+               :value "3"}
+              {:key   4
+               :value "4"}
+              {:key   5
+               :value "5"}
+              {:key   6
+               :value "6"}]}])
+
+(def mock-photos
+  [(resources/get-mock-image :photo1)
+   (resources/get-mock-image :photo2)
+   (resources/get-mock-image :photo3)
+   (resources/get-mock-image :photo1)
+   (resources/get-mock-image :photo2)
+   (resources/get-mock-image :photo3)])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:count 1})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [preview/customizer state descriptor]
+        [rn/view
+         [quo/activity-logs-photos {:photos (take (:count @state) mock-photos)}]]]])))
+
+(defn preview-activity-logs-photos
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs

@@ -93,9 +93,9 @@
   [{:source (resources/get-mock-image :photo1)}
    {:source (resources/get-mock-image :photo2)}
    {:source (resources/get-mock-image :photo3)}
-   {:source (resources/get-mock-image :photo4)}
+   {:source (resources/get-mock-image :photo1)}
-   {:source (resources/get-mock-image :photo5)}
+   {:source (resources/get-mock-image :photo2)}
-   {:source (resources/get-mock-image :photo6)}])
+   {:source (resources/get-mock-image :photo3)}])
 
 (defn get-mock-content
   [data]