diff --git a/packages/volto/news/5881.feature b/packages/volto/news/5881.feature new file mode 100644 index 0000000000..17e3d97ed1 --- /dev/null +++ b/packages/volto/news/5881.feature @@ -0,0 +1 @@ +Add parameters to `ContentsUploadModal` to be reusable in different scenarios. @erral diff --git a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx index fb3a893f88..cc9e0f22c9 100644 --- a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx @@ -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), + ]), }; /** @@ -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 && ( @@ -224,7 +247,7 @@ class ContentsUploadModal extends Component { onDrop={this.onDrop} className="dropzone" noDragEventsBubbling={true} - multiple={true} + {...dropzoneOptions} > {({ getRootProps, getInputProps }) => (
diff --git a/packages/volto/src/components/manage/Contents/ContentsUploadModal.test.jsx b/packages/volto/src/components/manage/Contents/ContentsUploadModal.test.jsx index c19601b068..9e70365148 100644 --- a/packages/volto/src/components/manage/Contents/ContentsUploadModal.test.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsUploadModal.test.jsx @@ -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( + + {}} + onCancel={() => {}} + accept={['image/*']} + /> + , + ); + 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( + + {}} + onCancel={() => {}} + maxSize={1000000} + /> + , + ); + 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( + + {}} + onCancel={() => {}} + multiple={false} + /> + , + ); + const json = component.toJSON(); + await waitFor(() => {}); + expect(json).toMatchSnapshot(); + }); }); diff --git a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsUploadModal.test.jsx.snap b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsUploadModal.test.jsx.snap index 95d4ec4460..fd10b925c6 100644 --- a/packages/volto/src/components/manage/Contents/__snapshots__/ContentsUploadModal.test.jsx.snap +++ b/packages/volto/src/components/manage/Contents/__snapshots__/ContentsUploadModal.test.jsx.snap @@ -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`;