From b0139dcf5e4ba3fa0e3ba10c40dbe7931fdb0824 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 27 Jan 2020 11:03:45 +0100 Subject: [PATCH] [Glitch] Add animations to announcement reactions Port dd4eec6bf647a082b9bac2bed09a0105fe14c733 to glitch-soc Signed-off-by: Thibaut Girka --- .../components/announcements.js | 54 +++++++++++++------ 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js index 489f53f0f6..b56d566067 100644 --- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.js +++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.js @@ -6,13 +6,15 @@ import PropTypes from 'prop-types'; import IconButton from 'flavours/glitch/components/icon_button'; import Icon from 'flavours/glitch/components/icon'; import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl'; -import { autoPlayGif } from 'flavours/glitch/util/initial_state'; +import { autoPlayGif, reduceMotion } from 'flavours/glitch/util/initial_state'; import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg'; import { mascot } from 'flavours/glitch/util/initial_state'; import unicodeMapping from 'flavours/glitch/util/emoji/emoji_unicode_mapping_light'; import classNames from 'classnames'; import EmojiPickerDropdown from 'flavours/glitch/features/emoji_picker'; import AnimatedNumber from 'flavours/glitch/components/animated_number'; +import TransitionMotion from 'react-motion/lib/TransitionMotion'; +import spring from 'react-motion/lib/spring'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, @@ -194,6 +196,7 @@ class Reaction extends ImmutablePureComponent { addReaction: PropTypes.func.isRequired, removeReaction: PropTypes.func.isRequired, emojiMap: ImmutablePropTypes.map.isRequired, + style: PropTypes.object, }; state = { @@ -224,7 +227,7 @@ class Reaction extends ImmutablePureComponent { } return ( - @@ -248,25 +251,44 @@ class ReactionsBar extends ImmutablePureComponent { addReaction(announcementId, data.native.replace(/:/g, '')); } + willEnter () { + return { scale: reduceMotion ? 1 : 0 }; + } + + willLeave () { + return { scale: reduceMotion ? 0 : spring(0, { stiffness: 170, damping: 26 }) }; + } + render () { const { reactions } = this.props; const visibleReactions = reactions.filter(x => x.get('count') > 0); - return ( -
- {visibleReactions.map(reaction => ( - - ))} + const styles = visibleReactions.map(reaction => ({ + key: reaction.get('name'), + data: reaction, + style: { scale: reduceMotion ? 1 : spring(1, { stiffness: 150, damping: 13 }) }, + })).toArray(); - {visibleReactions.size < 8 && } />} -
+ return ( + + {items => ( +
+ {items.map(({ key, data, style }) => ( + + ))} + + {visibleReactions.size < 8 && } />} +
+ )} +
); }