diff --git a/src/status_im2/contexts/chat/composer/link_preview/view.cljs b/src/status_im2/contexts/chat/composer/link_preview/view.cljs index e4a2e0b472..e049757530 100644 --- a/src/status_im2/contexts/chat/composer/link_preview/view.cljs +++ b/src/status_im2/contexts/chat/composer/link_preview/view.cljs @@ -2,27 +2,45 @@ (:require [quo2.core :as quo] [react-native.core :as rn] + [react-native.reanimated :as reanimated] + [status-im2.contexts.chat.composer.constants :as constants] [status-im2.contexts.chat.composer.link-preview.events] [status-im2.contexts.chat.composer.link-preview.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn message-draft-link-previews +(defn- use-animated-height + [previews?] + (let [height (reanimated/use-shared-value (if previews? constants/links-container-height 0))] + (rn/use-effect + (fn [] + (reanimated/animate height (if previews? constants/links-container-height 0))) + [previews?]) + height)) + +(defn f-view [] - (let [previews (rf/sub [:chats/link-previews-unfurled])] - [quo/url-preview-list - {:key-fn :url - :preview-width (- (:width (rn/get-window)) - (* 2 style/padding-horizontal)) - :container-style (when (seq previews) style/preview-list) - :container-style-item {:height style/preview-height} - :horizontal-spacing style/padding-horizontal - :loading-message (i18n/label :t/link-preview-loading-message) - :on-clear #(rf/dispatch [:link-preview/clear]) - :data (map (fn [{:keys [title thumbnail hostname loading? url]}] - {:title title - :body hostname - :loading? loading? - :thumbnail (:data-uri thumbnail) - :url url}) - previews)}])) + (let [previews (rf/sub [:chats/link-previews-unfurled]) + height (use-animated-height (boolean (seq previews)))] + [reanimated/view + {:style (reanimated/apply-animations-to-style {:height height} {})} + [quo/url-preview-list + {:key-fn :url + :preview-width (- (:width (rn/get-window)) + (* 2 style/padding-horizontal)) + :container-style (when (seq previews) style/preview-list) + :container-style-item {:height style/preview-height} + :horizontal-spacing style/padding-horizontal + :loading-message (i18n/label :t/link-preview-loading-message) + :on-clear #(rf/dispatch [:link-preview/clear]) + :data (map (fn [{:keys [title thumbnail hostname loading? url]}] + {:title title + :body hostname + :loading? loading? + :thumbnail (:data-uri thumbnail) + :url url}) + previews)}]])) + +(defn view + [] + [:f> f-view]) diff --git a/src/status_im2/contexts/chat/composer/view.cljs b/src/status_im2/contexts/chat/composer/view.cljs index cbf61a9a67..0c40d4715d 100644 --- a/src/status_im2/contexts/chat/composer/view.cljs +++ b/src/status_im2/contexts/chat/composer/view.cljs @@ -110,7 +110,7 @@ :max-length constants/max-text-size :accessibility-label :chat-message-input}]] [gradients/view props state animations show-bottom-gradient?]] - [link-preview/message-draft-link-previews] + [link-preview/view] [images/images-list] [actions/view props state animations window-height insets subs]]]]))