@plone/volto 14.3.0 → 14.7.0

package/src/components/manage/Contents/ContentsItem.jsx

@@ -8,10 +8,8 @@ import { Button, Dropdown, Table } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
-import { DragSource, DropTarget } from 'react-dnd';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Icon, Circle } from '@plone/volto/components';
+import { Circle, FormattedDate, Icon } from '@plone/volto/components';
 import { getContentIcon } from '@plone/volto/helpers';
 import moreSVG from '@plone/volto/icons/more.svg';
 import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg';
@@ -26,6 +24,8 @@ import editingSVG from '@plone/volto/icons/editing.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import cx from 'classnames';
 
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
 const messages = defineMessages({
   private: {
     id: 'private',
@@ -47,6 +47,10 @@ const messages = defineMessages({
     id: 'no workflow state',
     defaultMessage: 'No workflow state',
   },
+  none: {
+    id: 'None',
+    defaultMessage: 'None',
+  },
 });
 
 function getColor(string) {
@@ -186,21 +190,13 @@ export const ContentsItemComponent = ({
               </div>
             )}
             {index.type === 'date' && (
-              <span
-                title={
-                  item[index.id] !== 'None' ? (
-                    moment(item[index.id]).format('LLLL')
-                  ) : (
-                    <FormattedMessage id="None" defaultMessage="None" />
-                  )
-                }
-              >
+              <>
                 {item[index.id] !== 'None' ? (
-                  moment(item[index.id]).format('L')
+                  <FormattedDate date={item[index.id]} />
                 ) : (
-                  <FormattedMessage id="None" defaultMessage="None" />
+                  intl.formatMessage(messages.none)
                 )}
-              </span>
+              </>
             )}
             {index.type === 'array' && (
               <span>{item[index.id]?.join(', ')}</span>
@@ -313,55 +309,67 @@ ContentsItemComponent.propTypes = {
   onOrderItem: PropTypes.func.isRequired,
 };
 
-export default DropTarget(
-  'item',
-  {
-    hover(props, monitor) {
-      const id = monitor.getItem().id;
-      const dragOrder = monitor.getItem().order;
-      const hoverOrder = props.order;
+const DragDropConnector = (props) => {
+  const { DropTarget, DragSource } = props.reactDnd;
 
-      if (dragOrder === hoverOrder) {
-        return;
-      }
+  const DndConnectedContentsItem = React.useMemo(
+    () =>
+      DropTarget(
+        'item',
+        {
+          hover(props, monitor) {
+            const id = monitor.getItem().id;
+            const dragOrder = monitor.getItem().order;
+            const hoverOrder = props.order;
 
-      props.onOrderItem(id, dragOrder, hoverOrder - dragOrder, false);
+            if (dragOrder === hoverOrder) {
+              return;
+            }
 
-      monitor.getItem().order = hoverOrder;
-    },
-    drop(props, monitor) {
-      const id = monitor.getItem().id;
-      const dragOrder = monitor.getItem().startOrder;
-      const dropOrder = props.order;
+            props.onOrderItem(id, dragOrder, hoverOrder - dragOrder, false);
 
-      if (dragOrder === dropOrder) {
-        return;
-      }
+            monitor.getItem().order = hoverOrder;
+          },
+          drop(props, monitor) {
+            const id = monitor.getItem().id;
+            const dragOrder = monitor.getItem().startOrder;
+            const dropOrder = props.order;
 
-      props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
+            if (dragOrder === dropOrder) {
+              return;
+            }
 
-      monitor.getItem().order = dropOrder;
-    },
-  },
-  (connect) => ({
-    connectDropTarget: connect.dropTarget(),
-  }),
-)(
-  DragSource(
-    'item',
-    {
-      beginDrag(props) {
-        return {
-          id: props.item['@id'],
-          order: props.order,
-          startOrder: props.order,
-        };
-      },
-    },
-    (connect, monitor) => ({
-      connectDragSource: connect.dragSource(),
-      connectDragPreview: connect.dragPreview(),
-      isDragging: monitor.isDragging(),
-    }),
-  )(ContentsItemComponent),
-);
+            props.onOrderItem(id, dragOrder, dropOrder - dragOrder, true);
+
+            monitor.getItem().order = dropOrder;
+          },
+        },
+        (connect) => ({
+          connectDropTarget: connect.dropTarget(),
+        }),
+      )(
+        DragSource(
+          'item',
+          {
+            beginDrag(props) {
+              return {
+                id: props.item['@id'],
+                order: props.order,
+                startOrder: props.order,
+              };
+            },
+          },
+          (connect, monitor) => ({
+            connectDragSource: connect.dragSource(),
+            connectDragPreview: connect.dragPreview(),
+            isDragging: monitor.isDragging(),
+          }),
+        )(ContentsItemComponent),
+      ),
+    [DragSource, DropTarget],
+  );
+
+  return <DndConnectedContentsItem {...props} />;
+};
+
+export default injectLazyLibs('reactDnd')(DragDropConnector);

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -20,10 +20,10 @@ import {
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
-import moment from 'moment';
 import filesize from 'filesize';
 import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedRelativeDate } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
 
 const Dropzone = loadable(() => import('react-dropzone'));
@@ -180,8 +180,6 @@ class ContentsUploadModal extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    moment.locale(this.props.intl.locale);
-
     return (
       this.props.open && (
         <Modal open={this.props.open}>
@@ -269,7 +267,7 @@ class ContentsUploadModal extends Component {
                     <Table.Row className="upload-row" key={file.name}>
                       <Table.Cell>{file.name}</Table.Cell>
                       <Table.Cell>
-                        {moment(file.lastModifiedDate).fromNow()}
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
                       </Table.Cell>
                       <Table.Cell>
                         {filesize(file.size, { round: 0 })}

package/src/components/manage/Controlpanels/ModerateComments.jsx

@@ -11,11 +11,15 @@ import { Link } from 'react-router-dom';
 import { getParentUrl, Helmet } from '@plone/volto/helpers';
 import { Portal } from 'react-portal';
 import { Container, Button, Table } from 'semantic-ui-react';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import { CommentEditModal, Icon, Toolbar } from '@plone/volto/components';
+import {
+  CommentEditModal,
+  FormattedRelativeDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -230,9 +234,7 @@ class ModerateComments extends Component {
                     <Table.Row key={item['@id']}>
                       <Table.Cell>{item.author_name}</Table.Cell>
                       <Table.Cell>
-                        <span title={moment(item.creation_date).format('LLLL')}>
-                          {moment(item.creation_date).fromNow()}
-                        </span>
+                        <FormattedRelativeDate date={item.creation_date} />
                       </Table.Cell>
                       <Table.Cell>{item.text.data}</Table.Cell>
                       <Table.Cell>

package/src/components/manage/Diff/Diff.jsx

@@ -12,7 +12,6 @@ import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -23,7 +22,12 @@ import {
   getBlocksLayoutFieldname,
   hasBlocksData,
 } from '@plone/volto/helpers';
-import { DiffField, Icon, Toolbar } from '@plone/volto/components';
+import {
+  DiffField,
+  FormattedDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -189,9 +193,13 @@ class Diff extends Component {
     const versions = map(
       filter(this.props.historyEntries, (entry) => 'version' in entry),
       (entry, index) => ({
-        text: `${index === 0 ? 'Current' : entry.version} (${moment(
-          entry.time,
-        ).format('LLLL')}, ${entry.actor.fullname})`,
+        text: (
+          <>
+            {index === 0 ? 'Current' : entry.version}&nbsp;(
+            <FormattedDate date={entry.time} long className="text" />, &nbsp;
+            {entry.actor.fullname})
+          </>
+        ),
         value: `${entry.version}`,
         key: `${entry.version}`,
       }),

package/src/components/manage/Diff/Diff.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -12,11 +11,6 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(

package/src/components/manage/Diff/DiffField.jsx

@@ -8,11 +8,11 @@ import React from 'react';
 import { join, map } from 'lodash';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import moment from 'moment';
 import ReactDOMServer from 'react-dom/server';
 import { Provider } from 'react-intl-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
+import { useSelector } from 'react-redux';
 
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
@@ -44,6 +44,11 @@ const DiffField = ({
   schema,
   diffLib,
 }) => {
+  const language = useSelector((state) => state.intl.locale);
+  const readable_date_format = {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  };
   const diffWords = (oneStr, twoStr) => {
     return diffLib.diffWords(String(oneStr), String(twoStr));
   };
@@ -56,8 +61,12 @@ const DiffField = ({
         break;
       case 'datetime':
         parts = diffWords(
-          moment(one).format('LLLL'),
-          moment(two).format('LLLL'),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(one),
+          ),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(two),
+          ),
         );
         break;
       case 'json':

package/src/components/manage/Diff/DiffField.test.jsx

@@ -5,12 +5,6 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 import DiffField from './DiffField';
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
-
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

package/src/components/manage/DragDropList/DragDropList.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { isEmpty } from 'lodash';
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { v4 as uuid } from 'uuid';
 
 const getPlaceholder = (draggedDOM, sourceIndex, destinationIndex) => {
@@ -55,7 +55,9 @@ const DragDropList = (props) => {
     as = 'div',
     style,
     forwardedAriaLabelledBy,
+    reactBeautifulDnd,
   } = props; //renderChild
+  const { DragDropContext, Draggable, Droppable } = reactBeautifulDnd;
   const [placeholderProps, setPlaceholderProps] = React.useState({});
   const [uid] = React.useState(uuid());
   // queueing timed action
@@ -157,4 +159,4 @@ const DragDropList = (props) => {
   );
 };
 
-export default DragDropList;
+export default injectLazyLibs(['reactBeautifulDnd'])(DragDropList);

package/src/components/manage/Form/Field.jsx

@@ -5,9 +5,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DragSource, DropTarget } from 'react-dnd';
 import { injectIntl } from 'react-intl';
 import config from '@plone/volto/registry';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const MODE_HIDDEN = 'hidden'; //hidden mode. If mode is hidden, field is not rendered
 /**
@@ -150,7 +150,7 @@ const getWidgetByType = (type) => config.widgets.type[type] || null;
  * @param {Object} props Properties.
  * @returns {string} Markup of the component.
  */
-const Field = (props, { intl }) => {
+const UnconnectedField = (props, { intl }) => {
   const Widget =
     getWidgetByFieldId(props.id) ||
     getWidgetFromTaggedValues(props.widgetOptions) ||
@@ -173,6 +173,7 @@ const Field = (props, { intl }) => {
   };
 
   if (props.onOrder) {
+    const { DropTarget, DragSource } = props.reactDnd;
     const WrappedWidget = DropTarget(
       'field',
       {
@@ -230,6 +231,15 @@ const Field = (props, { intl }) => {
   return <Widget {...widgetProps} />;
 };
 
+const DndConnectedField = injectLazyLibs(['reactDnd'])(UnconnectedField);
+
+const Field = (props) =>
+  props.onOrder ? (
+    <DndConnectedField {...props} />
+  ) : (
+    <UnconnectedField {...props} />
+  );
+
 /**
  * Property types.
  * @property {Object} propTypes Property types.

package/src/components/manage/History/History.jsx

@@ -12,10 +12,13 @@ import { compose } from 'redux';
 import { Container, Dropdown, Icon, Segment, Table } from 'semantic-ui-react';
 import { concat, map, reverse } from 'lodash';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon as IconNext, Toolbar } from '@plone/volto/components';
+import {
+  FormattedRelativeDate,
+  Icon as IconNext,
+  Toolbar,
+} from '@plone/volto/components';
 import { getHistory, revertHistory } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 
@@ -206,9 +209,7 @@ class History extends Component {
                   </Table.Cell>
                   <Table.Cell>{entry.actor.fullname}</Table.Cell>
                   <Table.Cell>
-                    <span title={moment(entry.time).format('LLLL')}>
-                      {moment(entry.time).fromNow()}
-                    </span>
+                    <FormattedRelativeDate date={entry.time} />
                   </Table.Cell>
                   <Table.Cell>{entry.comments}</Table.Cell>
                   <Table.Cell>

package/src/components/manage/History/History.test.jsx

@@ -3,21 +3,26 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
+import FakeTimers from '@sinonjs/fake-timers';
+
 import History from './History';
 
 const mockStore = configureStore();
-
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
-  })),
-);
+
+const FIXED_SYSTEM_TIME = '2017-04-23T15:38:00.000Z';
 
 describe('History', () => {
+  let clock;
+  beforeEach(() => {
+    clock = FakeTimers.install({ now: Date.parse(FIXED_SYSTEM_TIME) });
+  });
+  afterEach(() => {
+    clock.uninstall();
+  });
+
   it('renders a history component', () => {
     const store = mockStore({
       history: {

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

@@ -93,7 +93,7 @@ export class DatetimeWidgetComponent extends Component {
    */
   constructor(props) {
     super(props);
-    const moment = props.moment.default;
+    this.moment = props.moment.default;
 
     this.state = {
       focused: false,
@@ -102,12 +102,19 @@ export class DatetimeWidgetComponent extends Component {
         parseDateTime(
           this.props.intl.locale,
           this.props.value,
-        )?.toISOString() === moment().utc().toISOString(),
+          undefined,
+          this.moment,
+        )?.toISOString() === this.moment().utc().toISOString(),
     };
   }
 
   getInternalValue() {
-    return parseDateTime(this.props.intl.locale, this.props.value);
+    return parseDateTime(
+      this.props.intl.locale,
+      this.props.value,
+      undefined,
+      this.moment,
+    );
   }
 
   getDateOnly() {

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

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
@@ -20,6 +19,7 @@ test('renders a datetime widget component', async () => {
       messages: {},
     },
   });
+  const isoDate = new Date('2019-10-21').toISOString();
   const { container } = render(
     <Provider store={store}>
       <DatetimeWidget
@@ -27,7 +27,7 @@ test('renders a datetime widget component', async () => {
         title="My field"
         fieldSet="default"
         onChange={() => {}}
-        value={moment('2019-10-21').toISOString()}
+        value={isoDate}
       />
     </Provider>,
   );

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

@@ -18,6 +18,10 @@ const messages = defineMessages({
     id: 'Delete',
     defaultMessage: 'Delete',
   },
+  language_independent: {
+    id: 'Language independent field.',
+    defaultMessage: 'Language independent field.',
+  },
 });
 /**
  * FormFieldWrapper component class.
@@ -85,6 +89,7 @@ class FormFieldWrapper extends Component {
       onDelete,
       intl,
       noForInFieldLabel,
+      multilingual_options,
     } = this.props;
     const wdg = (
       <>
@@ -107,6 +112,9 @@ class FormFieldWrapper extends Component {
           description ? 'help' : '',
           className,
           `field-wrapper-${id}`,
+          multilingual_options?.language_independent
+            ? 'language-independent-field'
+            : null,
         )}
       >
         <Grid>
@@ -160,7 +168,12 @@ class FormFieldWrapper extends Component {
           {description && (
             <Grid.Row stretched>
               <Grid.Column stretched width="12">
-                <p className="help">{description}</p>
+                <p className="help">
+                  {this.props.multilingual_options
+                    ? `${intl.formatMessage(messages.language_independent)} `
+                    : null}
+                  {description}
+                </p>
               </Grid.Column>
             </Grid.Row>
           )}

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

@@ -1,5 +1,5 @@
 import ObjectListWidgetDefault from './ObjectListWidget';
-import Wrapper, { FormUndoWrapper } from '@plone/volto/storybook';
+import { RealStoreWrapper, FormUndoWrapper } from '@plone/volto/storybook';
 import React from 'react';
 import { searchResults } from './ObjectBrowserWidget.stories';
 
@@ -109,7 +109,7 @@ const ObjectListWidgetComponent = ({
   ...args
 }) => {
   return (
-    <Wrapper
+    <RealStoreWrapper
       location={{ pathname: '/folder2/folder21/doc212' }}
       customStore={customStore}
     >
@@ -157,7 +157,7 @@ const ObjectListWidgetComponent = ({
           </div>
         )}
       </FormUndoWrapper>
-    </Wrapper>
+    </RealStoreWrapper>
   );
 };
 

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

@@ -5,6 +5,12 @@ import configureStore from 'redux-mock-store';
 import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 let mockSerial = 0;
 const mockStore = configureStore();
 

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

@@ -6,17 +6,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
-import moment from 'moment';
 import { Days } from './Utils';
 import { useIntl } from 'react-intl';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * ByDayField component class.
  * @function ByDayField
  * @returns {string} Markup of the component.
  */
-const ByDayField = ({ label, value, onChange }) => {
+const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
   const intl = useIntl();
+  const moment = momentlib.default;
   moment.locale(intl.locale);
 
   const toggleWeekDay = (dayName) => {
@@ -84,4 +85,4 @@ ByDayField.defaultProps = {
   onChange: null,
 };
 
-export default ByDayField;
+export default injectLazyLibs(['moment'])(ByDayField);

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

@@ -6,17 +6,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl } from 'react-intl';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * MonthOfTheYearField component class.
  * @function MonthOfTheYearField
  * @returns {string} Markup of the component.
  */
-const MonthOfTheYearField = ({ value, disabled, inline, onChange }) => {
+const MonthOfTheYearField = ({
+  value,
+  disabled,
+  inline,
+  onChange,
+  moment: momentlib,
+}) => {
+  const moment = momentlib.default;
   const intl = useIntl();
   moment.locale(intl.locale);
   const monthList = [
@@ -63,4 +70,4 @@ MonthOfTheYearField.defaultProps = {
   onChange: null,
 };
 
-export default MonthOfTheYearField;
+export default injectLazyLibs(['moment'])(MonthOfTheYearField);