diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2018-01-05 18:29:08 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-01-05 18:29:08 -0500 |
commit | faf20eeaa4c6f48a97a41a948ed29e734c8c4f5e (patch) | |
tree | da0b88781650d514c209641fc6af7cbb921afe0b /app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js | |
parent | f41b33eb0177b23bd72fede7df94af43da0c7c6b (diff) | |
parent | d7ce339c2e33a5607c21d3eff316669cff9c6ea3 (diff) |
Merge pull request #293 from glitch-soc/compose-refactor
Compose refactor
Diffstat (limited to 'app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js new file mode 100644 index 000000000..9dac6acf9 --- /dev/null +++ b/app/javascript/flavours/glitch/features/composer/upload_form/progress/index.js @@ -0,0 +1,52 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import { + defineMessages, + FormattedMessage, +} from 'react-intl'; +import spring from 'react-motion/lib/spring'; + +// Components. +import Icon from 'flavours/glitch/components/icon'; + +// Utils. +import Motion from 'flavours/glitch/util/optional_motion'; + +// Messages. +const messages = defineMessages({ + upload: { + defaultMessage: 'Uploading...', + id: 'upload_progress.label', + }, +}); + +// The component. +export default function ComposerUploadFormProgress ({ progress }) { + + // The result. + return ( + <div className='composer--upload_form--progress'> + <Icon icon='upload' /> + <div className='message'> + <FormattedMessage {...messages.upload} /> + <div className='backdrop'> + <Motion + defaultStyle={{ width: 0 }} + style={{ width: spring(progress) }} + > + {({ width }) => + <div + className='tracker' + style={{ width: `${width}%` }} + /> + } + </Motion> + </div> + </div> + </div> + ); +} + +// Props. +ComposerUploadFormProgress.propTypes = { progress: PropTypes.number }; |