@plone/volto 18.10.1 → 18.11.0

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

@@ -0,0 +1,214 @@
+/**
+ * CheckboxGroupWidget component.
+ * @module components/manage/Widgets/CheckboxGroupWidget
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import filter from 'lodash/filter';
+import includes from 'lodash/includes';
+import map from 'lodash/map';
+import without from 'lodash/without';
+import { injectIntl } from 'react-intl';
+import {
+  getVocabFromHint,
+  getVocabFromField,
+  getVocabFromItems,
+} from '@plone/volto/helpers/Vocabularies/Vocabularies';
+import { Checkbox } from 'semantic-ui-react';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import {
+  getVocabulary,
+  getVocabularyTokenTitle,
+} from '@plone/volto/actions/vocabularies/vocabularies';
+
+/**
+ * CheckboxGroupWidget component class.
+ * @function CheckboxGroupWidget
+ * @returns {string} Markup of the component.
+ */
+class CheckboxGroupWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    required: PropTypes.bool,
+    filterChoices: PropTypes.arrayOf(PropTypes.string),
+    error: PropTypes.arrayOf(PropTypes.string),
+    getVocabulary: PropTypes.func.isRequired,
+    getVocabularyTokenTitle: PropTypes.func.isRequired,
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    ),
+    items: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    widgetOptions: PropTypes.shape({
+      vocabulary: PropTypes.object,
+    }),
+    value: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.func,
+      PropTypes.array,
+    ]),
+    onChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onEdit: PropTypes.func,
+    onDelete: PropTypes.func,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    filterChoices: null,
+    items: {
+      vocabulary: null,
+    },
+    widgetOptions: {
+      vocabulary: null,
+    },
+    error: [],
+    choices: [],
+    value: null,
+    onChange: () => {},
+    onBlur: () => {},
+    onClick: () => {},
+    onEdit: null,
+    onDelete: null,
+  };
+
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (
+      (!this.props.choices || this.props.choices?.length === 0) &&
+      this.props.vocabBaseUrl
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.vocabBaseUrl !== prevProps.vocabBaseUrl &&
+      (!this.props.choices || this.props.choices?.length === 0)
+    ) {
+      this.props.getVocabulary({
+        vocabNameOrURL: this.props.vocabBaseUrl,
+        size: -1,
+        subrequest: this.props.lang,
+      });
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, choices, value, onChange, filterChoices, additionalChoices } =
+      this.props;
+
+    let options = this.props.vocabBaseUrl
+      ? this.props.choices
+      : [
+          ...map(choices, (option) => ({
+            value: option[0],
+            label:
+              // Fix "None" on the serializer, to remove when fixed in p.restapi
+              option[1] !== 'None' && option[1] ? option[1] : option[0],
+          })),
+        ];
+
+    if (additionalChoices) {
+      options = [...(options || []), ...additionalChoices];
+    }
+
+    if (filterChoices) {
+      options = filter(options, (item) => filterChoices.includes(item.value));
+    }
+
+    return (
+      <FormFieldWrapper {...this.props}>
+        {options.map((option) => (
+          <Checkbox
+            label={option.label}
+            key={option.value}
+            name={id}
+            value={option.value}
+            checked={includes(value, option.value)}
+            onChange={(e, data) => {
+              const newValue = value || [];
+              if (data.checked) {
+                onChange(id, [...newValue, data.value]);
+              } else {
+                onChange(id, without(newValue, data.value));
+              }
+            }}
+          />
+        ))}
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const CheckboxGroupWidgetComponent = injectIntl(CheckboxGroupWidget);
+
+export default connect(
+  (state, props) => {
+    const vocabBaseUrl = !props.choices
+      ? getVocabFromHint(props) ||
+        getVocabFromField(props) ||
+        getVocabFromItems(props)
+      : '';
+
+    const vocabState =
+      state.vocabularies?.[vocabBaseUrl]?.subrequests?.[state.intl.locale];
+
+    // If the schema already has the choices in it, then do not try to get the vocab,
+    // even if there is one
+    if (props.choices) {
+      return {
+        choices: props.choices,
+        lang: state.intl.locale,
+      };
+    } else if (vocabState) {
+      return {
+        vocabBaseUrl,
+        choices: vocabState?.items ?? [],
+        lang: state.intl.locale,
+      };
+      // There is a moment that vocabState is not there yet, so we need to pass the
+      // vocabBaseUrl to the component.
+    } else if (vocabBaseUrl) {
+      return {
+        vocabBaseUrl,
+        lang: state.intl.locale,
+      };
+    }
+    return { lang: state.intl.locale };
+  },
+  { getVocabulary, getVocabularyTokenTitle },
+)(CheckboxGroupWidgetComponent);

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import CheckboxGroupWidget, {
+  CheckboxGroupWidgetComponent,
+} from './CheckboxGroupWidget';
+import WidgetStory from './story';
+
+export const Default = WidgetStory.bind({
+  widget: CheckboxGroupWidget,
+});
+Default.args = {
+  id: 'field-empty',
+  title: 'field 1 title',
+  description: 'Optional help text',
+  choices: [
+    ['Foo', 'Foo'],
+    ['Bar', 'Bar'],
+    ['FooBar', 'FooBar'],
+  ],
+};
+
+export default {
+  title: 'Edit Widgets/Checkbox Group Widget',
+  component: CheckboxGroupWidgetComponent,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // controlled value prop
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { waitFor, render, screen } from '@testing-library/react';
+
+import CheckboxGroupWidget from './CheckboxGroupWidget';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+test('renders a checkbox group widget component', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    vocabularies: {
+      'plone.app.vocabularies.Keywords': {
+        items: [{ title: 'My item', value: 'myitem' }],
+        itemsTotal: 1,
+      },
+    },
+  });
+
+  const { container } = render(
+    <Provider store={store}>
+      <CheckboxGroupWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  await waitFor(() => screen.getByText('My field'));
+  expect(container).toMatchSnapshot();
+});

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

