import React from 'react'; import Motion from 'flavours/glitch/util/optional_motion'; import spring from 'react-motion/lib/spring'; import { defineMessages, FormattedMessage } from 'react-intl'; // This is the spring used with our motion. const motionSpring = spring(1, { damping: 35, stiffness: 400 }); // Messages. const messages = defineMessages({ disclaimer: { defaultMessage: 'This toot will only be visible to all the mentioned users.', id: 'compose_form.direct_message_warning', }, }); // The component. export default function ComposerDirectWarning () { return ( <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75, }} style={{ opacity: motionSpring, scaleX: motionSpring, scaleY: motionSpring, }} > {({ opacity, scaleX, scaleY }) => ( <div className='composer--warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})`, }} > <FormattedMessage {...messages.disclaimer} /> </div> )} </Motion> ); } ComposerDirectWarning.propTypes = {};