app/javascript/mastodon/features/compose/components/upload_progress.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import Motion from 'react-motion/lib/Motion';
   4 import spring from 'react-motion/lib/spring';
   5 import { FormattedMessage } from 'react-intl';
   6
   7 class UploadProgress extends React.PureComponent {
   8
   9   static propTypes = {
  10     active: PropTypes.bool,
  11     progress: PropTypes.number
  12   };
  13
  14   render () {
  15     const { active, progress } = this.props;
  16
  17     if (!active) {
  18       return null;
  19     }
  20
  21     return (
  22       <div className='upload-progress'>
  23         <div className='upload-progress__icon'>
  24           <i className='fa fa-upload' />
  25         </div>
  26
  27         <div className='upload-progress__message'>
  28           <FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
  29
  30           <div className='upload-progress__backdrop'>
  31             <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
  32               {({ width }) =>
  33                 <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
  34               }
  35             </Motion>
  36           </div>
  37         </div>
  38       </div>
  39     );
  40   }
  41
  42 }
  43
  44 export default UploadProgress;