Merge branch 'develop' into slideshow

src/quo/components/wallet/network_bridge/style.cljs

@@ -4,7 +4,7 @@
 
 (defn container
   [network state theme]
-  {:flex               1
+  {:width              136
    :height             44
    :border-width       1
    :border-radius      12

src/quo/components/wallet/network_bridge/view.cljs

@@ -10,8 +10,12 @@
     [react-native.core :as rn]))
 
 (defn network-bridge-add
-  [{:keys [network state theme]}]
-  [rn/view {:style (merge (style/container network state theme) (style/add-container theme))}
+  [{:keys [network state theme container-style on-press]}]
+  [rn/pressable
+   {:style    (merge (style/container network state theme)
+                     (style/add-container theme)
+                     container-style)
+    :on-press on-press}
    [icon/icon :i/add-circle {:size 12 :no-color true}]])
 
 (defn- network->text
@@ -21,13 +25,14 @@
         :else                 (string/capitalize (name network))))
 
 (defn view-internal
-  [{:keys [theme network status amount container-style] :as args}]
+  [{:keys [theme network status amount container-style on-press] :as args}]
   (if (= status :add)
     [network-bridge-add args]
-    [rn/view
+    [rn/pressable
      {:style               (merge (style/container network status theme) container-style)
       :accessible          true
-      :accessibility-label :container}
+      :accessibility-label :container
+      :on-press            on-press}
      (if (= status :loading)
        [rn/view
         {:style               (style/loading-skeleton theme)

src/status_im/contexts/chat/messenger/lightbox/animations.cljs → src/status_im/common/lightbox/animations.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.animations
+(ns status-im.common.lightbox.animations
   (:require
     [react-native.reanimated :as reanimated]))
 

src/status_im/contexts/chat/messenger/lightbox/bottom_view.cljs → src/status_im/common/lightbox/bottom_view.cljs

@@ -1,33 +1,33 @@
-(ns status-im.contexts.chat.messenger.lightbox.bottom-view
+(ns status-im.common.lightbox.bottom-view
   (:require
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.constants :as c]
-    [status-im.contexts.chat.messenger.lightbox.style :as style]
-    [status-im.contexts.chat.messenger.lightbox.text-sheet.view :as text-sheet]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.common.lightbox.style :as style]
+    [status-im.common.lightbox.text-sheet.view :as text-sheet]
     [utils.re-frame :as rf]))
 
 (defn get-small-item-layout
   [_ index]
   #js
-   {:length c/small-image-size
-    :offset (* (+ c/small-image-size 8) index)
+   {:length constants/small-image-size
+    :offset (* (+ constants/small-image-size 8) index)
     :index  index})
 
 (defn- f-small-image
   [item index _ {:keys [scroll-index props]}]
-  (let [size (if (= @scroll-index index) c/focused-image-size c/small-image-size)
+  (let [size (if (= @scroll-index index) constants/focused-image-size constants/small-image-size)
         size-value (anim/use-val size)
         {:keys [scroll-index-lock? small-list-ref flat-list-ref]}
         props]
     (anim/animate size-value size)
     [rn/touchable-opacity
      {:active-opacity 1
       :on-press       (fn []
-                        (rf/dispatch [:chat.ui/zoom-out-signal @scroll-index])
+                        (rf/dispatch [:lightbox/zoom-out-signal @scroll-index])
                         (reset! scroll-index-lock? true)
                         (js/setTimeout #(reset! scroll-index-lock? false) 500)
                         (js/setTimeout
@@ -38,9 +38,9 @@
                            (.scrollToIndex ^js @flat-list-ref
                                            #js {:animated true :index index}))
                          (if platform/ios? 50 150))
-                        (rf/dispatch [:chat.ui/update-shared-element-id (:message-id item)]))}
+                        (rf/dispatch [:lightbox/update-animation-shared-element-id (:id item)]))}
      [reanimated/fast-image
-      {:source {:uri (:image (:content item))}
+      {:source {:uri (:image item)}
        :style  (reanimated/apply-animations-to-style {:width  size-value
                                                       :height size-value}
                                                      {:border-radius 10})}]]))
@@ -50,20 +50,26 @@
   [:f> f-small-image item index _ render-data])
 
 (defn bottom-view
-  [messages index scroll-index insets animations derived item-width props state transparent?]
-  (let [padding-horizontal (- (/ item-width 2) (/ c/focused-image-size 2))]
+  [{:keys [images index scroll-index insets animations derived item-width props state transparent?
+           bottom-text-component]}]
+  (let [padding-horizontal (- (/ item-width 2) (/ constants/focused-image-size 2))]
     [reanimated/linear-gradient
      {:colors   [colors/neutral-100-opa-100 colors/neutral-100-opa-80 colors/neutral-100-opa-0]
       :location [0.2 0.9]
       :start    {:x 0 :y 1}
       :end      {:x 0 :y 0}
       :style    (style/gradient-container insets animations derived transparent?)}
-     [text-sheet/view messages animations state props]
+     (when bottom-text-component
+       [text-sheet/view
+        {:overlay-opacity  (:overlay-opacity animations)
+         :overlay-z-index  (:overlay-z-index state)
+         :text-sheet-lock? (:text-sheet-lock? props)
+         :text-component   bottom-text-component}])
      [rn/flat-list
       {:ref                               #(reset! (:small-list-ref props) %)
-       :key-fn                            :message-id
-       :style                             {:height c/small-list-height}
-       :data                              messages
+       :key-fn                            :id
+       :style                             {:height constants/small-list-height}
+       :data                              images
        :render-fn                         small-image
        :render-data                       {:scroll-index scroll-index
                                            :props        props}

src/status_im/contexts/chat/messenger/lightbox/constants.cljs → src/status_im/common/lightbox/constants.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.constants)
+(ns status-im.common.lightbox.constants)
 
 (def ^:const small-image-size 40)
 (def ^:const focused-extra-size 16)

src/status_im/contexts/chat/messenger/lightbox/effects.cljs → src/status_im/common/lightbox/effects.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.effects
+(ns status-im.common.lightbox.effects
   (:require [react-native.blob :as blob]
             [react-native.cameraroll :as cameraroll]
             [react-native.fs :as fs]
@@ -10,7 +10,7 @@
   {:trusty platform/ios?
    :path   (str (fs/cache-dir) "/StatusIm_Image.jpeg")})
 
-(rf/reg-fx :effects.chat/share-image
+(rf/reg-fx :effects.lightbox/share-image
  (fn [uri]
    (blob/fetch uri
                config
@@ -20,7 +20,7 @@
                              #(fs/unlink downloaded-url)
                              #(fs/unlink downloaded-url))))))
 
-(rf/reg-fx :effects.chat/save-image-to-gallery
+(rf/reg-fx :effects.lightbox/save-image-to-gallery
  (fn [[uri on-success]]
    (blob/fetch uri
                config

src/status_im/common/lightbox/events.cljs

@@ -0,0 +1,37 @@
+(ns status-im.common.lightbox.events
+  (:require [reagent.core :as reagent]
+            status-im.common.lightbox.effects
+            [utils.re-frame :as rf]))
+
+(rf/reg-event-fx :lightbox/navigate-to-lightbox
+ (fn [{:keys [db]} [animation-shared-element-id screen-params]]
+   (reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
+   {:db (assoc db :animation-shared-element-id animation-shared-element-id)}))
+
+(rf/reg-event-fx :lightbox/update-animation-shared-element-id
+ (fn [{:keys [db]} [animation-shared-element-id]]
+   {:db (assoc db :animation-shared-element-id animation-shared-element-id)}))
+
+(rf/reg-event-fx :lightbox/exit-lightbox-signal
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/exit-signal value)}))
+
+(rf/reg-event-fx :lightbox/zoom-out-signal
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/zoom-out-signal value)}))
+
+(rf/reg-event-fx :lightbox/orientation-change
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/orientation value)}))
+
+(rf/reg-event-fx :lightbox/lightbox-scale
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/scale value)}))
+
+(rf/reg-event-fx :lightbox/share-image
+ (fn [_ [uri]]
+   {:effects.lightbox/share-image uri}))
+
+(rf/reg-event-fx :lightbox/save-image-to-gallery
+ (fn [_ [uri on-success]]
+   {:effects.lightbox/save-image-to-gallery [uri on-success]}))

src/status_im/contexts/chat/messenger/lightbox/style.cljs → src/status_im/common/lightbox/style.cljs

@@ -1,9 +1,9 @@
-(ns status-im.contexts.chat.messenger.lightbox.style
+(ns status-im.common.lightbox.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.constants :as c]))
+    [status-im.common.lightbox.constants :as constants]))
 
 ;;;; VIEW
 (defn image
@@ -33,7 +33,7 @@
    {:position           :absolute
     :padding-horizontal 20
     :top                (if (or platform/ios? (not landscape?)) top-inset 0)
-    :height             c/top-view-height
+    :height             constants/top-view-height
     :z-index            4
     :flex-direction     :row
     :justify-content    :space-between
@@ -44,7 +44,7 @@
 (defn top-gradient
   [insets]
   {:position :absolute
-   :height   (+ c/top-view-height (:top insets) 0)
+   :height   (+ constants/top-view-height (:top insets) 0)
    :top      (- (:top insets))
    :left     0
    :right    0})
@@ -71,12 +71,12 @@
     :display        (if @transparent? :none :flex)
     :bottom         0
     :padding-bottom (:bottom insets)
-    :padding-top    c/text-min-height
+    :padding-top    constants/text-min-height
     :z-index        3}))
 
 (defn content-container
   [padding-horizontal]
-  {:padding-vertical   c/small-list-padding-vertical
+  {:padding-vertical   constants/small-list-padding-vertical
    :padding-horizontal padding-horizontal
    :align-items        :center
    :justify-content    :center})

src/status_im/contexts/chat/messenger/lightbox/text_sheet/style.cljs → src/status_im/common/lightbox/text_sheet/style.cljs

@@ -1,8 +1,8 @@
-(ns status-im.contexts.chat.messenger.lightbox.text-sheet.style
+(ns status-im.common.lightbox.text-sheet.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]))
+    [status-im.common.lightbox.constants :as constants]))
 
 (defn sheet-container
   [{:keys [height top]}]
@@ -14,10 +14,10 @@
     :right    0}))
 
 (defn text-style
-  [expanding-message?]
+  [expandable-text?]
   {:color             colors/white
    :margin-horizontal 20
-   :align-items       (when-not expanding-message? :center)
+   :align-items       (when-not expandable-text? :center)
    :flex-grow         1})
 
 (def bar-container

src/status_im/contexts/chat/messenger/lightbox/text_sheet/utils.cljs → src/status_im/common/lightbox/text_sheet/utils.cljs

@@ -1,10 +1,10 @@
-(ns status-im.contexts.chat.messenger.lightbox.text-sheet.utils
+(ns status-im.common.lightbox.text-sheet.utils
   (:require
     [oops.core :as oops]
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
     [reagent.core :as r]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]))
+    [status-im.common.lightbox.constants :as constants]))
 
 (defn- collapse-sheet
   [{:keys [derived-value overlay-opacity saved-top expanded? overlay-z-index]}]
@@ -16,10 +16,10 @@
 
 (defn sheet-gesture
   [{:keys [derived-value saved-top overlay-opacity gradient-opacity]}
-   expanded-height max-height full-height overlay-z-index expanded? dragging? expanding-message?]
+   expanded-height max-height full-height overlay-z-index expanded? dragging? expandable-text?]
   (let [disable-gesture-update (r/atom false)]
     (-> (gesture/gesture-pan)
-        (gesture/enabled expanding-message?)
+        (gesture/enabled expandable-text?)
         (gesture/on-start (fn []
                             (reset! overlay-z-index 1)
                             (reset! dragging? true)