@@ -10,12 +10,14 @@ import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import Toast from '@plone/volto/components/manage/Toast/Toast';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { defineMessages, useIntl } from 'react-intl';
+import { toast } from 'react-toastify';
 
 const imageMimetypes = [
   'image/png',
@@ -48,6 +50,15 @@ const messages = defineMessages({
     id: 'Choose a file',
     defaultMessage: 'Choose a file',
   },
+  maxSizeError: {
+    id: 'The file you uploaded exceeded the maximum allowed size of {size} bytes',
+    defaultMessage:
+      'The file you uploaded exceeded the maximum allowed size of {size} bytes',
+  },
+  acceptError: {
+    id: 'File is not of the accepted type {accept}',
+    defaultMessage: 'File is not of the accepted type {accept}',
+  },
 });
 
 /**
@@ -96,7 +107,33 @@ const FileWidget = (props) => {
    * @param {array} files File objects
    * @returns {undefined}
    */
-  const onDrop = (files) => {
+  const onDrop = (files, rejectedFiles) => {
+    rejectedFiles.forEach((file) => {
+      file.errors.forEach((err) => {
+        if (err.code === 'file-too-large') {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.maxSizeError, {
+                size: props.size,
+              })}
+            />,
+          );
+        }
+
+        if (err.code === 'file-invalid-type') {
+          toast.error(
+            <Toast
+              error
+              title={intl.formatMessage(messages.acceptError, {
+                accept: props.accept,
+              })}
+            />,
+          );
+        }
+      });
+    });
+    if (files.length < 1) return;
     const file = files[0];
     if (!validateFileUploadSize(file, intl.formatMessage)) return;
     readAsDataURL(file).then((data) => {
@@ -125,7 +162,11 @@ const FileWidget = (props) => {
 
   return (
     <FormFieldWrapper {...props}>
-      <Dropzone onDrop={onDrop}>
+      <Dropzone
+        onDrop={onDrop}
+        {...(props.size ? { maxSize: props.size } : {})}
+        {...(props.accept ? { accept: props.accept } : {})}
+      >
         {({ getRootProps, getInputProps, isDragActive }) => (
           <div className="file-widget-dropzone" {...getRootProps()}>
             {isDragActive && <Dimmer active></Dimmer>}

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

@@ -0,0 +1,114 @@
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from 'semantic-ui-react';
+
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+const HiddenWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    placeholder,
+    isDisabled,
+    focus,
+    onEdit,
+  } = props;
+
+  const ref = useRef();
+
+  useEffect(() => {
+    if (focus) {
+      ref.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return onEdit ? (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onChange(id, target.value === '' ? undefined : target.value)
+        }
+        ref={ref}
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  ) : (
+    <input
+      id={`field-${id}`}
+      name={id}
+      value={value || ''}
+      placeholder={placeholder}
+      ref={ref}
+      type="hidden"
+    />
+  );
+};
+
+export default HiddenWidget;
+
+HiddenWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  icon: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }),
+  iconAction: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+HiddenWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+  focus: false,
+  icon: null,
+  iconAction: null,
+  minLength: null,
+  maxLength: null,
+};

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

@@ -0,0 +1,20 @@
+import HiddenWidget from './HiddenWidget';
+import WidgetStory from './story';
+
+export const Hidden = WidgetStory.bind({
+  props: { id: 'text', title: 'Text' },
+  widget: HiddenWidget,
+});
+
+export default {
+  title: 'Edit Widgets/Hidden',
+  component: HiddenWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import HiddenWidget from './HiddenWidget';
+
+const mockStore = configureStore();
+
+test('renders a hidden widget component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <HiddenWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -227,6 +227,7 @@ const UnconnectedImageInput = (props) => {
                             currentPath: contextUrl,
                           });
                         }}
+                        type="button"
                       >
                         <Icon name={navTreeSVG} size="24px" />
                       </Button>
@@ -242,6 +243,7 @@ const UnconnectedImageInput = (props) => {
                         onClick={() => {
                           imageUploadInputRef.current.click();
                         }}
+                        type="button"
                       >
                         <Icon name={uploadSVG} size="24px" />
                       </Button>
@@ -266,6 +268,7 @@ const UnconnectedImageInput = (props) => {
                           !props.selected && onFocus && onFocus();
                           linkEditor.show();
                         }}
+                        type="button"
                       >
                         <Icon name={linkSVG} circled size="24px" />
                       </Button>