Thibaut Girka
6 years ago
committed by
ThibG
parent
f7d1772fc8
commit
513547ba57
@ -0,0 +1,131 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Motion from 'flavours/glitch/util/optional_motion';
|
||||||
|
import spring from 'react-motion/lib/spring';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
import { isUserTouching } from 'flavours/glitch/util/is_mobile';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
|
||||||
|
});
|
||||||
|
|
||||||
|
// The component.
|
||||||
|
export default @injectIntl
|
||||||
|
class Upload extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
router: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
media: ImmutablePropTypes.map.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
onUndo: PropTypes.func.isRequired,
|
||||||
|
onDescriptionChange: PropTypes.func.isRequired,
|
||||||
|
onOpenFocalPoint: PropTypes.func.isRequired,
|
||||||
|
onSubmit: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
hovered: false,
|
||||||
|
focused: false,
|
||||||
|
dirtyDescription: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleKeyDown = (e) => {
|
||||||
|
if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
|
||||||
|
this.handleSubmit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit = () => {
|
||||||
|
this.handleInputBlur();
|
||||||
|
this.props.onSubmit(this.context.router.history);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleUndoClick = e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.onUndo(this.props.media.get('id'));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleFocalPointClick = e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
this.props.onOpenFocalPoint(this.props.media.get('id'));
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInputChange = e => {
|
||||||
|
this.setState({ dirtyDescription: e.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseEnter = () => {
|
||||||
|
this.setState({ hovered: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseLeave = () => {
|
||||||
|
this.setState({ hovered: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInputFocus = () => {
|
||||||
|
this.setState({ focused: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClick = () => {
|
||||||
|
this.setState({ focused: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInputBlur = () => {
|
||||||
|
const { dirtyDescription } = this.state;
|
||||||
|
|
||||||
|
this.setState({ focused: false, dirtyDescription: null });
|
||||||
|
|
||||||
|
if (dirtyDescription !== null) {
|
||||||
|
this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { intl, media } = this.props;
|
||||||
|
const active = this.state.hovered || this.state.focused || isUserTouching();
|
||||||
|
const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || '';
|
||||||
|
const computedClass = classNames('composer--upload_form--item', { active });
|
||||||
|
const focusX = media.getIn(['meta', 'focus', 'x']);
|
||||||
|
const focusY = media.getIn(['meta', 'focus', 'y']);
|
||||||
|
const x = ((focusX / 2) + .5) * 100;
|
||||||
|
const y = ((focusY / -2) + .5) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={computedClass} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
|
||||||
|
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12, }) }}>
|
||||||
|
{({ scale }) => (
|
||||||
|
<div style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
|
||||||
|
<div className={classNames('composer--upload_form--actions', { active })}>
|
||||||
|
<button className='icon-button' onClick={this.handleUndoClick}><Icon icon='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
|
||||||
|
{media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={classNames('composer--upload_form--description', { active })}>
|
||||||
|
<label>
|
||||||
|
<span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
|
||||||
|
<textarea
|
||||||
|
placeholder={intl.formatMessage(messages.description)}
|
||||||
|
value={description}
|
||||||
|
maxLength={420}
|
||||||
|
onFocus={this.handleInputFocus}
|
||||||
|
onChange={this.handleInputChange}
|
||||||
|
onBlur={this.handleInputBlur}
|
||||||
|
onKeyDown={this.handleKeyDown}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Motion>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import UploadProgressContainer from '../containers/upload_progress_container';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import UploadContainer from '../containers/upload_container';
|
||||||
|
|
||||||
|
export default class UploadForm extends ImmutablePureComponent {
|
||||||
|
static propTypes = {
|
||||||
|
mediaIds: ImmutablePropTypes.list.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { mediaIds } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='composer--upload_form'>
|
||||||
|
<UploadProgressContainer />
|
||||||
|
|
||||||
|
<div className='content'>
|
||||||
|
{mediaIds.map(id => (
|
||||||
|
<UploadContainer id={id} key={id} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Motion from 'flavours/glitch/util/optional_motion';
|
||||||
|
import spring from 'react-motion/lib/spring';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
|
||||||
|
export default class UploadProgress extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
active: PropTypes.bool,
|
||||||
|
progress: PropTypes.number,
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { active, progress } = this.props;
|
||||||
|
|
||||||
|
if (!active) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='composer--upload_form--progress'>
|
||||||
|
<Icon icon='upload' />
|
||||||
|
|
||||||
|
<div className='message'>
|
||||||
|
<FormattedMessage id='upload_progress.label' defaultMessage='Uploading...' />
|
||||||
|
|
||||||
|
<div className='backdrop'>
|
||||||
|
<Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
|
||||||
|
{({ width }) =>
|
||||||
|
(<div className='tracker' style={{ width: `${width}%` }}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</Motion>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { connect } from 'react-redux';
|
||||||
|
import Upload from '../components/upload';
|
||||||
|
import { undoUploadCompose, changeUploadCompose } from 'flavours/glitch/actions/compose';
|
||||||
|
import { openModal } from 'flavours/glitch/actions/modal';
|
||||||
|
import { submitCompose } from 'flavours/glitch/actions/compose';
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { id }) => ({
|
||||||
|
media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({
|
||||||
|
|
||||||
|
onUndo: id => {
|
||||||
|
dispatch(undoUploadCompose(id));
|
||||||
|
},
|
||||||
|
|
||||||
|
onDescriptionChange: (id, description) => {
|
||||||
|
dispatch(changeUploadCompose(id, { description }));
|
||||||
|
},
|
||||||
|
|
||||||
|
onOpenFocalPoint: id => {
|
||||||
|
dispatch(openModal('FOCAL_POINT', { id }));
|
||||||
|
},
|
||||||
|
|
||||||
|
onSubmit (router) {
|
||||||
|
dispatch(submitCompose(router));
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Upload);
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { connect } from 'react-redux';
|
||||||
|
import UploadForm from '../components/upload_form';
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(UploadForm);
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { connect } from 'react-redux';
|
||||||
|
import UploadProgress from '../components/upload_progress';
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
active: state.getIn(['compose', 'is_uploading']),
|
||||||
|
progress: state.getIn(['compose', 'progress']),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(UploadProgress);
|
||||||
@ -1,60 +0,0 @@
|
|||||||
// Package imports.
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
||||||
|
|
||||||
// Components.
|
|
||||||
import ComposerUploadFormItem from './item';
|
|
||||||
import ComposerUploadFormProgress from './progress';
|
|
||||||
|
|
||||||
// The component.
|
|
||||||
export default function ComposerUploadForm ({
|
|
||||||
intl,
|
|
||||||
media,
|
|
||||||
onChangeDescription,
|
|
||||||
onOpenFocalPointModal,
|
|
||||||
onRemove,
|
|
||||||
progress,
|
|
||||||
uploading,
|
|
||||||
handleRef,
|
|
||||||
}) {
|
|
||||||
const computedClass = classNames('composer--upload_form', { uploading });
|
|
||||||
|
|
||||||
// The result.
|
|
||||||
return (
|
|
||||||
<div className={computedClass} ref={handleRef}>
|
|
||||||
{uploading ? <ComposerUploadFormProgress progress={progress} /> : null}
|
|
||||||
{media ? (
|
|
||||||
<div className='content'>
|
|
||||||
{media.map(item => (
|
|
||||||
<ComposerUploadFormItem
|
|
||||||
description={item.get('description')}
|
|
||||||
key={item.get('id')}
|
|
||||||
id={item.get('id')}
|
|
||||||
intl={intl}
|
|
||||||
focusX={item.getIn(['meta', 'focus', 'x'])}
|
|
||||||
focusY={item.getIn(['meta', 'focus', 'y'])}
|
|
||||||
mediaType={item.get('type')}
|
|
||||||
preview={item.get('preview_url')}
|
|
||||||
onChangeDescription={onChangeDescription}
|
|
||||||
onOpenFocalPointModal={onOpenFocalPointModal}
|
|
||||||
onRemove={onRemove}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Props.
|
|
||||||
ComposerUploadForm.propTypes = {
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
media: ImmutablePropTypes.list,
|
|
||||||
onChangeDescription: PropTypes.func.isRequired,
|
|
||||||
onRemove: PropTypes.func.isRequired,
|
|
||||||
progress: PropTypes.number,
|
|
||||||
uploading: PropTypes.bool,
|
|
||||||
handleRef: PropTypes.func,
|
|
||||||
};
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
// Package imports.
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
FormattedMessage,
|
|
||||||
defineMessages,
|
|
||||||
} from 'react-intl';
|
|
||||||
import spring from 'react-motion/lib/spring';
|
|
||||||
|
|
||||||
// Components.
|
|
||||||
import IconButton from 'flavours/glitch/components/icon_button';
|
|
||||||
|
|
||||||
// Utils.
|
|
||||||
import Motion from 'flavours/glitch/util/optional_motion';
|
|
||||||
import { assignHandlers } from 'flavours/glitch/util/react_helpers';
|
|
||||||
import { isUserTouching } from 'flavours/glitch/util/is_mobile';
|
|
||||||
|
|
||||||
// Messages.
|
|
||||||
const messages = defineMessages({
|
|
||||||
undo: {
|
|
||||||
defaultMessage: 'Undo',
|
|
||||||
id: 'upload_form.undo',
|
|
||||||
},
|
|
||||||
description: {
|
|
||||||
defaultMessage: 'Describe for the visually impaired',
|
|
||||||
id: 'upload_form.description',
|
|
||||||
},
|
|
||||||
crop: {
|
|
||||||
defaultMessage: 'Crop',
|
|
||||||
id: 'upload_form.focus',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Handlers.
|
|
||||||
const handlers = {
|
|
||||||
|
|
||||||
// On blur, we save the description for the media item.
|
|
||||||
handleBlur () {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
onChangeDescription,
|
|
||||||
} = this.props;
|
|
||||||
const { dirtyDescription } = this.state;
|
|
||||||
|
|
||||||
this.setState({ dirtyDescription: null, focused: false });
|
|
||||||
|
|
||||||
if (id && onChangeDescription && dirtyDescription !== null) {
|
|
||||||
onChangeDescription(id, dirtyDescription);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// When the value of our description changes, we store it in the
|
|
||||||
// temp value `dirtyDescription` in our state.
|
|
||||||
handleChange ({ target: { value } }) {
|
|
||||||
this.setState({ dirtyDescription: value });
|
|
||||||
},
|
|
||||||
|
|
||||||
// Records focus on the media item.
|
|
||||||
handleFocus () {
|
|
||||||
this.setState({ focused: true });
|
|
||||||
},
|
|
||||||
|
|
||||||
// Records the start of a hover over the media item.
|
|
||||||
handleMouseEnter () {
|
|
||||||
this.setState({ hovered: true });
|
|
||||||
},
|
|
||||||
|
|
||||||
// Records the end of a hover over the media item.
|
|
||||||
handleMouseLeave () {
|
|
||||||
this.setState({ hovered: false });
|
|
||||||
},
|
|
||||||
|
|
||||||
// Removes the media item.
|
|
||||||
handleRemove () {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
onRemove,
|
|
||||||
} = this.props;
|
|
||||||
if (id && onRemove) {
|
|
||||||
onRemove(id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Opens the focal point modal.
|
|
||||||
handleFocalPointClick () {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
onOpenFocalPointModal,
|
|
||||||
} = this.props;
|
|
||||||
if (id && onOpenFocalPointModal) {
|
|
||||||
onOpenFocalPointModal(id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// The component.
|
|
||||||
export default class ComposerUploadFormItem extends React.PureComponent {
|
|
||||||
|
|
||||||
// Constructor.
|
|
||||||
constructor (props) {
|
|
||||||
super(props);
|
|
||||||
assignHandlers(this, handlers);
|
|
||||||
this.state = {
|
|
||||||
hovered: false,
|
|
||||||
focused: false,
|
|
||||||
dirtyDescription: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rendering.
|
|
||||||
render () {
|
|
||||||
const {
|
|
||||||
handleBlur,
|
|
||||||
handleChange,
|
|
||||||
handleFocus,
|
|
||||||
handleMouseEnter,
|
|
||||||
handleMouseLeave,
|
|
||||||
handleRemove,
|
|
||||||
handleFocalPointClick,
|
|
||||||
} = this.handlers;
|
|
||||||
const {
|
|
||||||
intl,
|
|
||||||
preview,
|
|
||||||
focusX,
|
|
||||||
focusY,
|
|
||||||
mediaType,
|
|
||||||
} = this.props;
|
|
||||||
const {
|
|
||||||
focused,
|
|
||||||
hovered,
|
|
||||||
dirtyDescription,
|
|
||||||
} = this.state;
|
|
||||||
const active = hovered || focused || isUserTouching();
|
|
||||||
const computedClass = classNames('composer--upload_form--item', { active });
|
|
||||||
const x = ((focusX / 2) + .5) * 100;
|
|
||||||
const y = ((focusY / -2) + .5) * 100;
|
|
||||||
const description = dirtyDescription || (dirtyDescription !== '' && this.props.description) || '';
|
|
||||||
|
|
||||||
// The result.
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={computedClass}
|
|
||||||
onMouseEnter={handleMouseEnter}
|
|
||||||
onMouseLeave={handleMouseLeave}
|
|
||||||
>
|
|
||||||
<Motion
|
|
||||||
defaultStyle={{ scale: 0.8 }}
|
|
||||||
style={{
|
|
||||||
scale: spring(1, {
|
|
||||||
stiffness: 180,
|
|
||||||
damping: 12,
|
|
||||||
}),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ scale }) => (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
transform: `scale(${scale})`,
|
|
||||||
backgroundImage: preview ? `url(${preview})` : null,
|
|
||||||
backgroundPosition: `${x}% ${y}%`
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className={classNames('composer--upload_form--actions', { active })}>
|
|
||||||
<button className='icon-button' onClick={handleRemove}>
|
|
||||||
<i className='fa fa-times' /> <FormattedMessage {...messages.undo} />
|
|
||||||
</button>
|
|
||||||
{mediaType === 'image' && <button className='icon-button' onClick={handleFocalPointClick}><i className='fa fa-crosshairs' /> <FormattedMessage {...messages.crop} /></button>}
|
|
||||||
</div>
|
|
||||||
<label>
|
|
||||||
<span style={{ display: 'none' }}><FormattedMessage {...messages.description} /></span>
|
|
||||||
<textarea
|
|
||||||
maxLength={420}
|
|
||||||
onBlur={handleBlur}
|
|
||||||
onChange={handleChange}
|
|
||||||
onFocus={handleFocus}
|
|
||||||
placeholder={intl.formatMessage(messages.description)}
|
|
||||||
value={description}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Motion>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Props.
|
|
||||||
ComposerUploadFormItem.propTypes = {
|
|
||||||
description: PropTypes.string,
|
|
||||||
id: PropTypes.string,
|
|
||||||
intl: PropTypes.object.isRequired,
|
|
||||||
onChangeDescription: PropTypes.func.isRequired,
|
|
||||||
onOpenFocalPointModal: PropTypes.func.isRequired,
|
|
||||||
onRemove: PropTypes.func.isRequired,
|
|
||||||
focusX: PropTypes.number,
|
|
||||||
focusY: PropTypes.number,
|
|
||||||
mediaType: PropTypes.string,
|
|
||||||
preview: PropTypes.string,
|
|
||||||
};
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
// 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 };
|
|
||||||
Loading…
Reference in new issue