feat: reimplement composer (#15639)

* feat: reimplement composer (1)

Author: OmarBasem

Diff for: .gitignore

@@ -7,6 +7,7 @@
 
 # Xcode
 #
+/ios/.xcode.env.local
 /component-spec
 result/
 build/

Diff for: resources/images/icons2/20x20/[email protected]

@@ -76,6 +76,7 @@
 (def neutral-90-opa-0 (alpha neutral-90 0))
 
 ;;95 with transparency
+(def neutral-95-opa-0 (alpha neutral-95 0))
 (def neutral-95-opa-60 (alpha neutral-95 0.6))
 (def neutral-95-opa-70 (alpha neutral-95 0.7))
 (def neutral-95-opa-80 (alpha neutral-95 0.8))
@@ -84,6 +85,7 @@
 
 ;;100 with transparency
 (def neutral-100-opa-0 (alpha neutral-100 0))
+(def neutral-100-opa-5 (alpha neutral-100 0.05))
 (def neutral-100-opa-10 (alpha neutral-100 0.1))
 (def neutral-100-opa-30 (alpha neutral-100 0.3))
 (def neutral-100-opa-60 (alpha neutral-100 0.6))

Diff for: resources/images/icons2/20x20/[email protected]

@@ -171,6 +171,15 @@
                     (with-decay (clj->js {:velocity velocity
                                           :clamp    clamp}))))
 
+(defn animate
+  ([animation value]
+   (animate animation value default-duration))
+  ([animation value duration]
+   (set-shared-value animation
+                     (with-timing value
+                                  (clj->js {:duration duration
+                                            :easing   (default-easing)})))))
+
 (defn with-timing-duration
   [val duration]
   (with-timing val

Diff for: resources/images/icons2/20x20/[email protected]

@@ -39,6 +39,24 @@
   (let [current-chat-id (or chat-id (:current-chat-id db))]
     {:db (assoc-in db [:chat/inputs current-chat-id :input-text] (text->emoji new-input))}))
 
+(rf/defn set-input-content-height
+  {:events [:chat.ui/set-input-content-height]}
+  [{db :db} content-height chat-id]
+  (let [current-chat-id (or chat-id (:current-chat-id db))]
+    {:db (assoc-in db [:chat/inputs current-chat-id :input-content-height] content-height)}))
+
+(rf/defn set-input-maximized
+  {:events [:chat.ui/set-input-maximized]}
+  [{db :db} maximized? chat-id]
+  (let [current-chat-id (or chat-id (:current-chat-id db))]
+    {:db (assoc-in db [:chat/inputs current-chat-id :input-maximized?] maximized?)}))
+
+(rf/defn set-input-refocus
+  {:events [:chat.ui/set-input-refocus]}
+  [{db :db} refocus? chat-id]
+  (let [current-chat-id (or chat-id (:current-chat-id db))]
+    {:db (assoc-in db [:chat/inputs current-chat-id :input-refocus?] refocus?)}))
+
 (rf/defn select-mention
   {:events [:chat.ui/select-mention]}
   [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}]

Diff for: resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,21 @@
+(ns status-im2.contexts.chat.bottom-sheet-composer.actions.style
+  (:require
+    [quo2.foundations.colors :as colors]
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]))
+
+(def actions-container
+  {:height          constants/actions-container-height
+   :justify-content :space-between
+   :align-items     :center
+   :z-index         2
+   :flex-direction  :row})
+
+(defn send-button
+  [opacity z-index]
+  (reanimated/apply-animations-to-style
+   {:opacity opacity}
+   {:position         :absolute
+    :right            0
+    :z-index          z-index
+    :background-color (colors/theme-colors colors/white colors/neutral-95)}))

