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.
58 lines
1.6 KiB
58 lines
1.6 KiB
// 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,
|
|
}) {
|
|
const computedClass = classNames('composer--upload_form', { uploading });
|
|
|
|
// The result.
|
|
return (
|
|
<div className={computedClass}>
|
|
{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,
|
|
};
|