闭社主体 forked from https://github.com/tootsuite/mastodon
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

44 lines
1.1 KiB

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import Motion from '../../ui/util/optional_motion';
  4. import spring from 'react-motion/lib/spring';
  5. import Icon from 'mastodon/components/icon';
  6. export default class UploadProgress extends React.PureComponent {
  7. static propTypes = {
  8. active: PropTypes.bool,
  9. progress: PropTypes.number,
  10. icon: PropTypes.string.isRequired,
  11. message: PropTypes.node.isRequired,
  12. };
  13. render () {
  14. const { active, progress, icon, message } = this.props;
  15. if (!active) {
  16. return null;
  17. }
  18. return (
  19. <div className='upload-progress'>
  20. <div className='upload-progress__icon'>
  21. <Icon id={icon} />
  22. </div>
  23. <div className='upload-progress__message'>
  24. {message}
  25. <div className='upload-progress__backdrop'>
  26. <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
  27. {({ width }) =>
  28. <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
  29. }
  30. </Motion>
  31. </div>
  32. </div>
  33. </div>
  34. );
  35. }
  36. }