Diff for: resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,148 @@
+(ns status-im2.contexts.chat.bottom-sheet-composer.actions.view
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [react-native.permissions :as permissions]
+    [react-native.platform :as platform]
+    [react-native.reanimated :as reanimated]
+    [reagent.core :as reagent]
+    [status-im2.common.alert.events :as alert]
+    [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]
+    [status-im2.contexts.chat.messages.list.view :as messages.list]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [status-im2.contexts.chat.bottom-sheet-composer.actions.style :as style]))
+
+(defn send-message
+  [{:keys [input-ref]}
+   {:keys [text-value focused? maximized?]}
+   {:keys [height saved-height last-height opacity background-y container-opacity]}
+   window-height]
+  (reanimated/animate height constants/input-height)
+  (reanimated/set-shared-value saved-height constants/input-height)
+  (reanimated/set-shared-value last-height constants/input-height)
+  (reanimated/animate opacity 0)
+  (when-not @focused?
+    (js/setTimeout #(reanimated/animate container-opacity constants/empty-opacity) 300))
+  (js/setTimeout #(reanimated/set-shared-value background-y
+                                               (- window-height))
+                 300)
+  (rf/dispatch [:chat.ui/send-current-message])
+  (rf/dispatch [:chat.ui/set-input-maximized false])
+  (rf/dispatch [:chat.ui/set-input-content-height constants/input-height])
+  (rf/dispatch [:chat.ui/set-chat-input-text nil])
+  (reset! maximized? false)
+  (reset! text-value "")
+  (when @input-ref
+    (.clear ^js @input-ref))
+  (messages.list/scroll-to-bottom))
+
+(defn send-button
+  [props
+   {:keys [text-value] :as state}
+   animations
+   window-height
+   images?]
+  [:f>
+   (fn []
+     (let [btn-opacity (reanimated/use-shared-value 0)
+           z-index     (reagent/atom 0)]
+       [:f>
+        (fn []
+          (rn/use-effect (fn []
+                           (if (or (not-empty @text-value) images?)
+                             (when-not (= @z-index 1)
+                               (reset! z-index 1)
+                               (js/setTimeout #(reanimated/animate btn-opacity 1) 50))
+                             (when-not (= @z-index 0)
+                               (reanimated/animate btn-opacity 0)
+                               (js/setTimeout #(reset! z-index 0) 300))))
+                         [(and (empty? @text-value) (not images?))])
+          [reanimated/view
+           {:style (style/send-button btn-opacity @z-index)}
+           [quo/button
+            {:icon                true
+             :size                32
+             :accessibility-label :send-message-button
+             :on-press            #(send-message props state animations window-height)}
+            :i/arrow-up]])]))])
+
+(defn audio-button
+  []
+  [quo/button
+   {:on-press #(js/alert "to be added")
+    :icon     true
+    :type     :outline
+    :size     32}
+   :i/audio])
+
+(defn camera-button
+  []
+  [quo/button
+   {:on-press #(js/alert "to be implemented")
+    :icon     true
+    :type     :outline
+    :size     32
+    :style    {:margin-right 12}}
+   :i/camera])
+
+(defn open-photo-selector
+  [{:keys [input-ref]}
+   {:keys [focused?]}
+   {:keys [height]}
+   insets]
+  (permissions/request-permissions
+   {:permissions [:read-external-storage :write-external-storage]
+    :on-allowed  (fn []
+                   (when platform/android?
+                     (when @focused?
+                       (rf/dispatch [:chat.ui/set-input-refocus true]))
+                     (when @input-ref
+                       (.blur ^js @input-ref)))
+                   (rf/dispatch [:chat.ui/set-input-content-height
+                                 (reanimated/get-shared-value height)])
+                   (rf/dispatch [:open-modal :photo-selector {:insets insets}]))
+    :on-denied   (fn []
+                   (alert/show-popup (i18n/label :t/error)
+                                     (i18n/label
+                                      :t/external-storage-denied)))}))
+
+(defn image-button
+  [props state animations insets]
+  [quo/button
+   {:on-press #(open-photo-selector props state animations insets)
+    :icon     true
+    :type     :outline
+    :size     32
+    :style    {:margin-right 12}}
+   :i/image])
+
+(defn reaction-button
+  []
+  [quo/button
+   {:on-press #(js/alert "to be implemented")
+    :icon     true
+    :type     :outline
+    :size     32
+    :style    {:margin-right 12}}
+   :i/reaction])
+
+(defn format-button
+  []
+  [quo/button
+   {:on-press #(js/alert "to be implemented")
+    :icon     true
+    :type     :outline
+    :size     32}
+   :i/format])
+
+(defn view
+  [props state animations window-height insets images?]
+  [rn/view {:style style/actions-container}
+   [rn/view {:style {:flex-direction :row}}
+    [camera-button]
+    [image-button props state animations insets]
+    [reaction-button]
+    [format-button]]
+   [send-button props state animations window-height images?]
+   [audio-button]])

Diff for: resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,30 @@
+(ns status-im2.contexts.chat.bottom-sheet-composer.constants
+  (:require
+    [quo2.foundations.typography :as typography]
+    [react-native.platform :as platform]))
+
+(def ^:const bar-container-height 20)
+
+(def ^:const input-height (if platform/ios? 32 42))
+
+(def ^:const actions-container-height 56)
+
+(def ^:const composer-default-height (+ bar-container-height input-height actions-container-height))
+
+(def ^:const multiline-minimized-height (+ input-height 18))
+
+(def ^:const empty-opacity 0.7)
+
+(def ^:const images-container-height 76)
+
+(def ^:const extra-content-offset (if platform/ios? 6 0))
+
+(def ^:const content-change-threshold 10)
+
+(def ^:const drag-threshold 30)
+
+(def ^:const velocity-threshold -1000)
+
+(def ^:const background-threshold 0.75)
+
+(def ^:const line-height (:line-height typography/paragraph-1))

Diff for: resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,92 @@
+(ns status-im2.contexts.chat.bottom-sheet-composer.effects
+  (:require
+    [status-im.async-storage.core :as async-storage]
+    [react-native.core :as rn]
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.bottom-sheet-composer.constants :as constants]
+    [status-im2.contexts.chat.bottom-sheet-composer.keyboard :as kb]
+    [utils.re-frame :as rf]
+    [utils.number :as utils.number]))
+
+(defn reenter-screen-effect
+  [{:keys [text-value saved-cursor-position maximized?]}
+   {:keys [content-height]}
+   {:keys [input-content-height input-text input-maximized?]}]
+  (when (and (empty? @text-value) (not= input-text nil))
+    (reset! text-value input-text)
+    (reset! content-height input-content-height)
+    (reset! saved-cursor-position (count input-text)))
+  (when input-maximized?
+    (reset! maximized? true)))
+
+(defn maximized-effect
+  [{:keys [maximized?]}
+   {:keys [height saved-height last-height]}
+   {:keys [max-height]}
+   {:keys [input-content-height]}]
+  (when (or @maximized? (>= input-content-height max-height))
+    (reanimated/animate height max-height)
+    (reanimated/set-shared-value saved-height max-height)
+    (reanimated/set-shared-value last-height max-height)))
+
+(defn refocus-effect
+  [{:keys [input-ref]}
+   {:keys [input-refocus?]}]
+  (when (and input-refocus? @input-ref)
+    (.focus ^js @input-ref)
+    (rf/dispatch [:chat.ui/set-input-refocus false])))
+
+(defn layout-effect
+  [{:keys [lock-layout?]}]
+  (when-not @lock-layout?
+    (js/setTimeout #(reset! lock-layout? true) 500)))
+
+(defn kb-default-height-effect
+  [{:keys [kb-default-height]}]
+  (when-not @kb-default-height
+    (async-storage/get-item :kb-default-height
+                            #(reset! kb-default-height (utils.number/parse-int % nil)))))
+
+(defn background-effect
+  [{:keys [maximized?]}
+   {:keys [opacity background-y]}
+   {:keys [max-height]}
+   {:keys [input-content-height]}]
+  (when (or @maximized? (>= input-content-height (* max-height constants/background-threshold)))
+    (reanimated/set-shared-value background-y 0)
+    (reanimated/animate opacity 1)))
+
+(defn images-effect
+  [{:keys [container-opacity]}
+   images?]
+  (when images?
+    (reanimated/animate container-opacity 1)))
+
+(defn empty-effect
+  [{:keys [text-value maximized? focused?]}
+   {:keys [container-opacity]}
+   images?]
+  (when (and (empty? @text-value) (not images?) (not @maximized?) (not @focused?))
+    (reanimated/animate-delay container-opacity constants/empty-opacity 200)))
+
+(defn component-will-unmount
+  [{:keys [keyboard-show-listener keyboard-hide-listener keyboard-frame-listener]}]
+  (.remove ^js @keyboard-show-listener)
+  (.remove ^js @keyboard-hide-listener)
+  (.remove ^js @keyboard-frame-listener))
+
+(defn initialize
+  [props state animations {:keys [max-height] :as dimensions} chat-input keyboard-height images?]
+  (rn/use-effect
+   (fn []
+     (maximized-effect state animations dimensions chat-input)
+     (refocus-effect props chat-input)
+     (reenter-screen-effect state dimensions chat-input)
+     (layout-effect state)
+     (kb-default-height-effect state)
+     (background-effect state animations dimensions chat-input)
+     (images-effect animations images?)
+     (empty-effect state animations images?)
+     (kb/add-kb-listeners props state animations dimensions keyboard-height)
+     #(component-will-unmount props))
+   [max-height]))