ComposerUploadForm → UploadForm + UploadFormContainer
This commit is contained in:
Thibaut Girka
@@ -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 };
|
||||
Reference in New Issue
Block a user