@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

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

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
-import { parseDateTime } from '@plone/volto/helpers';
+import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import leftKey from '@plone/volto/icons/left-key.svg';
@@ -101,7 +101,7 @@ export class DatetimeWidgetComponent extends Component {
       // if passed value matches the construction time, we guess it's a default
       isDefault:
         parseDateTime(
-          this.props.lang,
+          toBackendLang(this.props.lang),
           this.props.value,
           undefined,
           this.moment,
@@ -111,7 +111,7 @@ export class DatetimeWidgetComponent extends Component {
 
   getInternalValue() {
     return parseDateTime(
-      this.props.lang,
+      toBackendLang(this.props.lang),
       this.props.value,
       undefined,
       this.moment,
@@ -211,7 +211,9 @@ export class DatetimeWidgetComponent extends Component {
               {...(noPastDates ? {} : { isOutsideRange: () => false })}
               onFocusChange={this.onFocusChange}
               noBorder
-              displayFormat={moment.localeData(lang).longDateFormat('L')}
+              displayFormat={moment
+                .localeData(toBackendLang(lang))
+                .longDateFormat('L')}
               navPrev={<PrevIcon />}
               navNext={<NextIcon />}
               id={`${id}-date`}
@@ -233,7 +235,9 @@ export class DatetimeWidgetComponent extends Component {
                 showSecond={false}
                 use12Hours={lang === 'en'}
                 id={`${id}-time`}
-                format={moment.localeData(lang).longDateFormat('LT')}
+                format={moment
+                  .localeData(toBackendLang(lang))
+                  .longDateFormat('LT')}
                 placeholder={intl.formatMessage(messages.time)}
                 focusOnOpen
                 placement="bottomRight"

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

@@ -11,7 +11,7 @@ import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
 import loadable from '@loadable/component';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
 
 const imageMimetypes = [
@@ -95,6 +95,7 @@ const FileWidget = (props) => {
    */
   const onDrop = (files) => {
     const file = files[0];
+    if (!validateFileUploadSize(file, intl.formatMessage)) return;
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
       onChange(id, {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
 import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
-import { applySchemaDefaults } from '@plone/volto/helpers';
+import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
@@ -164,13 +164,8 @@ const ObjectListWidget = (props) => {
           if (!destination) {
             return;
           }
-
-          const first = value[source.index];
-          const second = value[destination.index];
-          value[destination.index] = first;
-          value[source.index] = second;
-
-          onChange(id, value);
+          const newValue = reorderArray(value, source.index, destination.index);
+          onChange(id, newValue);
           return true;
         }}
       >

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

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
 import { Days } from './Utils';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -18,7 +19,7 @@ import { useSelector } from 'react-redux';
 const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const toggleWeekDay = (dayName) => {
     var day = Days[dayName];

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

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -25,7 +26,7 @@ const MonthOfTheYearField = ({
 }) => {
   const moment = momentlib.default;
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   const monthList = [
     ...map(moment.months(), (m, i) => ({
       value: i + 1,

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

@@ -11,6 +11,7 @@ import { List, Button, Header, Label } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { useSelector } from 'react-redux';
@@ -68,7 +69,7 @@ const Occurences_ = ({
 }) => {
   const moment = momentlib.default;
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   let all = [];
   const isExcluded = (date) => {
     var dateISO = toISOString(date);

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

@@ -23,6 +23,7 @@ import {
 } from 'semantic-ui-react';
 
 import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -183,7 +184,7 @@ class RecurrenceWidget extends Component {
     const { RRuleSet, rrulestr } = props.rrule;
 
     this.moment = this.props.moment.default;
-    this.moment.locale(this.props.lang);
+    this.moment.locale(toBackendLang(this.props.lang));
 
     let rruleSet = this.props.value
       ? rrulestr(props.value, {
@@ -201,7 +202,11 @@ class RecurrenceWidget extends Component {
       open: false,
       rruleSet: rruleSet,
       formValues: this.getFormValues(rruleSet),
-      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment, this.props.lang),
+      RRULE_LANGUAGE: rrulei18n(
+        this.props.intl,
+        this.moment,
+        toBackendLang(this.props.lang),
+      ),
     };
   }
 
@@ -422,7 +427,7 @@ class RecurrenceWidget extends Component {
           break;
       }
 
-      if (value) {
+      if (value === 0 || value) {
         //set value
         values[field] = value;
       } else {

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

@@ -8,6 +8,7 @@ import { map } from 'lodash';
 import { Days } from './Utils';
 import SelectInput from './SelectInput';
 import { Form } from 'semantic-ui-react';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -22,7 +23,7 @@ const WeekdayOfTheMonthField = (props) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const weekdayOfTheMonthList = [
     ...map(Object.keys(Days), (d) => ({

package/src/components/manage/Widgets/SelectUtils.js

@@ -54,7 +54,7 @@ export function normalizeSingleSelectOption(value, intl) {
     throw new Error(`Unknown value type of select widget: ${value}`);
   }
 
-  const token = value.token ?? value.value ?? 'no-value';
+  const token = value.token ?? value.value ?? value.UID ?? 'no-value';
   const label =
     (value.title && value.title !== 'None' ? value.title : undefined) ??
     value.label ??

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

@@ -202,7 +202,7 @@ class SelectWidget extends Component {
 
     const isMulti = this.props.isMulti
       ? this.props.isMulti
-      : id === 'roles' || id === 'groups';
+      : id === 'roles' || id === 'groups' || this.props.type === 'array';
 
     return (
       <FormFieldWrapper {...this.props}>

package/src/components/theme/Anontools/Anontools.jsx

@@ -1,83 +1,55 @@
-/**
- * Anontools component.
- * @module components/theme/Anontools/Anontools
- */
-
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Menu } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
+import { useSelector, shallowEqual } from 'react-redux';
 
-/**
- * Anontools container class.
- */
-export class Anontools extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    content: PropTypes.shape({
-      '@id': PropTypes.string,
-    }),
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-    content: {
-      '@id': null,
-    },
-  };
+const Anontools = () => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const content = useSelector((state) => state.content.data, shallowEqual);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { settings } = config;
-    return (
-      !this.props.token && (
-        <Menu pointing secondary floated="right">
+  const { settings } = config;
+  return (
+    !token && (
+      <Menu pointing secondary floated="right">
+        <Menu.Item>
+          <Link
+            aria-label="login"
+            to={`/login${
+              content?.['@id']
+                ? `?return_url=${flattenToAppURL(content['@id'])}`
+                : ''
+            }`}
+          >
+            <FormattedMessage id="Log in" defaultMessage="Log in" />
+          </Link>
+        </Menu.Item>
+        {settings.showSelfRegistration && (
           <Menu.Item>
-            <Link
-              aria-label="login"
-              to={`/login${
-                this.props.content?.['@id']
-                  ? `?return_url=${this.props.content['@id'].replace(
-                      settings.apiPath,
-                      '',
-                    )}`
-                  : ''
-              }`}
-            >
-              <FormattedMessage id="Log in" defaultMessage="Log in" />
+            <Link aria-label="register" to="/register">
+              <FormattedMessage id="Register" defaultMessage="Register" />
             </Link>
           </Menu.Item>
-          {settings.showSelfRegistration && (
-            <Menu.Item>
-              <Link aria-label="register" to="/register">
-                <FormattedMessage id="Register" defaultMessage="Register" />
-              </Link>
-            </Menu.Item>
-          )}
-        </Menu>
-      )
-    );
-  }
-}
+        )}
+      </Menu>
+    )
+  );
+};
+
+export default Anontools;
+
+Anontools.propTypes = {
+  token: PropTypes.string,
+  content: PropTypes.shape({
+    '@id': PropTypes.string,
+  }),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-  content: state.content.data,
-}))(Anontools);
+Anontools.defaultProps = {
+  token: null,
+  content: {
+    '@id': null,
+  },
+};

package/src/components/theme/Anontools/Anontools.stories.jsx

@@ -1,15 +1,25 @@
 import React from 'react';
-import { Anontools as AnontoolsDefault } from './Anontools';
+import AnontoolsDefault from './Anontools';
 import Wrapper from '@plone/volto/storybook';
 
 const AnontoolsComponent = ({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        content: {
+          data: { '@id': 'http://myreturnURL' },
+          get: {
+            loaded: false,
+            loading: false,
+            error: null,
+          },
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <AnontoolsDefault
-          userSession={{ token: null }}
-          content={{ '@id': 'myid' }}
-        />
+        <AnontoolsDefault />
       </div>
     </Wrapper>
   );

package/src/components/theme/Anontools/Anontools.test.jsx

@@ -12,7 +12,14 @@ describe('Anontools', () => {
   it('renders an anontools component when no token is specified', () => {
     const store = mockStore({
       userSession: { token: null },
-      content: { data: { '@id': 'myid' } },
+      content: {
+        data: { '@id': 'myid' },
+        get: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -32,7 +39,14 @@ describe('Anontools', () => {
   it('should not render an anontools component when a token is specified', () => {
     const store = mockStore({
       userSession: { token: '1234' },
-      content: { data: {} },
+      content: {
+        data: {},
+        get: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,20 +1,13 @@
-/**
- * Breadcrumbs components.
- * @module components/theme/Breadcrumbs/Breadcrumbs
- */
-
-import React, { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 
-import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';
 import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-
+import { Icon } from '@plone/volto/components';
 import homeSVG from '@plone/volto/icons/home.svg';
 
 const messages = defineMessages({
@@ -28,96 +21,56 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Breadcrumbs container class.
- */
-export class BreadcrumbsComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
+const BreadcrumbsComponent = ({ pathname }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
 
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
+  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const root = useSelector((state) => state.breadcrumbs.root);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
+  useEffect(() => {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      dispatch(getBreadcrumbs(getBaseUrl(pathname)));
     }
-  }
+  }, [dispatch, pathname]);
+
+  return (
+    <Segment
+      role="navigation"
+      aria-label={intl.formatMessage(messages.breadcrumbs)}
+      className="breadcrumbs"
+      secondary
+      vertical
+    >
+      <Container>
+        <Breadcrumb>
+          <Link
+            to={root || '/'}
+            className="section"
+            title={intl.formatMessage(messages.home)}
+          >
+            <Icon name={homeSVG} size="18px" />
+          </Link>
+          {items.map((item, index, items) => [
+            <Breadcrumb.Divider key={`divider-${item.url}`} />,
+            index < items.length - 1 ? (
+              <Link key={item.url} to={item.url} className="section">
+                {item.title}
+              </Link>
+            ) : (
+              <Breadcrumb.Section key={item.url} active>
+                {item.title}
+              </Breadcrumb.Section>
+            ),
+          ])}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-        secondary
-        vertical
-      >
-        <Container>
-          <Breadcrumb>
-            <Link
-              to={this.props.root || '/'}
-              className="section"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="18px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider key={`divider-${item.url}`} />,
-              index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
-                  {item.title}
-                </Link>
-              ) : (
-                <Breadcrumb.Section key={item.url} active>
-                  {item.title}
-                </Breadcrumb.Section>
-              ),
-            ])}
-          </Breadcrumb>
-        </Container>
-      </Segment>
-    );
-  }
-}
+BreadcrumbsComponent.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(BreadcrumbsComponent);
+export default BreadcrumbsComponent;

package/src/components/theme/Breadcrumbs/Breadcrumbs.stories.jsx

@@ -1,23 +1,24 @@
 import { injectIntl } from 'react-intl';
 import React from 'react';
-import { BreadcrumbsComponent } from './Breadcrumbs';
+import BreadcrumbsComponent from './Breadcrumbs';
 import Wrapper from '@plone/volto/storybook';
 
 export const Breadcrumb = injectIntl(({ children, ...args }) => {
   return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+    <Wrapper
+      anonymous
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={{
+        breadcrumbs: {
+          items: [
+            { title: 'Blog', url: '/blog' },
+            { title: 'My first blog', url: '/blog/my-first-blog' },
+          ],
+        },
+      }}
+    >
       <div className="ui segment form attached" style={{ width: '400px' }}>
-        <BreadcrumbsComponent
-          pathname=""
-          items={[
-            {
-              '@id': 'https://volto.kitconcept.com/api/Members',
-              title: 'Users',
-            },
-          ]}
-          getBreadcrumbs={() => {}}
-          {...args}
-        />
+        <BreadcrumbsComponent pathname="" />
       </div>
     </Wrapper>
   );