@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.41

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

@@ -0,0 +1,334 @@
+import React, { useEffect, useRef } from 'react';
+import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import loadable from '@loadable/component';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import useLinkEditor from '@plone/volto/components/manage/AnchorPlugin/useLinkEditor';
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  isInternalURL,
+  validateFileUploadSize,
+  usePrevious,
+} from '@plone/volto/helpers';
+import { createContent } from '@plone/volto/actions';
+import { readAsDataURL } from 'promise-file-reader';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+
+const Dropzone = loadable(() => import('react-dropzone'));
+
+export const ImageToolbar = ({ className, data, id, onChange, selected }) => (
+  <div className="image-upload-widget-toolbar">
+    <Button.Group>
+      <Button icon basic onClick={() => onChange(id, null)}>
+        <Icon className="circled" name={clearSVG} size="24px" color="#e40166" />
+      </Button>
+    </Button.Group>
+  </div>
+);
+
+const messages = defineMessages({
+  addImage: {
+    id: 'Browse the site, drop an image, or type a URL',
+    defaultMessage: 'Browse the site, drop an image, or use a URL',
+  },
+  pickAnImage: {
+    id: 'pickAnImage',
+    defaultMessage: 'Pick an existing image',
+  },
+  uploadAnImage: {
+    id: 'uploadAnImage',
+    defaultMessage: 'Upload an image from your computer',
+  },
+  linkAnImage: {
+    id: 'linkAnImage',
+    defaultMessage: 'Enter a URL to an image',
+  },
+  uploadingImage: {
+    id: 'Uploading image',
+    defaultMessage: 'Uploading image',
+  },
+});
+
+const UnconnectedImageInput = (props) => {
+  const {
+    id,
+    onChange,
+    onFocus,
+    openObjectBrowser,
+    value,
+    imageSize = 'teaser',
+    selected = true,
+    hideLinkPicker = false,
+    hideObjectBrowserPicker = false,
+    restrictFileUpload = false,
+    objectBrowserPickerType = 'image',
+    description,
+    placeholderLinkInput = '',
+    onSelectItem,
+  } = props;
+
+  const intl = useIntl();
+  const linkEditor = useLinkEditor();
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const contextUrl = location.pathname;
+
+  const [uploading, setUploading] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+
+  const imageUploadInputRef = useRef(null);
+
+  const requestId = `image-upload-${id}`;
+
+  const loaded = props.request.loaded;
+  const { content } = props;
+  const imageId = content?.['@id'];
+  const image = content?.image;
+  let loading = false;
+
+  useEffect(() => {
+    if (uploading && loading && loaded) {
+      setUploading(false);
+      onChange(id, imageId, {
+        image_field: 'image',
+        image_scales: { image: [image] },
+      });
+    }
+  }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
+
+  loading = usePrevious(props.request?.loading);
+
+  const handleUpload = React.useCallback(
+    (eventOrFile) => {
+      if (restrictFileUpload === true) return;
+      eventOrFile.target && eventOrFile.stopPropagation();
+
+      setUploading(true);
+      const file = eventOrFile.target
+        ? eventOrFile.target.files[0]
+        : eventOrFile[0];
+      if (!validateFileUploadSize(file, intl.formatMessage)) return;
+      readAsDataURL(file).then((fileData) => {
+        const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
+        dispatch(
+          createContent(
+            getBaseUrl(contextUrl),
+            {
+              '@type': 'Image',
+              title: file.name,
+              image: {
+                data: fields[3],
+                encoding: fields[2],
+                'content-type': fields[1],
+                filename: file.name,
+              },
+            },
+            props.block || requestId,
+          ),
+        );
+      });
+    },
+    [
+      restrictFileUpload,
+      intl.formatMessage,
+      dispatch,
+      props,
+      contextUrl,
+      requestId,
+    ],
+  );
+
+  const onDragEnter = React.useCallback(() => {
+    if (restrictFileUpload === false) setDragging(true);
+  }, [restrictFileUpload]);
+  const onDragLeave = React.useCallback(() => setDragging(false), []);
+
+  return value ? (
+    <div
+      className="image-upload-widget-image"
+      onClick={onFocus}
+      onKeyDown={onFocus}
+      role="toolbar"
+    >
+      {selected && <ImageToolbar {...props} />}
+      <img
+        className={props.className}
+        src={
+          isInternalURL(value)
+            ? `${flattenToAppURL(value)}/@@images/image/${imageSize}`
+            : value
+        }
+        alt=""
+      />
+    </div>
+  ) : (
+    <div
+      className="image-upload-widget"
+      onClick={onFocus}
+      onKeyDown={onFocus}
+      role="toolbar"
+    >
+      <Dropzone
+        noClick
+        onDrop={handleUpload}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        className="dropzone"
+      >
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <Message>
+              {dragging && <Dimmer active></Dimmer>}
+              {uploading && (
+                <Dimmer active>
+                  <Loader indeterminate>
+                    {intl.formatMessage(messages.uploadingImage)}
+                  </Loader>
+                </Dimmer>
+              )}
+              <img src={imageBlockSVG} alt="" className="placeholder" />
+              <p>{description || intl.formatMessage(messages.addImage)}</p>
+              <div className="toolbar-wrapper">
+                <div className="toolbar-inner" ref={linkEditor.anchorNode}>
+                  {hideObjectBrowserPicker === false && (
+                    <Button.Group>
+                      <Button
+                        aria-label={intl.formatMessage(messages.pickAnImage)}
+                        icon
+                        basic
+                        onClick={(e) => {
+                          onFocus && onFocus();
+                          e.preventDefault();
+                          openObjectBrowser({
+                            mode: objectBrowserPickerType,
+                            onSelectItem: onSelectItem
+                              ? onSelectItem
+                              : (url, { title, image_field, image_scales }) => {
+                                  onChange(props.id, flattenToAppURL(url), {
+                                    title,
+                                    image_field,
+                                    image_scales,
+                                  });
+                                },
+                            currentPath: contextUrl,
+                          });
+                        }}
+                      >
+                        <Icon name={navTreeSVG} size="24px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                  {restrictFileUpload === false && (
+                    <Button.Group>
+                      <Button
+                        aria-label={intl.formatMessage(messages.uploadAnImage)}
+                        icon
+                        basic
+                        compact
+                        onClick={() => {
+                          imageUploadInputRef.current.click();
+                        }}
+                      >
+                        <Icon name={uploadSVG} size="24px" />
+                      </Button>
+                      <input
+                        {...getInputProps({
+                          type: 'file',
+                          ref: imageUploadInputRef,
+                          onChange: handleUpload,
+                          style: { display: 'none' },
+                        })}
+                      />
+                    </Button.Group>
+                  )}
+
+                  {hideLinkPicker === false && (
+                    <Button.Group>
+                      <Button
+                        icon
+                        basic
+                        aria-label={intl.formatMessage(messages.linkAnImage)}
+                        onClick={(e) => {
+                          !props.selected && onFocus && onFocus();
+                          linkEditor.show();
+                        }}
+                      >
+                        <Icon name={linkSVG} circled size="24px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                </div>
+                {linkEditor.anchorNode && (
+                  <linkEditor.LinkEditor
+                    value={value}
+                    placeholder={
+                      placeholderLinkInput ||
+                      intl.formatMessage(messages.linkAnImage)
+                    }
+                    objectBrowserPickerType={objectBrowserPickerType}
+                    onChange={(_, e) =>
+                      onChange(
+                        props.id,
+                        isInternalURL(e) ? flattenToAppURL(e) : e,
+                        {},
+                      )
+                    }
+                    id={id}
+                  />
+                )}
+              </div>
+            </Message>
+          </div>
+        )}
+      </Dropzone>
+    </div>
+  );
+};
+
+export const ImageInput = compose(
+  connect(
+    (state, ownProps) => {
+      const requestId = `image-upload-${ownProps.id}`;
+      return {
+        request: state.content.subrequests[ownProps.block || requestId] || {},
+        content: state.content.subrequests[ownProps.block || requestId]?.data,
+      };
+    },
+    { createContent },
+  ),
+)(withObjectBrowser(UnconnectedImageInput));
+
+const ImageUploadWidget = (props) => {
+  const { fieldSet, id, title } = props;
+  return (
+    <FormFieldWrapper
+      {...props}
+      columns={1}
+      className="block image-upload-widget"
+    >
+      <div className="wrapper">
+        <label
+          id={`fieldset-${fieldSet}-field-label-${id}`}
+          htmlFor={`field-${id}`}
+        >
+          {title}
+        </label>
+      </div>
+      <ImageInput {...props} />
+    </FormFieldWrapper>
+  );
+};
+
+export default ImageUploadWidget;

package/src/components/manage/Widgets/ImageWidget.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ImageWidget from './ImageWidget';
+import WidgetStory from './story';
+
+export const Default = WidgetStory.bind({
+  props: { id: 'image_widget', title: 'Image', data: {}, properties: {} },
+  widget: ImageWidget,
+});
+
+export const Filled = WidgetStory.bind({
+  props: {
+    id: 'image_widget',
+    title: 'Image',
+    data: {},
+    properties: {},
+    value: 'halfdome2022.jpeg',
+  },
+  widget: ImageWidget,
+});
+Filled.args = {
+  value: 'halfdome2022.jpeg',
+};
+
+export const Inline = WidgetStory.bind({
+  props: {
+    id: 'image_widget',
+    title: 'Image',
+    data: {},
+    properties: {},
+    inline: true,
+  },
+  widget: ImageWidget,
+});
+
+export default {
+  title: 'Edit Widgets/Image',
+  component: ImageWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -4,10 +4,10 @@
  */
 
 import React, { useState } from 'react';
-import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { isInternalURL, flattenToAppURL, URLUtils } from '@plone/volto/helpers';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -15,13 +15,13 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
 
 /** Widget to edit urls
  *
- * This is the default widget used for the `remoteUrl` field. You can also use
+ * This is a widget used for getting and setting an internal url. You can also use
  * it by declaring a field like:
  *
  * ```jsx
  * {
  *  title: "URL",
- *  widget: 'url',
+ *  widget: 'internal_url',
  * }
  * ```
  */
@@ -35,20 +35,20 @@ export const InternalUrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    value,
   } = props;
   const inputId = `field-${id}`;
 
-  const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
+
   /**
    * Clear handler
    * @method clear
    * @param {Object} value Value
-   * @returns {undefined}
+   * @returns {string} Empty string
    */
   const clear = () => {
-    setValue('');
-    onChange(id, undefined);
+    onChange(id, '');
   };
 
   const onChangeValue = (_value) => {
@@ -63,8 +63,6 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    setValue(newValue);
-
     newValue = isInternalURL(newValue) ? flattenToAppURL(newValue) : newValue;
 
     if (!isInternalURL(newValue) && newValue.length > 0) {
@@ -75,7 +73,7 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    onChange(id, newValue === '' ? undefined : newValue);
+    onChange(id, newValue);
   };
 
   return (
@@ -89,12 +87,10 @@ export const InternalUrlWidget = (props) => {
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
+          onBlur={({ target }) => onBlur(id, target.value)}
           onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
+          minLength={minLength}
+          maxLength={maxLength}
           error={isInvalid}
         />
         {value?.length > 0 ? (
@@ -177,4 +173,4 @@ InternalUrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(InternalUrlWidget);
+export default withObjectBrowser(InternalUrlWidget);

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**

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

@@ -6,9 +6,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { compact, isArray, isEmpty, remove } from 'lodash';
+import { compact, includes, isArray, isEmpty, remove } from 'lodash';
 import { connect } from 'react-redux';
-import { Label, Popup, Button } from 'semantic-ui-react';
+import { Image, Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
@@ -21,6 +21,7 @@ import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrow
 import { defineMessages, injectIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import config from '@plone/volto/registry';
 
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -122,7 +123,16 @@ export class ObjectBrowserWidgetComponent extends Component {
         }
         trigger={
           <Label>
-            <div className="item-title">{item.title}</div>
+            <div className="item-title">
+              {includes(config.settings.imageObjects, item['@type']) ? (
+                <Image
+                  size="small"
+                  src={`${item['@id']}/@@images/image/thumb`}
+                />
+              ) : (
+                item.title
+              )}
+            </div>
             <div>
               {this.props.mode === 'multiple' && (
                 <Icon

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import ObjectBrowserWidget from './ObjectBrowserWidget';
@@ -14,7 +14,7 @@ test('renders a objectBrowser widget component', () => {
       messages: {},
     },
   });
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <MemoryRouter>
         <ObjectBrowserWidget
@@ -26,6 +26,6 @@ test('renders a objectBrowser widget component', () => {
       </MemoryRouter>
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
-import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
+import { DragDropList, Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 

package/src/components/manage/Widgets/ObjectListWidget.test.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),

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

@@ -6,8 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tab } from 'semantic-ui-react';
-
-import Field from '@plone/volto/components/manage/Form/Field';
+import { Field } from '@plone/volto/components/manage/Form';
 
 /**
  * Renders a field set. Passes some of the values in the schema to the Field

package/src/components/manage/Widgets/ObjectWidget.test.jsx

@@ -3,9 +3,10 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectWidget from './ObjectWidget';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const LinkSchema = {

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { toPairs, groupBy, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';

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

@@ -6,7 +6,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-//import { RRule, RRuleSet, rrulestr } from 'rrule';
 import { connect } from 'react-redux';
 
 import cx from 'classnames';
@@ -22,7 +21,9 @@ import {
   Header,
 } from 'semantic-ui-react';
 
-import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
 import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
@@ -445,8 +446,8 @@ class RecurrenceWidget extends Component {
       field === 'dtstart'
         ? value
         : rruleSet.dtstart()
-        ? rruleSet.dtstart()
-        : this.moment().utc().toDate();
+          ? rruleSet.dtstart()
+          : this.moment().utc().toDate();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -746,7 +747,7 @@ class RecurrenceWidget extends Component {
         id={`${fieldSet || 'field'}-${id}`}
       >
         <Grid>
-          <Grid.Row stretched>
+          <Grid.Row stretched verticalAlign="middle">
             <Grid.Column width="4">
               <div className="wrapper">
                 <label htmlFor={`field-${id}`}>{title}</label>

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx

@@ -14,7 +14,7 @@ beforeAll(
 
 const mockStore = configureStore();
 
-test('renders a recurrence widget component', async () => {
+test('renders a recurrence widget component with aligned columns', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',