@plone/volto 14.0.2 → 14.1.0

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

@@ -3,21 +3,25 @@
  * @module components/manage/Widgets/DatetimeWidget
  */
 import React, { Component } from 'react';
+import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import moment from 'moment';
-import { SingleDatePicker } from 'react-dates';
-import TimePicker from 'rc-time-picker';
+import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
 import { parseDateTime } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 import leftKey from '@plone/volto/icons/left-key.svg';
 import rightKey from '@plone/volto/icons/right-key.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+
 import 'rc-time-picker/assets/index.css';
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 
+const TimePicker = loadable(() => import('rc-time-picker'));
+
 const messages = defineMessages({
   date: {
     id: 'Date',
@@ -80,7 +84,7 @@ const defaultTimeDateOnly = {
  * }
  * ```
  */
-class DatetimeWidget extends Component {
+export class DatetimeWidgetComponent extends Component {
   /**
    * Constructor
    * @method constructor
@@ -89,17 +93,27 @@ class DatetimeWidget extends Component {
    */
   constructor(props) {
     super(props);
-
-    let datetime = parseDateTime(this.props.intl.locale, this.props.value);
+    const moment = props.moment.default;
 
     this.state = {
       focused: false,
-      isDefault: datetime?.toISOString() === moment().utc().toISOString(),
-      datetime,
-      dateOnly: this.props.dateOnly || this.props.widget === 'date',
+      // if passed value matches the construction time, we guess it's a default
+      isDefault:
+        parseDateTime(
+          this.props.intl.locale,
+          this.props.value,
+        )?.toISOString() === moment().utc().toISOString(),
     };
   }
 
+  getInternalValue() {
+    return parseDateTime(this.props.intl.locale, this.props.value);
+  }
+
+  getDateOnly() {
+    return this.props.dateOnly || this.props.widget === 'date';
+  }
+
   /**
    * Update date storage
    * @method onDateChange
@@ -107,26 +121,21 @@ class DatetimeWidget extends Component {
    * @returns {undefined}
    */
   onDateChange = (date) => {
-    if (date)
-      this.setState(
-        (prevState) => ({
-          datetime: prevState.datetime
-            ? prevState.datetime.set({
-                year: date.year(),
-                month: date.month(),
-                date: date.date(),
-                ...(this.state.dateOnly ? defaultTimeDateOnly : {}),
-              })
-            : moment().set({
-                year: date.year(),
-                month: date.month(),
-                date: date.date(),
-                ...(this.state.dateOnly ? defaultTimeDateOnly : {}),
-              }),
-          isDefault: false,
-        }),
-        () => this.onDateTimeChange(),
-      );
+    if (date) {
+      const moment = this.props.moment.default;
+      const isDateOnly = this.getDateOnly();
+      const base = (this.getInternalValue() || moment()).set({
+        year: date.year(),
+        month: date.month(),
+        date: date.date(),
+        ...(isDateOnly ? defaultTimeDateOnly : {}),
+      });
+      const dateValue = isDateOnly
+        ? base.format('YYYY-MM-DD')
+        : base.toISOString();
+      this.props.onChange(this.props.id, dateValue);
+    }
+    this.setState({ isDefault: false });
   };
 
   /**
@@ -136,45 +145,21 @@ class DatetimeWidget extends Component {
    * @returns {undefined}
    */
   onTimeChange = (time) => {
-    this.setState(
-      (prevState) => ({
-        datetime: prevState.datetime
-          ? prevState.datetime.set({
-              hours: time.hours(),
-              minutes: time.minutes(),
-              seconds: 0,
-            })
-          : moment().set({
-              hours: time.hours(),
-              minutes: time.minutes(),
-              seconds: 0,
-            }),
-        isDefault: false,
-      }),
-      () => this.onDateTimeChange(),
-    );
-  };
-
-  /**
-   * Update date storage
-   * @method onDateTimeChange
-   * @returns {undefined}
-   */
-  onDateTimeChange = () => {
-    const dateValue = this.state.dateOnly
-      ? this.state.datetime.format('YYYY-MM-DD')
-      : this.state.datetime.toISOString();
-    this.props.onChange(this.props.id, dateValue);
+    const moment = this.props.moment.default;
+    if (time) {
+      const base = (this.getInternalValue() || moment()).set({
+        hours: time.hours(),
+        minutes: time.minutes(),
+        seconds: 0,
+      });
+      const dateValue = base.toISOString();
+      this.props.onChange(this.props.id, dateValue);
+    }
   };
 
   onResetDates = () => {
-    this.setState(
-      (prevState) => ({
-        datetime: null,
-        isDefault: false,
-      }),
-      this.props.onChange(this.props.id, null),
-    );
+    this.setState({ isDefault: false });
+    this.props.onChange(this.props.id, null);
   };
 
   /**
@@ -186,22 +171,25 @@ class DatetimeWidget extends Component {
   onFocusChange = ({ focused }) => this.setState({ focused });
 
   render() {
-    const { id, noPastDates, resettable, intl } = this.props;
-    const { datetime, isDefault, focused } = this.state;
+    const { id, noPastDates, resettable, intl, reactDates } = this.props;
+    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">
           <div
             className={cx('ui input date-input', {
-              'default-date': isDefault,
+              'default-date': this.state.isDefault,
             })}
           >
             <SingleDatePicker
               date={datetime}
               disabled={this.props.isDisabled}
               onDateChange={this.onDateChange}
-              focused={focused}
+              focused={this.state.focused}
               numberOfMonths={1}
               {...(noPastDates ? {} : { isOutsideRange: () => false })}
               onFocusChange={this.onFocusChange}
@@ -213,10 +201,10 @@ class DatetimeWidget extends Component {
               placeholder={intl.formatMessage(messages.date)}
             />
           </div>
-          {!this.state.dateOnly && (
+          {!dateOnly && (
             <div
               className={cx('ui input time-input', {
-                'default-date': isDefault,
+                'default-date': this.state.isDefault,
               })}
             >
               <TimePicker
@@ -255,7 +243,7 @@ class DatetimeWidget extends Component {
  * @property {Object} propTypes Property types.
  * @static
  */
-DatetimeWidget.propTypes = {
+DatetimeWidgetComponent.propTypes = {
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string,
@@ -274,7 +262,7 @@ DatetimeWidget.propTypes = {
  * @property {Object} defaultProps Default properties.
  * @static
  */
-DatetimeWidget.defaultProps = {
+DatetimeWidgetComponent.defaultProps = {
   description: null,
   required: false,
   error: [],
@@ -284,4 +272,7 @@ DatetimeWidget.defaultProps = {
   resettable: true,
 };
 
-export default injectIntl(DatetimeWidget);
+export default compose(
+  injectLazyLibs(['reactDates', 'moment']),
+  injectIntl,
+)(DatetimeWidgetComponent);

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

@@ -1,32 +1,16 @@
 import React from 'react';
+import { DatetimeWidgetComponent } from './DatetimeWidget';
 import DatetimeWidget from './DatetimeWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const DatetimeWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState(false);
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <DatetimeWidget
-          {...args}
-          id="field"
-          title="Datetime"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Datetime = DatetimeWidgetComponent.bind({});
+export const Datetime = WidgetStory.bind({
+  props: { id: 'datetime', title: 'Datetime', block: 'block' },
+  widget: DatetimeWidget,
+});
 
 export default {
   title: 'Widgets/Datetime',
-  component: DatetimeWidget,
+  component: DatetimeWidgetComponent,
   decorators: [
     (Story) => (
       <div className="ui segment form attached" style={{ width: '400px' }}>

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

@@ -1,21 +1,26 @@
 import moment from 'moment';
-import TimePicker from 'rc-time-picker';
 import React from 'react';
 import { Provider } from 'react-intl-redux';
-import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import DatetimeWidget from './DatetimeWidget';
+import { waitFor, render, screen } from '@testing-library/react';
 
 const mockStore = configureStore();
 
-test('renders a datetime widget component', () => {
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+test('renders a datetime widget component', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <DatetimeWidget
         id="my-field"
@@ -26,31 +31,28 @@ test('renders a datetime widget component', () => {
       />
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+  await waitFor(() => screen.getByText(/My field/));
+  expect(container).toMatchSnapshot();
 });
 
-test('datetime widget converts UTC date and adapt to local datetime', () => {
+test('datetime widget converts UTC date and adapt to local datetime', async () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const component = renderer.create(
+  const date = '2020-02-10T15:01:00.000Z';
+  const { container } = render(
     <Provider store={store}>
       <DatetimeWidget
         id="my-field"
         title="My field"
         onChange={() => {}}
-        value={'2020-02-10T15:01:00.000Z'}
+        value={date}
       />
     </Provider>,
   );
-  const componentInstance = component.root;
-  const componentTimeInput = componentInstance.findByType(TimePicker);
-
-  expect(componentTimeInput.props.defaultValue.toISOString()).toBe(
-    moment('2020-02-10T15:01:00').utc().toISOString(),
-  );
+  await waitFor(() => screen.getByText(/My field/));
+  expect(container).toMatchSnapshot();
 });

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

@@ -1,28 +1,11 @@
 import React from 'react';
 import EmailWidget from './EmailWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const EmailWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <EmailWidget
-          {...args}
-          id="field"
-          title="Email"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Email = EmailWidgetComponent.bind({});
+export const Email = WidgetStory.bind({
+  props: { id: 'email', title: 'Email', block: 'block' },
+  widget: EmailWidget,
+});
 
 export default {
   title: 'Widgets/Email',

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

@@ -1,28 +1,11 @@
 import React from 'react';
 import FileWidget from './FileWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const FileWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <FileWidget
-          {...args}
-          id="field"
-          title="File"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const File = FileWidgetComponent.bind({});
+export const File = WidgetStory.bind({
+  props: { id: 'file', title: 'File', block: 'block' },
+  widget: FileWidget,
+});
 
 export default {
   title: 'Widgets/File',

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

@@ -1,29 +1,11 @@
 import React from 'react';
 import NumberWidget from './NumberWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const NumberWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <NumberWidget
-          {...args}
-          id="field"
-          title="Number"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-          default={10}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Number = NumberWidgetComponent.bind({});
+export const Number = WidgetStory.bind({
+  props: { id: 'number', title: 'Number', block: 'block' },
+  widget: NumberWidget,
+});
 
 export default {
   title: 'Widgets/Number',

package/src/components/manage/Widgets/ObjectBrowserWidget.stories.js

@@ -1,9 +1,8 @@
 import ObjectBrowserWidgetDefault, {
   ObjectBrowserWidgetComponent as OBC,
 } from './ObjectBrowserWidget';
-import Wrapper from '@plone/volto/storybook';
+import Wrapper, { FormUndoWrapper } from '@plone/volto/storybook';
 import React from 'react';
-import { injectIntl } from 'react-intl';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 
 export const searchResults = {
@@ -157,43 +156,40 @@ const customStore = {
   },
 };
 
-const ObjectBrowserWidgetComponent = (args) => {
-  const IntlWrappedComponent = injectIntl(OBC);
-  return (
-    <Wrapper>
-      <IntlWrappedComponent {...args} search={searchResults} />
-    </Wrapper>
-  );
-};
-
 const ObjectBrowserWidget = (args) => {
-  const [value, setValue] = React.useState([]);
-  const onChange = (block, value) => setValue(value);
-
   return (
     <Wrapper
       location={{ pathname: '/folder2/folder21/doc212' }}
       customStore={customStore}
     >
-      <ObjectBrowserWidgetDefault
-        {...args}
-        id="objectBrowser"
-        title="Object Browser"
-        block="testBlock"
-        value={value}
-        onChange={onChange}
-      />
-      {value?.length > 0 && (
-        <div style={{ marginTop: '40px' }}>
-          <UniversalLink item={value[0]}>{value[0]['@id']}</UniversalLink>
-        </div>
-      )}
+      <FormUndoWrapper initialState={{ value: undefined }} showControls={true}>
+        {({ state, onChange }) => (
+          <>
+            <ObjectBrowserWidgetDefault
+              {...args}
+              id="objectBrowser"
+              title="Object Browser"
+              block="testBlock"
+              value={state.value}
+              onChange={(block, value) => onChange({ value })}
+            />
+            <pre>
+              Value:
+              {state.value?.length > 0 && (
+                <UniversalLink item={state.value[0]}>
+                  {state.value[0]['@id']}
+                </UniversalLink>
+              )}
+            </pre>
+          </>
+        )}
+      </FormUndoWrapper>
     </Wrapper>
   );
 };
 
 export default {
-  title: 'Internal Components/Object Browser',
+  title: 'Widgets/Object Browser',
   component: OBC,
   decorators: [
     (Story) => (
@@ -206,9 +202,5 @@ export default {
   // subcomponents: { ArgsTable },
 };
 
-export const Renderer = () => (
-  <ObjectBrowserWidgetComponent search={searchResults} />
-);
-
 export const Connected = () => <ObjectBrowserWidget />;
 export const SingleElement = () => <ObjectBrowserWidget mode="link" />;

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

@@ -1,5 +1,5 @@
 import ObjectListWidgetDefault from './ObjectListWidget';
-import Wrapper from '@plone/volto/storybook';
+import Wrapper, { FormUndoWrapper } from '@plone/volto/storybook';
 import React from 'react';
 import { searchResults } from './ObjectBrowserWidget.stories';
 
@@ -108,55 +108,55 @@ const ObjectListWidgetComponent = ({
   enableSchemaExtender,
   ...args
 }) => {
-  const [value, setValue] = React.useState([]);
-  const onChange = (block, value) => setValue(value);
-
   return (
     <Wrapper
       location={{ pathname: '/folder2/folder21/doc212' }}
       customStore={customStore}
     >
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        {children}
-        <ObjectListWidgetDefault
-          {...args}
-          id="SliderItem"
-          title="Slider Item"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-          schemaExtender={
-            enableSchemaExtender &&
-            ((schema, data, intl) => {
-              const finalSchema =
-                data?.href?.[0]?.['@id'] === '/image'
-                  ? {
-                      ...schema,
-                      fieldsets: [
-                        {
-                          ...schema.fieldsets[0],
-                          fields: [
-                            ...schema.fieldsets[0].fields,
-                            ...secondarySchema.fieldsets[0].fields,
+      <FormUndoWrapper initialState={{ value: undefined }} showControls={true}>
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            {children}
+            <ObjectListWidgetDefault
+              {...args}
+              id="SliderItem"
+              title="Slider Item"
+              block="testBlock"
+              value={state.value}
+              onChange={(block, value) => onChange({ value })}
+              schemaExtender={
+                enableSchemaExtender &&
+                ((schema, data, intl) => {
+                  const finalSchema =
+                    data?.href?.[0]?.['@id'] === '/image'
+                      ? {
+                          ...schema,
+                          fieldsets: [
+                            {
+                              ...schema.fieldsets[0],
+                              fields: [
+                                ...schema.fieldsets[0].fields,
+                                ...secondarySchema.fieldsets[0].fields,
+                              ],
+                            },
+                            ...schema.fieldsets.slice(1),
+                            ...secondarySchema.fieldsets.slice(1),
                           ],
-                        },
-                        ...schema.fieldsets.slice(1),
-                        ...secondarySchema.fieldsets.slice(1),
-                      ],
-                      properties: {
-                        ...schema.properties,
-                        ...secondarySchema.properties,
-                      },
-                    }
-                  : schema;
-              return finalSchema;
-            })
-          }
-        />
-        <hr />
-        <strong>Resulting value</strong>
-        <pre>{JSON.stringify(value, null, 4)}</pre>
-      </div>
+                          properties: {
+                            ...schema.properties,
+                            ...secondarySchema.properties,
+                          },
+                        }
+                      : schema;
+                  return finalSchema;
+                })
+              }
+            />
+            <hr />
+            <pre>Value: {JSON.stringify(state.value, null, 4)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
     </Wrapper>
   );
 };