Move photo selector to status-im2 (#14661)

* Move photo selector to status-im2

src/status_im/ui/screens/screens.cljs

@@ -108,7 +108,6 @@
    [status-im.ui.screens.wallet.swap.views :as wallet.swap]
    [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
    [status-im2.contexts.chat.group-details.view :as group-details]
-   [status-im.ui2.screens.chat.photo-selector.view :as photo-selector]
    [status-im.ui2.screens.chat.components.new-chat.view :as new-chat-aio]))
 
 (defn right-button-options
@@ -207,10 +206,6 @@
     :options   {:topBar {:visible false}}
     :component pin-messages/pinned-messages}
 
-   {:name      :photo-selector
-    :options   {:topBar {:visible false}}
-    :component photo-selector/photo-selector}
-
    {:name      :group-chat-profile
     ;;TODO animated-header
     :options   {:topBar {:visible false}}

src/status_im/ui2/screens/chat/composer/view.cljs

@@ -15,7 +15,7 @@
             [status-im.ui2.screens.chat.composer.mentions :as mentions]
             [status-im.ui2.screens.chat.composer.reply :as reply]
             [status-im.ui2.screens.chat.composer.style :as style]
-            [status-im.ui2.screens.chat.photo-selector.view :as photo-selector]
+            [status-im2.contexts.chat.photo-selector.view :as photo-selector]
             [utils.re-frame :as rf]
             [status-im.utils.utils :as utils]
             [status-im2.contexts.chat.messages.list.view :refer [scroll-to-bottom]]

src/status_im2/contexts/chat/photo_selector/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.ui2.screens.chat.photo-selector.style
+(ns status-im2.contexts.chat.photo-selector.style
   (:require [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]))
 
@@ -37,6 +37,11 @@
    :margin-left      20
    :margin-bottom    24})
 
+(def title-container
+  {:flex-direction :row
+   :position       :absolute
+   :align-self     :center})
+
 (defn chevron-container
   []
   {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
@@ -68,3 +73,4 @@
    :border-radius 8
    :top           8
    :right         8})
+

src/status_im2/contexts/chat/photo_selector/view.cljs

