@plone/volto 18.0.0-alpha.9 → 18.0.0

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';
 
@@ -36,7 +37,6 @@ import {
   FREQUENCES,
   WEEKLY_DAYS,
   MONDAYFRIDAY_DAYS,
-  toISOString,
   rrulei18n,
 } from './Utils';
 
@@ -218,26 +218,40 @@ class RecurrenceWidget extends Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.value) {
-      if (prevProps.formData?.start !== this.props.formData?.start) {
-        let start = this.getUTCDate(this.props.formData?.start)
-          .startOf('day')
-          .toDate();
-
-        this.setState((prevState) => {
-          let rruleSet = prevState.rruleSet;
-
-          rruleSet = this.updateRruleSet(
-            rruleSet,
-            prevState.formValues,
-            'dtstart',
-            start,
-          );
-
-          return {
-            ...prevState,
-            rruleSet,
-          };
-        });
+      const changedStart =
+        prevProps.formData?.start !== this.props.formData?.start;
+      const changedEnd = prevProps.formData?.end !== this.props.formData?.end;
+
+      if (changedStart || changedEnd) {
+        let start = this.getUTCDate(this.props.formData?.start).toDate();
+
+        let changeFormValues = {};
+        if (changedEnd) {
+          changeFormValues.until = this.getUTCDate(
+            this.props.formData?.end,
+          ).toDate();
+        }
+        this.setState(
+          (prevState) => {
+            let rruleSet = prevState.rruleSet;
+
+            rruleSet = this.updateRruleSet(
+              rruleSet,
+              { ...prevState.formValues, ...changeFormValues },
+              'dtstart',
+              start,
+            );
+
+            return {
+              ...prevState,
+              rruleSet,
+            };
+          },
+          () => {
+            //then, after set state, set recurrence rrule value
+            this.saveRrule();
+          },
+        );
       }
     }
   }
