From 0395a9237211d0a8b5dd510b1035efaf3995e068 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Thu, 14 Mar 2024 22:19:22 +0100 Subject: [PATCH 1/5] allow passing options to the ContentsUploadModal, in order to use it elsewhere --- .../manage/Contents/ContentsUploadModal.jsx | 38 ++++++++- .../Contents/ContentsUploadModal.test.jsx | 85 +++++++++++++++++++ .../ContentsUploadModal.test.jsx.snap | 6 ++ 3 files changed, 127 insertions(+), 2 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx index fb3a893f88..3788e785e1 100644 --- a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx @@ -65,6 +65,14 @@ 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), + ]), + onDrop: PropTypes.func, }; /** @@ -205,6 +213,32 @@ class ContentsUploadModal extends Component { * @returns {string} Markup for the component. */ render() { + const dropzoneOptions = {}; + + const { + multiple = true, + minSize = null, + maxSize = null, + accept = null, + disabled = false, + } = this.props; + + if (multiple) { + dropzoneOptions['multiple'] = multiple; + } + if (minSize) { + dropzoneOptions['minSize'] = minSize; + } + if (maxSize) { + dropzoneOptions['maxSize'] = maxSize; + } + if (accept) { + dropzoneOptions['accept'] = accept; + } + if (disabled) { + dropzoneOptions['disabled'] = disabled; + } + return ( this.props.open && ( @@ -221,10 +255,10 @@ class ContentsUploadModal extends Component { {({ 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`; From 486925af5e670d32b1990f688fc245cac57a46ed Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Thu, 14 Mar 2024 22:34:20 +0100 Subject: [PATCH 2/5] changelog --- packages/volto/news/5881.feature | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/volto/news/5881.feature diff --git a/packages/volto/news/5881.feature b/packages/volto/news/5881.feature new file mode 100644 index 0000000000..75525a6b40 --- /dev/null +++ b/packages/volto/news/5881.feature @@ -0,0 +1 @@ +Add additional parameters to ContentsUploadModal to be reusable in different scenarios @erral From abf59e17bbddb20eac3f5be1523c39c333220c32 Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Thu, 14 Mar 2024 23:02:39 +0100 Subject: [PATCH 3/5] remove custom onDrop, it requires further testing --- .../src/components/manage/Contents/ContentsUploadModal.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx index 3788e785e1..0f9de6ff23 100644 --- a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx @@ -72,7 +72,6 @@ class ContentsUploadModal extends Component { PropTypes.string, PropTypes.arrayOf(PropTypes.string), ]), - onDrop: PropTypes.func, }; /** @@ -255,7 +254,7 @@ class ContentsUploadModal extends Component { Date: Sun, 17 Mar 2024 20:10:34 +0100 Subject: [PATCH 4/5] simpler handling of dropzoneOptions --- .../manage/Contents/ContentsUploadModal.jsx | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx index 0f9de6ff23..cc9e0f22c9 100644 --- a/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsUploadModal.jsx @@ -212,8 +212,6 @@ class ContentsUploadModal extends Component { * @returns {string} Markup for the component. */ render() { - const dropzoneOptions = {}; - const { multiple = true, minSize = null, @@ -222,21 +220,13 @@ class ContentsUploadModal extends Component { disabled = false, } = this.props; - if (multiple) { - dropzoneOptions['multiple'] = multiple; - } - if (minSize) { - dropzoneOptions['minSize'] = minSize; - } - if (maxSize) { - dropzoneOptions['maxSize'] = maxSize; - } - if (accept) { - dropzoneOptions['accept'] = accept; - } - if (disabled) { - dropzoneOptions['disabled'] = disabled; - } + const dropzoneOptions = { + multiple, + minSize, + maxSize, + accept, + disabled, + }; return ( this.props.open && ( From 609f4d9565075b5378235eb7fd5c53413b2b32cb Mon Sep 17 00:00:00 2001 From: Mikel Larreategi Date: Fri, 29 Mar 2024 15:08:13 +0100 Subject: [PATCH 5/5] Update packages/volto/news/5881.feature Co-authored-by: Steve Piercy --- packages/volto/news/5881.feature | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/volto/news/5881.feature b/packages/volto/news/5881.feature index 75525a6b40..17e3d97ed1 100644 --- a/packages/volto/news/5881.feature +++ b/packages/volto/news/5881.feature @@ -1 +1 @@ -Add additional parameters to ContentsUploadModal to be reusable in different scenarios @erral +Add parameters to `ContentsUploadModal` to be reusable in different scenarios. @erral