@@ -1,47 +1,57 @@
-(ns status-im.ui2.screens.chat.photo-selector.view
+(ns status-im2.contexts.chat.photo-selector.view
   (:require [i18n.i18n :as i18n]
             [quo.components.safe-area :as safe-area]
             [quo2.components.notifications.info-count :as info-count]
-            [quo2.core :as quo2]
+            [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
             [reagent.core :as reagent]
-            [status-im.ui2.screens.chat.photo-selector.style :as style]
+            [status-im2.contexts.chat.photo-selector.style :as style]
             [status-im.utils.core :as utils]
+            [quo.react]
             [utils.re-frame :as rf]))
 
 (def selected (reagent/atom []))
 
+(defn on-press-confirm-selection
+  [chat-id]
+  (rf/dispatch [:chat.ui/clear-sending-images chat-id])
+  (doseq [item @selected]
+    (rf/dispatch [:chat.ui/camera-roll-pick item]))
+  (reset! selected [])
+  (rf/dispatch [:bottom-sheet/hide]))
+
 (defn bottom-gradient
   [chat-id selected-images]
   [:f>
    (fn []
      (let [safe-area (safe-area/use-safe-area)]
-       (when (or (pos? (count @selected)) selected-images)
+       (when (or (seq @selected) selected-images)
          [linear-gradient/linear-gradient
           {:colors [:black :transparent]
            :start  {:x 0 :y 1}
            :end    {:x 0 :y 0}
            :style  (style/gradient-container safe-area)}
-          [quo2/button
+          [quo/button
            {:style               {:align-self        :stretch
                                   :margin-horizontal 20}
-            :on-press #(do
+            :on-press            #(on-press-confirm-selection chat-id)
-                         (rf/dispatch [:chat.ui/clear-sending-images chat-id])
+            :accessibility-label :confirm-selection}
-                         (doseq [item @selected]
-                           (rf/dispatch [:chat.ui/camera-roll-pick item]))
-                         (reset! selected [])
-                         (rf/dispatch [:bottom-sheet/hide]))}
            (i18n/label :t/confirm-selection)]])))])
 
 (defn clear-button
   []
-  (when (pos? (count @selected))
+  (when (seq @selected)
     [rn/touchable-opacity
      {:on-press            #(reset! selected [])
-      :style    (style/clear-container)}
+      :style               (style/clear-container)
-     [quo2/text {:weight :medium} (i18n/label :t/clear)]]))
+      :accessibility-label :clear}
+     [quo/text {:weight :medium} (i18n/label :t/clear)]]))
+
+(defn remove-selected
+  [coll item]
+  (vec (remove #(= % item) coll)))
 
 (defn image
   [item index _ {:keys [window-width]}]
@@ -49,21 +59,24 @@
    {:active-opacity      1
     :on-press            (fn []
                            (if (some #{item} @selected)
-                        (reset! selected (vec (remove #(= % item) @selected)))
+                             (swap! selected remove-selected item)
-                        (swap! selected conj item)))}
+                             (swap! selected conj item)))
+    :accessibility-label (str "image-" index)}
    [rn/image
     {:source {:uri item}
      :style  (style/image window-width index)}]
    (when (some #{item} @selected)
      [rn/view {:style (style/overlay window-width)}])
    (when (some #{item} @selected)
-     [info-count/info-count {:style style/image-count}
+     [info-count/info-count
+      {:style               style/image-count
+       :accessibility-label (str "count-" index)}
       (inc (utils/first-index #(= item %) @selected))])])
 
 (defn photo-selector
   [chat-id]
   (rf/dispatch [:chat.ui/camera-roll-get-photos 20])
-  (let [selected-images (keys (get-in (rf/sub [:chat/inputs]) [chat-id :metadata :sending-image]))]
+  (let [selected-images (keys (rf/sub [:chats/sending-image]))]
     (when selected-images
       (reset! selected (vec selected-images)))
     [:f>
@@ -78,17 +91,15 @@
           [rn/touchable-opacity
            {:on-press #(js/alert "Camera: not implemented")
             :style    (style/camera-button-container)}
-           [quo2/icon :i/camera {:color (colors/theme-colors colors/neutral-100 colors/white)}]]
+           [quo/icon :i/camera {:color (colors/theme-colors colors/neutral-100 colors/white)}]]
           [rn/view
-           {:style {:flex-direction :row
+           {:style style/title-container}
-                    :position       :absolute
+           [quo/text {:weight :medium} (i18n/label :t/recent)]
-                    :align-self     :center}}
-           [quo2/text {:weight :medium} (i18n/label :t/recent)]
            [rn/view {:style (style/chevron-container)}
-            [quo2/icon :i/chevron-down {:color (colors/theme-colors colors/neutral-100 colors/white)}]]]
+            [quo/icon :i/chevron-down {:color (colors/theme-colors colors/neutral-100 colors/white)}]]]
           [clear-button]
           [rn/flat-list
-           {:key-fn                  (fn [item] item)
+           {:key-fn                  identity
             :render-fn               image
             :render-data             {:window-width window-width}
             :data                    camera-roll-photos
@@ -100,3 +111,4 @@
                                                     has-next-page?])}]
           [bottom-gradient chat-id selected-images]]))]))
 
+

src/status_im2/subs/chat/chats.cljs

@@ -145,6 +145,13 @@
  (fn [[inputs public-key]]
    (get inputs (chat.models/profile-chat-topic public-key))))
 
+(re-frame/reg-sub
+ :chats/sending-image
+ :<- [:chats/current-chat-id]
+ :<- [:chat/inputs]
+ (fn [[chat-id inputs]]
+   (get-in inputs [chat-id :metadata :sending-image])))
+
 (re-frame/reg-sub
  :chats/timeline-chat-input-text
  :<- [:chats/timeline-chat-input]