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

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -623,7 +623,7 @@ class Toolbar extends Component {
                 aria-label={this.props.intl.formatMessage(
                   messages.shrinkToolbar,
                 )}
-                className={cx({
+                className={cx('toolbar-handler-button', {
                   [this.props.content?.review_state]:
                     this.props.content?.review_state,
                 })}

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

@@ -129,7 +129,7 @@ const compareOption = (inputValue = '', option, accessors) => {
  * @class ArrayWidget
  * @extends Component
  *
- * A createable select array widget will be rendered if the named vocabulary is
+ * A creatable select array widget will be rendered if the named vocabulary is
  * in the widget definition (hint) like:
  *
  * ```
@@ -280,7 +280,7 @@ class ArrayWidget extends Component {
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
     const SortableSelect =
-      // It will be only createable if the named vocabulary is in the widget definition
+      // It will be only creatable if the named vocabulary is in the widget definition
       // (hint) like:
       // list_field_voc_unconstrained = schema.List(
       //     title=u"List field with values from vocabulary but not constrained to them.",

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

@@ -1,12 +1,6 @@
-/**
- * DatetimeWidget component.
- * @module components/manage/Widgets/DatetimeWidget
- */
-import React, { Component } from 'react';
-import { compose } from 'redux';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
@@ -50,6 +44,7 @@ const PrevIcon = () => (
     <Icon name={leftKey} size="30px" />
   </div>
 );
+
 const NextIcon = () => (
   <div
     style={{
@@ -72,68 +67,53 @@ const defaultTimeDateOnly = {
   second: 0,
 };
 
-/**
- * DatetimeWidget component class
- * @class DatetimeWidget
- * @extends Component
- *
- * To use it, in schema properties, declare a field like:
- *
- * ```jsx
- * {
- *  title: "Publish date",
- *  type: 'datetime',
- * }
- * ```
- */
-export class DatetimeWidgetComponent extends Component {
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs DatetimeWidget
-   */
-  constructor(props) {
-    super(props);
-    this.moment = props.moment.default;
-
-    this.state = {
-      focused: false,
-      // if passed value matches the construction time, we guess it's a default
-      isDefault:
-        parseDateTime(
-          toBackendLang(this.props.lang),
-          this.props.value,
-          undefined,
-          this.moment,
-        )?.toISOString() === this.moment().utc().toISOString(),
-    };
-  }
-
-  getInternalValue() {
-    return parseDateTime(
-      toBackendLang(this.props.lang),
-      this.props.value,
+const DatetimeWidgetComponent = (props) => {
+  const {
+    id,
+    resettable,
+    reactDates,
+    widgetOptions,
+    moment,
+    value,
+    onChange,
+    dateOnly,
+    widget,
+    noPastDates: propNoPastDates,
+    isDisabled,
+  } = props;
+
+  const intl = useIntl();
+  const lang = intl.locale;
+
+  const [focused, setFocused] = useState(false);
+  const [isDefault, setIsDefault] = useState(false);
+
+  const { SingleDatePicker } = reactDates;
+
+  useEffect(() => {
+    const parsedDateTime = parseDateTime(
+      toBackendLang(lang),
+      value,
       undefined,
-      this.moment,
+      moment.default,
+    );
+    setIsDefault(
+      parsedDateTime?.toISOString() === moment.default().utc().toISOString(),
     );
-  }
+  }, [value, lang, moment]);
 
-  getDateOnly() {
-    return this.props.dateOnly || this.props.widget === 'date';
-  }
+  const getInternalValue = () => {
+    return parseDateTime(toBackendLang(lang), value, undefined, moment.default);
+  };
+
+  const getDateOnly = () => {
+    return dateOnly || widget === 'date';
+  };
 
-  /**
-   * Update date storage
-   * @method onDateChange
-   * @param {Object} date updated momentjs Object for date
-   * @returns {undefined}
-   */
-  onDateChange = (date) => {
+  const onDateChange = (date) => {
     if (date) {
-      const moment = this.props.moment.default;
-      const isDateOnly = this.getDateOnly();
-      const base = (this.getInternalValue() || moment()).set({
+      const isDateOnly = getDateOnly();
+      const base = (getInternalValue() || moment.default()).set({
         year: date.year(),
         month: date.month(),
         date: date.date(),
@@ -142,125 +122,100 @@ export class DatetimeWidgetComponent extends Component {
       const dateValue = isDateOnly
         ? base.format('YYYY-MM-DD')
         : base.toISOString();
-      this.props.onChange(this.props.id, dateValue);
+      onChange(id, dateValue);
     }
-    this.setState({ isDefault: false });
+    setIsDefault(false);
   };
 
-  /**
-   * Update date storage
-   * @method onTimeChange
-   * @param {Object} time updated momentjs Object for time
-   * @returns {undefined}
-   */
-  onTimeChange = (time) => {
-    const moment = this.props.moment.default;
+  const onTimeChange = (time) => {
     if (time) {
-      const base = (this.getInternalValue() || moment()).set({
+      const base = (getInternalValue() || moment.default()).set({
         hours: time?.hours() ?? 0,
         minutes: time?.minutes() ?? 0,
         seconds: 0,
       });
       const dateValue = base.toISOString();
-      this.props.onChange(this.props.id, dateValue);
+      onChange(id, dateValue);
     }
   };
 
-  onResetDates = () => {
-    this.setState({ isDefault: false });
-    this.props.onChange(this.props.id, null);
+  const onResetDates = () => {
+    setIsDefault(false);
+    onChange(id, null);
   };
 
-  /**
-   * Handle SingleDatePicker focus
-   * @method onFocusChange
-   * @param {boolean} focused component focus state.
-   * @returns {undefined}
-   */
-  onFocusChange = ({ focused }) => this.setState({ focused });
-
-  render() {
-    const { id, resettable, intl, reactDates, widgetOptions, lang } =
-      this.props;
-    const noPastDates =
-      this.props.noPastDates || widgetOptions?.pattern_options?.noPastDates;
-    const moment = this.props.moment.default;
-    const datetime = this.getInternalValue();
-    const dateOnly = this.getDateOnly();
-    const { SingleDatePicker } = reactDates;
-
-    return (
-      <FormFieldWrapper {...this.props}>
-        <div className="date-time-widget-wrapper">
+  const onFocusChange = ({ focused }) => setFocused(focused);
+
+  const noPastDates =
+    propNoPastDates || widgetOptions?.pattern_options?.noPastDates;
+  const datetime = getInternalValue();
+  const isDateOnly = getDateOnly();
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="date-time-widget-wrapper">
+        <div
+          className={cx('ui input date-input', {
+            'default-date': isDefault,
+          })}
+        >
+          <SingleDatePicker
+            date={datetime}
+            disabled={isDisabled}
+            onDateChange={onDateChange}
+            focused={focused}
+            numberOfMonths={1}
+            {...(noPastDates ? {} : { isOutsideRange: () => false })}
+            onFocusChange={onFocusChange}
+            noBorder
+            displayFormat={moment.default
+              .localeData(toBackendLang(lang))
+              .longDateFormat('L')}
+            navPrev={<PrevIcon />}
+            navNext={<NextIcon />}
+            id={`${id}-date`}
+            placeholder={intl.formatMessage(messages.date)}
+          />
+        </div>
+        {!isDateOnly && (
           <div
-            className={cx('ui input date-input', {
-              'default-date': this.state.isDefault,
+            className={cx('ui input time-input', {
+              'default-date': isDefault,
             })}
           >
-            <SingleDatePicker
-              date={datetime}
-              disabled={this.props.isDisabled}
-              onDateChange={this.onDateChange}
-              focused={this.state.focused}
-              numberOfMonths={1}
-              {...(noPastDates ? {} : { isOutsideRange: () => false })}
-              onFocusChange={this.onFocusChange}
-              noBorder
-              displayFormat={moment
+            <TimePicker
+              disabled={isDisabled}
+              defaultValue={datetime}
+              value={datetime}
+              onChange={onTimeChange}
+              allowEmpty={false}
+              showSecond={false}
+              use12Hours={lang === 'en'}
+              id={`${id}-time`}
+              format={moment.default
                 .localeData(toBackendLang(lang))
-                .longDateFormat('L')}
-              navPrev={<PrevIcon />}
-              navNext={<NextIcon />}
-              id={`${id}-date`}
-              placeholder={intl.formatMessage(messages.date)}
+                .longDateFormat('LT')}
+              placeholder={intl.formatMessage(messages.time)}
+              focusOnOpen
+              placement="bottomRight"
             />
           </div>
-          {!dateOnly && (
-            <div
-              className={cx('ui input time-input', {
-                'default-date': this.state.isDefault,
-              })}
-            >
-              <TimePicker
-                disabled={this.props.isDisabled}
-                defaultValue={datetime}
-                value={datetime}
-                onChange={this.onTimeChange}
-                allowEmpty={false}
-                showSecond={false}
-                use12Hours={lang === 'en'}
-                id={`${id}-time`}
-                format={moment
-                  .localeData(toBackendLang(lang))
-                  .longDateFormat('LT')}
-                placeholder={intl.formatMessage(messages.time)}
-                focusOnOpen
-                placement="bottomRight"
-              />
-            </div>
-          )}
-          {resettable && (
-            <button
-              // FF needs that the type is "button" in order to not POST the form
-              type="button"
-              disabled={this.props.isDisabled || !datetime}
-              onClick={() => this.onResetDates()}
-              className="item ui noborder button"
-            >
-              <Icon name={clearSVG} size="24px" className="close" />
-            </button>
-          )}
-        </div>
-      </FormFieldWrapper>
-    );
-  }
-}
+        )}
+        {resettable && (
+          <button
+            type="button"
+            disabled={isDisabled || !datetime}
+            onClick={onResetDates}
+            className="item ui noborder button"
+          >
+            <Icon name={clearSVG} size="24px" className="close" />
+          </button>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
 DatetimeWidgetComponent.propTypes = {
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
@@ -275,11 +230,6 @@ DatetimeWidgetComponent.propTypes = {
   resettable: PropTypes.bool,
 };
 
-/**
- * Default properties.
- * @property {Object} defaultProps Default properties.
- * @static
- */
 DatetimeWidgetComponent.defaultProps = {
   description: null,
   required: false,
@@ -290,10 +240,6 @@ DatetimeWidgetComponent.defaultProps = {
   resettable: true,
 };
 
-export default compose(
-  injectLazyLibs(['reactDates', 'moment']),
-  connect((state) => ({
-    lang: state.intl.locale,
-  })),
-  injectIntl,
-)(DatetimeWidgetComponent);
+export default injectLazyLibs(['reactDates', 'moment'])(
+  DatetimeWidgetComponent,
+);

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

@@ -78,6 +78,7 @@ const UnconnectedImageInput = (props) => {
     placeholderLinkInput = '',
     onSelectItem,
   } = props;
+  const imageValue = value?.[0]?.['@id'] || value;
 
   const intl = useIntl();
   const linkEditor = useLinkEditor();
@@ -155,7 +156,7 @@ const UnconnectedImageInput = (props) => {
   }, [restrictFileUpload]);
   const onDragLeave = React.useCallback(() => setDragging(false), []);
 
-  return value ? (
+  return imageValue ? (
     <div
       className="image-upload-widget-image"
       onClick={onFocus}
@@ -166,9 +167,9 @@ const UnconnectedImageInput = (props) => {
       <img
         className={props.className}
         src={
-          isInternalURL(value)
-            ? `${flattenToAppURL(value)}/@@images/image/${imageSize}`
-            : value
+          isInternalURL(imageValue)
+            ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+            : imageValue
         }
         alt=""
       />
@@ -272,7 +273,7 @@ const UnconnectedImageInput = (props) => {
                 </div>
                 {linkEditor.anchorNode && (
                   <linkEditor.LinkEditor
-                    value={value}
+                    value={imageValue}
                     placeholder={
                       placeholderLinkInput ||
                       intl.formatMessage(messages.linkAnImage)

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

@@ -81,7 +81,13 @@ const EndField = ({ value, count, until, onChange, intl }) => {
                   id="until"
                   title={intl.formatMessage(messages.recurrenceEndsUntil)}
                   dateOnly={true}
-                  value={until || ''}
+                  value={
+                    until
+                      ? typeof until === 'string'
+                        ? until
+                        : until?.toISOString()
+                      : ''
+                  }
                   resettable={false}
                   onChange={(id, value) => {
                     onChange(id, value === '' ? undefined : value);

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

@@ -37,7 +37,6 @@ import {
   FREQUENCES,
   WEEKLY_DAYS,
   MONDAYFRIDAY_DAYS,
-  toISOString,
   rrulei18n,
 } from './Utils';
 
@@ -219,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();
+          },
+        );
       }
     }
   }
@@ -250,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;
@@ -339,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':
@@ -422,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;
@@ -447,7 +478,7 @@ class RecurrenceWidget extends Component {
         ? value
         : rruleSet.dtstart()
           ? rruleSet.dtstart()
-          : this.moment().utc().toDate();
+          : new Date();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -470,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) {
@@ -502,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;
   };
 
@@ -716,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();
   };