@@ -249,7 +263,8 @@ class RecurrenceWidget extends Component {
   setRecurrenceStartEnd = () => {
     const start = this.props.formData?.start;
 
-    let _start = this.getUTCDate(start).startOf('day').toDate();
+    // The `start` date from Plone is in UTC
+    const _start = new Date(start);
 
     this.setState((prevState) => {
       let rruleSet = prevState.rruleSet;
@@ -338,7 +353,7 @@ class RecurrenceWidget extends Component {
           case 'until':
             if (value != null) {
               formValues['recurrenceEnds'] = option;
-              formValues[option] = toISOString(value);
+              formValues[option] = value;
             }
             break;
           case 'byweekday':
@@ -421,7 +436,24 @@ class RecurrenceWidget extends Component {
           }
           break;
         case 'until':
-          value = value ? this.moment(new Date(value)).utc().toDate() : null;
+          let mDate = null;
+          if (value) {
+            mDate = this.moment(new Date(value));
+            if (typeof value === 'string') {
+              mDate = this.moment(new Date(value));
+            } else {
+              //object-->Date()
+              mDate = this.moment(value);
+            }
+
+            if (this.props.formData.end) {
+              //set time from formData.end
+              const mEnd = this.moment(new Date(this.props.formData.end));
+              mDate.set('hour', mEnd.get('hour'));
+              mDate.set('minute', mEnd.get('minute'));
+            }
+          }
+          value = value ? mDate.toDate() : null;
           break;
         default:
           break;
@@ -445,8 +477,8 @@ class RecurrenceWidget extends Component {
       field === 'dtstart'
         ? value
         : rruleSet.dtstart()
-        ? rruleSet.dtstart()
-        : this.moment().utc().toDate();
+          ? rruleSet.dtstart()
+          : new Date();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -469,13 +501,14 @@ class RecurrenceWidget extends Component {
 
   getDefaultUntil = (freq) => {
     const moment = this.moment;
+
     var end = this.props.formData?.end
-      ? toISOString(this.getUTCDate(this.props.formData.end).toDate())
+      ? moment(new Date(this.props.formData.end))
       : null;
-    var tomorrow = toISOString(moment().add(1, 'days').utc().toDate());
-    var nextWeek = toISOString(moment().add(7, 'days').utc().toDate());
-    var nextMonth = toISOString(moment().add(1, 'months').utc().toDate());
-    var nextYear = toISOString(moment().add(1, 'years').utc().toDate());
+    var tomorrow = moment().add(1, 'days');
+    var nextWeek = moment().add(7, 'days');
+    var nextMonth = moment().add(1, 'months');
+    var nextYear = moment().add(1, 'years');
 
     var until = end;
     switch (freq) {
@@ -501,6 +534,19 @@ class RecurrenceWidget extends Component {
         break;
     }
 
+    if (this.props.formData.end) {
+      //set default end time
+      until.set('hour', end.get('hour'));
+      until.set('minute', end.get('minute'));
+    }
+    until = new Date(
+      until.get('year'),
+      until.get('month'),
+      until.get('date'),
+      until.get('hour'),
+      until.get('minute'),
+    );
+
     return until;
   };
 
@@ -715,9 +761,13 @@ class RecurrenceWidget extends Component {
     }
   };
 
-  save = () => {
+  saveRrule = () => {
     var value = this.state.rruleSet.toString();
     this.props.onChange(this.props.id, value);
+  };
+
+  save = () => {
+    this.saveRrule();
     this.close();
   };
 

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

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Select from 'react-select';
 import { find } from 'lodash';
 import {
   Option,
@@ -13,12 +12,22 @@ import {
   selectTheme,
   customSelectStyles,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 /**
  * SelectInput component class.
  * @function SelectInput
  * @returns {string} Markup of the component.
  */
-const SelectInput = ({ name, disabled, options, value, onChange }) => {
+const SelectInput = ({
+  name,
+  disabled,
+  options,
+  value,
+  onChange,
+  reactSelect,
+}) => {
+  const Select = reactSelect.default;
   const inlineSelectStyles = {
     ...customSelectStyles,
     control: (styles, state) => ({
@@ -78,4 +87,4 @@ SelectInput.defaultProps = {
   onChange: null,
 };
 
-export default SelectInput;
+export default injectLazyLibs('reactSelect')(SelectInput);

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

@@ -1,17 +1,11 @@
-/**
- * ReferenceWidget component.
- * @module components/manage/Widgets/ReferenceWidget
- */
-
-import React, { Component } from 'react';
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Label, Dropdown, Popup, Icon } from 'semantic-ui-react';
 import { compact, concat, fromPairs, map, values, uniqBy } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { resetSearchContent, searchContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
@@ -26,130 +20,16 @@ const messages = defineMessages({
   },
 });
 
-/**
- * ReferenceWidget component class.
- * @class ReferenceWidget
- * @extends Component
- */
-class ReferenceWidget 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,
-    multiple: PropTypes.bool,
-    error: PropTypes.arrayOf(PropTypes.string),
-    value: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.object),
-      PropTypes.object,
-    ]),
-    onChange: PropTypes.func.isRequired,
-    resetSearchContent: PropTypes.func.isRequired,
-    searchContent: PropTypes.func.isRequired,
-    search: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        '@type': PropTypes.string,
-        title: PropTypes.string,
-        description: PropTypes.string,
-      }),
-    ),
-    wrapped: PropTypes.bool,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    search: [],
-    value: null,
-    multiple: true,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.onSearchChange = this.onSearchChange.bind(this);
-
-    this.state = {
-      choices: props.value
-        ? props.multiple
-          ? fromPairs(
-              map(props.value, (value) => [
-                value['@id'],
-                {
-                  key: value['@id'],
-                  text: flattenToAppURL(value['@id']),
-                  value: value['@id'],
-                  label: {
-                    content: value.title,
-                  },
-                  data: value,
-                },
-              ]),
-            )
-          : {
-              [props.value['@id']]: {
-                key: props.value['@id'],
-                text: flattenToAppURL(props.value),
-                value: props.value['@id'],
-                label: {
-                  content: props.value.title,
-                },
-                data: props.value,
-              },
-              novalue: {
-                key: 'novalue',
-                text: this.props.intl.formatMessage(messages.no_value),
-                value: 'novalue',
-                data: null,
-              },
-            }
-        : {},
-    };
-  }
-
-  componentDidMount() {
-    this.props.resetSearchContent();
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      choices: {
-        ...fromPairs(
-          map(
-            uniqBy(
-              map(
-                compact(concat(nextProps.value, nextProps.search)),
-                (item) => ({
-                  ...item,
-                  '@id': flattenToAppURL(item['@id']),
-                }),
-              ),
-              '@id',
-            ),
-            (value) => [
+const ReferenceWidget = (props) => {
+  const { id, title, value, multiple, onChange } = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const search = useSelector((state) => state.search.items);
+  const [choices, setChoices] = useState(
+    value
+      ? multiple
+        ? fromPairs(
+            map(value, (value) => [
               value['@id'],
               {
                 key: value['@id'],
@@ -160,37 +40,78 @@ class ReferenceWidget extends Component {
                 },
                 data: value,
               },
-            ],
+            ]),
+          )
+        : {
+            [value['@id']]: {
+              key: value['@id'],
+              text: flattenToAppURL(value),
+              value: value['@id'],
+              label: {
+                content: value.title,
+              },
+              data: value,
+            },
+            novalue: {
+              key: 'novalue',
+              text: intl.formatMessage(messages.no_value),
+              value: 'novalue',
+              data: null,
+            },
+          }
+      : {},
+  );
+
+  useEffect(() => {
+    dispatch(resetSearchContent());
+  }, [dispatch]);
+
+  useEffect(() => {
+    setChoices({
+      ...fromPairs(
+        map(
+          uniqBy(
+            map(compact(concat(value, search)), (item) => ({
+              ...item,
+              '@id': flattenToAppURL(item['@id']),
+            })),
+            '@id',
           ),
+          (value) => [
+            value['@id'],
+            {
+              key: value['@id'],
+              text: flattenToAppURL(value['@id']),
+              value: value['@id'],
+              label: {
+                content: value.title,
+              },
+              data: value,
+            },
+          ],
         ),
-        novalue: {
-          key: 'novalue',
-          text: this.props.intl.formatMessage(messages.no_value),
-          value: 'novalue',
-          data: null,
-        },
+      ),
+      novalue: {
+        key: 'novalue',
+        text: intl.formatMessage(messages.no_value),
+        value: 'novalue',
+        data: null,
       },
     });
-  }
+  }, [intl, search, value]);
 
-  /**
-   * On search change handler
-   * @method onSearchChange
-   * @param {object} event Event object.
-   * @param {object} data Event data.
-   * @returns {undefined}
-   */
-
-  onSearchChange(event, data) {
+  const onSearchChange = (event, data) => {
     if (data.searchQuery && data.searchQuery !== '') {
-      this.props.searchContent('', {
-        Title: `*${data.searchQuery}*`,
-      });
+      dispatch(
+        searchContent('', {
+          Title: `*${data.searchQuery}*`,
+        }),
+      );
     } else {
-      this.props.resetSearchContent();
+      dispatch(resetSearchContent());
     }
-  }
-  renderLabel = (item, index, defaultProps) => {
+  };
+  const renderLabel = (item, index, defaultProps) => {
     return (
       <Popup
         key={item.value}
@@ -216,59 +137,62 @@ class ReferenceWidget extends Component {
     );
   };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { id, title, value, multiple, onChange } = this.props;
-
-    return (
-      <FormFieldWrapper {...this.props}>
-        <Dropdown
-          options={values(this.state.choices)}
-          placeholder={title}
-          search
-          selection
-          fluid
-          noResultsMessage={this.props.intl.formatMessage(
-            messages.no_results_found,
-          )}
-          multiple={multiple}
-          value={
-            multiple
-              ? value
-                ? map(value, (item) =>
-                    item && item['@id'] ? flattenToAppURL(item['@id']) : item,
-                  )
-                : []
-              : value
+  return (
+    <FormFieldWrapper {...props}>
+      <Dropdown
+        options={values(choices)}
+        placeholder={title}
+        search
+        selection
+        fluid
+        noResultsMessage={intl.formatMessage(messages.no_results_found)}
+        multiple={multiple}
+        value={
+          multiple
+            ? value
+              ? map(value, (item) =>
+                  item && item['@id'] ? flattenToAppURL(item['@id']) : item,
+                )
+              : []
+            : value
               ? flattenToAppURL(value['@id'])
               : ''
-          }
-          onChange={(event, data) => {
-            return onChange(
-              id,
-              multiple
-                ? map(data.value, (item) => this.state.choices[item].data)
-                : this.state.choices[data.value].data,
-            );
-          }}
-          onSearchChange={this.onSearchChange}
-          renderLabel={this.renderLabel}
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
+        }
+        onChange={(event, data) => {
+          return onChange(
+            id,
+            multiple
+              ? map(data.value, (item) => choices[item].data)
+              : choices[data.value].data,
+          );
+        }}
+        onSearchChange={onSearchChange}
+        renderLabel={renderLabel}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+ReferenceWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  multiple: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.object),
+    PropTypes.object,
+  ]),
+  onChange: PropTypes.func.isRequired,
+  wrapped: PropTypes.bool,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      search: state.search.items,
-    }),
-    { resetSearchContent, searchContent },
-  ),
-)(ReferenceWidget);
+ReferenceWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  multiple: true,
+};
+export default ReferenceWidget;

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

@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { defineMessages, useIntl } from 'react-intl';
 import { toPublicURL, validateFileUploadSize } from '@plone/volto/helpers';

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

@@ -14,11 +14,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { slugify } from '@plone/volto/helpers/Utils/Utils';
 
-import {
-  Field,
-  ModalForm,
-  SchemaWidgetFieldset,
-} from '@plone/volto/components';
+import SchemaWidgetFieldset from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
+import { Field, ModalForm } from '@plone/volto/components/manage/Form';
 
 const messages = defineMessages({
   add: {

package/src/components/manage/Widgets/SchemaWidget.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';
 
@@ -21,7 +21,7 @@ test('renders a schema widget component', () => {
     },
   });
 
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <SchemaWidget
         id="my-field"
@@ -31,6 +31,6 @@ test('renders a schema widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });