@plone/volto 19.0.0-alpha.18 → 19.0.0-alpha.19

package/src/components/manage/Contents/DropZoneContent.jsx

@@ -0,0 +1,323 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Modal,
+  Table,
+  Input,
+  Dimmer,
+  Progress,
+} from 'semantic-ui-react';
+import cx from 'classnames';
+import filesize from 'filesize';
+import { readAsDataURL } from 'promise-file-reader';
+
+import { createContent } from '@plone/volto/actions/content/content';
+import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+const SUBREQUEST = 'batch-upload';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  upload: {
+    id: '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+    defaultMessage:
+      '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+  },
+  filesUploaded: {
+    id: 'Files uploaded: {uploadedFiles}',
+    defaultMessage: 'Files uploaded: {uploadedFiles}',
+  },
+  dropFiles: {
+    id: 'Drop files here to upload',
+    defaultMessage: 'Drop files here to upload',
+  },
+  releaseToAdd: {
+    id: 'Release to add file(s) to this folder',
+    defaultMessage: 'Release to add file(s) to this folder',
+  },
+  totalFilesToUpload: {
+    id: 'Total files to upload: {totalFiles}',
+    defaultMessage: 'Total files to upload: {totalFiles}',
+  },
+  uploadFiles: {
+    id: 'Upload Files ({count})',
+    defaultMessage: 'Upload Files ({count})',
+  },
+});
+
+const DropZoneContent = (props) => {
+  const { onOk, onCancel, pathname, children } = props;
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState([]);
+  const [totalFiles, setTotalFiles] = useState(0);
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const request = useSelector(
+    (state) => state.content.subrequests?.[SUBREQUEST] || {},
+    shallowEqual,
+  );
+
+  const uploadedFiles = useSelector((state) => state.content.uploadedFiles);
+  const prevrequestloading = usePrevious(request.loading);
+
+  useEffect(() => {
+    if (prevrequestloading && request.loaded) {
+      onOk();
+      setDroppedFiles([]);
+    }
+  }, [prevrequestloading, request.loaded, onOk]);
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onDrop = async (e) => {
+    setIsDragOver(false);
+    const newFiles = Array.from(e.dataTransfer.files);
+    const validFiles = [];
+    for (let i = 0; i < newFiles.length; i++) {
+      if (validateFileUploadSize(newFiles[i], intl.formatMessage)) {
+        await readAsDataURL(newFiles[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          newFiles[i].preview = fields[0];
+        });
+        validFiles.push(newFiles[i]);
+      }
+    }
+    setDroppedFiles((prev) => prev.concat(newFiles));
+    setTotalFiles((prev) => prev + validFiles.length);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    onCancel();
+    setDroppedFiles([]);
+    setTotalFiles(0);
+  };
+
+  const onSubmit = () => {
+    Promise.all(droppedFiles.map((file) => readAsDataURL(file))).then(
+      (dataUrls) => {
+        dispatch(
+          createContent(
+            pathname,
+            droppedFiles.map((file, index) => {
+              const fields = dataUrls[index].match(/^data:(.*);(.*),(.*)$/);
+              const image = fields[1].split('/')[0] === 'image';
+              return {
+                '@type': image ? 'Image' : 'File',
+                title: file.name,
+                [image ? 'image' : 'file']: {
+                  data: fields[3],
+                  encoding: fields[2],
+                  'content-type': fields[1],
+                  filename: file.name,
+                },
+              };
+            }),
+            SUBREQUEST,
+          ),
+        );
+      },
+    );
+    handleCloseModal();
+  };
+  const onRemoveFile = (index) => {
+    const updatedFiles = droppedFiles.filter((file, i) => i !== index);
+    setDroppedFiles(updatedFiles);
+    setTotalFiles(updatedFiles.length);
+  };
+
+  const onChangeFileName = (e, index) => {
+    let copyOfFiles = [...droppedFiles];
+    let originalFile = droppedFiles[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    setDroppedFiles(copyOfFiles);
+  };
+
+  return (
+    <>
+      <div
+        className={cx('contents-dropzone', {
+          'drag-over': isDragOver,
+          'drag-inactive': !isDragOver,
+        })}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={onDrop}
+      >
+        {children}
+        {isDragOver && (
+          <div className="dropzone-overlay">
+            <div className="dropzone-content">
+              <Icon name={uploadSVG} size="48px" />
+              <h3>{intl.formatMessage(messages.dropFiles)}</h3>
+              <p>{intl.formatMessage(messages.releaseToAdd)}</p>
+            </div>
+          </div>
+        )}
+      </div>
+      <Modal
+        open={showModal}
+        onClose={handleCloseModal}
+        className="contents-upload-modal"
+      >
+        <Modal.Header>
+          {intl.formatMessage(messages.uploadFiles, {
+            count: droppedFiles.length,
+          })}
+        </Modal.Header>
+        <Dimmer active={request.loading}>
+          <div className="progress-container">
+            <Progress
+              className="progress-bar"
+              value={uploadedFiles}
+              total={totalFiles}
+            >
+              {intl.formatMessage(messages.filesUploaded, {
+                uploadedFiles,
+              })}
+              <br />
+              {intl.formatMessage(messages.totalFilesToUpload, {
+                totalFiles,
+              })}
+            </Progress>
+          </div>
+        </Dimmer>
+        <Modal.Content>
+          {droppedFiles.length > 0 && (
+            <Table compact singleLine>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell width={8}>
+                    <FormattedMessage id="Filename" defaultMessage="Filename" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="Last modified"
+                      defaultMessage="Last modified"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="File size"
+                      defaultMessage="File size"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage id="Preview" defaultMessage="Preview" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell />
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {droppedFiles.map((file, index) => (
+                  <Table.Row className="upload-row" key={index}>
+                    <Table.Cell>
+                      <Input
+                        className="file-name"
+                        value={file.name}
+                        onChange={(e) => onChangeFileName(e, index)}
+                      />
+                    </Table.Cell>
+                    <Table.Cell>
+                      {file.lastModifiedDate && (
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>{filesize(file.size, { round: 0 })}</Table.Cell>
+                    <Table.Cell>
+                      {file.type.split('/')[0] === 'image' && (
+                        <Image
+                          src={file.preview}
+                          height={60}
+                          className="ui image"
+                        />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Icon
+                        name={clearSVG}
+                        size="24px"
+                        onClick={() => onRemoveFile(index)}
+                      />
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          )}
+        </Modal.Content>
+        <Modal.Actions>
+          {droppedFiles.length > 0 && (
+            <Button
+              basic
+              circular
+              primary
+              floated="right"
+              icon="arrow right"
+              aria-label={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              onClick={onSubmit}
+              title={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              size="big"
+            />
+          )}
+          <Button
+            basic
+            circular
+            secondary
+            icon="remove"
+            aria-label={intl.formatMessage(messages.cancel)}
+            title={intl.formatMessage(messages.cancel)}
+            floated="right"
+            size="big"
+            onClick={handleCloseModal}
+          />
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default DropZoneContent;

package/src/components/manage/Form/ModalForm.jsx

@@ -245,15 +245,17 @@ class ModalForm extends Component {
     const { schema, onCancel, description } = this.props;
     const currentFieldset = schema.fieldsets[this.state.currentTab];
 
-    const fields = map(currentFieldset.fields, (field) => ({
-      ...schema.properties[field],
-      id: field,
-      value: this.state.formData[field],
-      required: schema.required.indexOf(field) !== -1,
-      onChange: this.onChangeField,
-      onBlur: this.onBlurField,
-      onClick: this.onClickInput,
-    }));
+    const fields = currentFieldset
+      ? map(currentFieldset.fields, (field) => ({
+          ...schema.properties[field],
+          id: field,
+          value: this.state.formData[field],
+          required: schema.required.indexOf(field) !== -1,
+          onChange: this.onChangeField,
+          onBlur: this.onBlurField,
+          onClick: this.onClickInput,
+        }))
+      : [];
 
     const state_errors = keys(this.state.errors).length > 0;
     return (
@@ -288,7 +290,7 @@ class ModalForm extends Component {
               )}
               <div>{this.props.submitError}</div>
             </Message>
-            {schema.fieldsets.length > 1 && (
+            {schema.fieldsets?.length > 1 && (
               <Menu tabular stackable>
                 {map(schema.fieldsets, (item, index) => (
                   <Menu.Item

package/src/components/manage/Form/ModalForm.test.jsx

@@ -89,4 +89,30 @@ describe('ModalForm', () => {
     const loadingMessage = getByText(/renaming items.../i);
     expect(loadingMessage).toBeInTheDocument();
   });
+
+  it('renders with empty fieldsets array', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <ModalForm
+          schema={{
+            fieldsets: [],
+            properties: {},
+            required: [],
+          }}
+          onSubmit={() => {}}
+          onCancel={() => {}}
+          open={false}
+          title="Action without form"
+        />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/manage/Sidebar/ObjectBrowser.jsx

@@ -58,6 +58,7 @@ const withObjectBrowser = (WrappedComponent) =>
       selectableTypes,
       maximumSelectionSize,
       currentPath,
+      onlyFolderishSelectable,
     } = {}) =>
       this.setState(() => ({
         isObjectBrowserOpen: true,
@@ -70,6 +71,7 @@ const withObjectBrowser = (WrappedComponent) =>
         selectableTypes,
         maximumSelectionSize,
         currentPath,
+        onlyFolderishSelectable,
       }));
 
     closeObjectBrowser = () => this.setState({ isObjectBrowserOpen: false });
@@ -110,6 +112,7 @@ const withObjectBrowser = (WrappedComponent) =>
                 searchableTypes={this.state.searchableTypes}
                 selectableTypes={this.state.selectableTypes}
                 maximumSelectionSize={this.state.maximumSelectionSize}
+                onlyFolderishSelectable={this.state.onlyFolderishSelectable}
               />
             </SidebarPopup>
           </>

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -86,6 +86,7 @@ class ObjectBrowserBody extends Component {
     maximumSelectionSize: PropTypes.number,
     contextURL: PropTypes.string,
     searchableTypes: PropTypes.arrayOf(PropTypes.string),
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -101,6 +102,7 @@ class ObjectBrowserBody extends Component {
     selectableTypes: [],
     searchableTypes: null,
     maximumSelectionSize: null,
+    onlyFolderishSelectable: false,
   };
 
   /**
@@ -329,7 +331,17 @@ class ObjectBrowserBody extends Component {
   };
 
   isSelectable = (item) => {
-    const { maximumSelectionSize, data, mode, selectableTypes } = this.props;
+    const {
+      maximumSelectionSize,
+      data,
+      mode,
+      selectableTypes,
+      onlyFolderishSelectable,
+    } = this.props;
+
+    if (onlyFolderishSelectable && !item.is_folderish) {
+      return false;
+    }
     if (
       maximumSelectionSize &&
       data &&

package/src/components/manage/Widgets/ObjectBrowserWidget.jsx

@@ -82,6 +82,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     openObjectBrowser: PropTypes.func.isRequired,
     allowExternals: PropTypes.bool,
     placeholder: PropTypes.string,
+    onlyFolderishSelectable: PropTypes.bool,
   };
 
   /**
@@ -98,6 +99,7 @@ export class ObjectBrowserWidgetComponent extends Component {
     return: 'multiple',
     initialPath: '',
     allowExternals: false,
+    onlyFolderishSelectable: false,
   };
 
   state = {
@@ -315,6 +317,9 @@ export class ObjectBrowserWidgetComponent extends Component {
       maximumSelectionSize:
         this.props.widgetOptions?.pattern_options?.maximumSelectionSize ||
         this.props.maximumSelectionSize,
+      onlyFolderishSelectable:
+        this.props.widgetOptions?.pattern_options?.onlyFolderishSelectable ||
+        this.props.onlyFolderishSelectable,
     });
   };