Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add additional parameters to ContentsUploadModal to be reusable in different scenarios #5881

Merged
merged 10 commits into from
Mar 31, 2024
1 change: 1 addition & 0 deletions packages/volto/news/5881.feature
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Add parameters to `ContentsUploadModal` to be reusable in different scenarios. @erral
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,13 @@ class ContentsUploadModal extends Component {
open: PropTypes.bool.isRequired,
onOk: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
multiple: PropTypes.bool,
minSize: PropTypes.number,
maxSize: PropTypes.number,
accept: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
};

/**
Expand Down Expand Up @@ -205,6 +212,22 @@ class ContentsUploadModal extends Component {
* @returns {string} Markup for the component.
*/
render() {
const {
multiple = true,
minSize = null,
maxSize = null,
accept = null,
disabled = false,
} = this.props;

const dropzoneOptions = {
multiple,
minSize,
maxSize,
accept,
disabled,
};

return (
this.props.open && (
<Modal className="contents-upload-modal" open={this.props.open}>
Expand All @@ -224,7 +247,7 @@ class ContentsUploadModal extends Component {
onDrop={this.onDrop}
className="dropzone"
noDragEventsBubbling={true}
multiple={true}
{...dropzoneOptions}
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps({ className: 'dashed' })}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,89 @@ describe('ContentsUploadModal', () => {
await waitFor(() => {});
expect(json).toMatchSnapshot();
});

it('renders a contents upload modal component that only allows images', async () => {
const store = mockStore({
content: {
create: {
loading: false,
loaded: true,
},
},
intl: {
locale: 'en',
messages: {},
},
});
const component = renderer.create(
<Provider store={store}>
<ContentsUploadModal
pathname="/blog"
open={false}
onOk={() => {}}
onCancel={() => {}}
accept={['image/*']}
/>
</Provider>,
);
const json = component.toJSON();
await waitFor(() => {});
expect(json).toMatchSnapshot();
});
it('renders a contents upload modal component that only allows 10MB files', async () => {
const store = mockStore({
content: {
create: {
loading: false,
loaded: true,
},
},
intl: {
locale: 'en',
messages: {},
},
});
const component = renderer.create(
<Provider store={store}>
<ContentsUploadModal
pathname="/blog"
open={false}
onOk={() => {}}
onCancel={() => {}}
maxSize={1000000}
/>
</Provider>,
);
const json = component.toJSON();
await waitFor(() => {});
expect(json).toMatchSnapshot();
});
it('renders a contents upload modal component that only allows 1 file', async () => {
const store = mockStore({
content: {
create: {
loading: false,
loaded: true,
},
},
intl: {
locale: 'en',
messages: {},
},
});
const component = renderer.create(
<Provider store={store}>
<ContentsUploadModal
pathname="/blog"
open={false}
onOk={() => {}}
onCancel={() => {}}
multiple={false}
/>
</Provider>,
);
const json = component.toJSON();
await waitFor(() => {});
expect(json).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ContentsUploadModal renders a contents upload modal component 1`] = `null`;

exports[`ContentsUploadModal renders a contents upload modal component that only allows 1 file 1`] = `null`;

exports[`ContentsUploadModal renders a contents upload modal component that only allows 10MB files 1`] = `null`;

exports[`ContentsUploadModal renders a contents upload modal component that only allows images 1`] = `null`;
Loading