status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Animate link previews enter/leave (#15984)

This commit is contained in:
Icaro Motta 2023-05-22 20:00:55 -03:00 committed by GitHub
parent 540e5be290
commit d1941fe002
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/status_im2/contexts/chat/composer/link_preview/view.cljs
View File

@ -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])

2
src/status_im2/contexts/chat/composer/view.cljs
View File

@ -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]]]]))