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

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

@@ -3,15 +3,15 @@
  * @module components/manage/Widgets/IdWidget
  */
 
-import React, { Component } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Input } from 'semantic-ui-react';
 import { compact, concat, keys, map, union, uniq } from 'lodash';
 
-import { defineMessages, injectIntl } from 'react-intl';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import config from '@plone/volto/registry';
 import { getQuerystring } from '@plone/volto/actions';
 
@@ -21,223 +21,164 @@ const messages = defineMessages({
     defaultMessage: "This is a reserved name and can't be used",
   },
   invalidCharacters: {
-    id: 'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+    id: 'Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: <, >, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.',
     defaultMessage:
-      'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+      'Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: <, >, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.',
   },
 });
 
-/**
- * The id widget.
- *
- * This is the id widget to handle for example the short name field.
- */
-class IdWidget 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,
-    error: PropTypes.arrayOf(PropTypes.string),
-    value: PropTypes.string,
-    focus: PropTypes.bool,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-    onEdit: PropTypes.func,
-    onDelete: PropTypes.func,
-    icon: PropTypes.shape({
-      xmlns: PropTypes.string,
-      viewBox: PropTypes.string,
-      content: PropTypes.string,
-    }),
-    iconAction: PropTypes.func,
-    minLength: PropTypes.number,
-    maxLength: PropTypes.number,
-    wrapped: PropTypes.bool,
-    placeholder: PropTypes.string,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    error: [],
-    value: null,
-    onChange: () => {},
-    onBlur: () => {},
-    onClick: () => {},
-    onEdit: null,
-    onDelete: null,
-    focus: false,
-    icon: null,
-    iconAction: null,
-    minLength: null,
-    maxLength: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Actions
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: [],
-      reservedIds: compact(
-        uniq(
-          union(
-            config.settings.reservedIds,
-            map(config.settings.nonContentRoutes, (route) =>
-              String(route).replace(/[^a-z-]/g, ''),
-            ),
+const IdWidget = (props) => {
+  const {
+    id,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    onBlur,
+    value,
+    focus,
+    isDisabled,
+    placeholder,
+    onChange,
+  } = props;
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const ref = useRef();
+
+  const indexes = useSelector((state) => keys(state.querystring.indexes));
+
+  const [errors, setError] = useState([]);
+  const [reservedIds] = useState(
+    compact(
+      uniq(
+        union(
+          config.settings.reservedIds,
+          map(config.settings.nonContentRoutes, (route) =>
+            String(route).replace(/[^a-z-]/g, ''),
           ),
         ),
       ),
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.fieldValidation = this.fieldValidation.bind(this);
-  }
-
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.focus) {
-      this.node.focus();
-    }
-    this.props.getQuerystring();
-    this.fieldValidation(this.props.value);
-  }
-
-  /**
-   * Field validation.
-   * @method fieldValidation
-   * @param {string} value New value
-   * @returns {undefined}
-   */
-  fieldValidation(value) {
+    ),
+  );
+  const fieldValidation = (values) => {
     const error = [];
 
     // Check reserved id's
-    if (this.state.reservedIds.indexOf(value) !== -1) {
-      error.push(this.props.intl.formatMessage(messages.reservedId));
+    if (reservedIds.indexOf(values) !== -1) {
+      error.push(intl.formatMessage(messages.reservedId));
     }
 
     // Check invalid characters
-    if (!/^[.a-z0-9_-]*$/.test(value)) {
-      error.push(this.props.intl.formatMessage(messages.invalidCharacters));
+    if (
+      // eslint-disable-next-line no-control-regex
+      !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
+        values,
+      )
+    ) {
+      error.push(intl.formatMessage(messages.invalidCharacters));
     }
 
     // Check indexes
-    if (this.props.indexes.indexOf(value) !== -1) {
-      error.push(this.props.intl.formatMessage(messages.reservedId));
+    if (indexes.indexOf(values) !== -1) {
+      error.push(intl.formatMessage(messages.reservedId));
     }
 
-    this.setState({ error });
-  }
-
-  /**
-   * Handle the field change.
-   * @method handleChange
-   * @param {Object} event Event object
-   * @returns {undefined}
-   */
-  handleChange({ target }) {
-    this.fieldValidation(target.value);
-    this.props.onChange(
-      this.props.id,
-      target.value === '' ? undefined : target.value,
-    );
-  }
-
-  /**
-   * Handle the field blur.
-   * @method handleBlur
-   * @param {Object} event Event object
-   * @returns {undefined}
-   */
-  handleBlur({ target }) {
-    this.fieldValidation(target.value);
-    this.props.onBlur(
-      this.props.id,
-      target.value === '' ? undefined : target.value,
-    );
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      value,
-      onClick,
-      icon,
-      iconAction,
-      minLength,
-      maxLength,
-      placeholder,
-    } = this.props;
-
-    const props = {
-      ...this.props,
-      error: concat(this.props.error, this.state.error),
-    };
-
-    return (
-      <FormFieldWrapper {...props} className="text">
-        <Input
-          id={`field-${id}`}
-          name={id}
-          value={value || ''}
-          disabled={this.props.isDisabled}
-          icon={icon || null}
-          placeholder={placeholder}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
-          onClick={() => onClick()}
-          ref={(node) => {
-            this.node = node;
-          }}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
-        />
-        {icon && iconAction && (
-          <button className={`field-${id}-action-button`} onClick={iconAction}>
-            <Icon name={icon} size="18px" />
-          </button>
-        )}
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      indexes: keys(state.querystring.indexes),
-    }),
-    {
-      getQuerystring,
+    setError(error);
+  };
+
+  useEffect(
+    () => {
+      if (focus) ref.current.focus();
+
+      dispatch(getQuerystring());
+      fieldValidation(value);
     },
-  ),
-)(IdWidget);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focus, value, dispatch],
+  );
+
+  const handleChange = ({ target }) => {
+    fieldValidation(target.value);
+    onChange(id, target.value === '' ? undefined : target.value);
+  };
+
+  const handleBlur = ({ target }) => {
+    fieldValidation(target.value);
+    onBlur(id, target.value === '' ? undefined : target.value);
+  };
+
+  props = {
+    ...props,
+    error: concat(props.error, errors),
+  };
+
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onClick={() => onClick()}
+        ref={ref}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+export default IdWidget;
+
+IdWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  focus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  icon: PropTypes.shape({
+    xmlns: PropTypes.string,
+    viewBox: PropTypes.string,
+    content: PropTypes.string,
+  }),
+  iconAction: PropTypes.func,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  wrapped: PropTypes.bool,
+  placeholder: PropTypes.string,
+};
+
+IdWidget.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  value: null,
+  onChange: () => {},
+  onBlur: () => {},
+  onClick: () => {},
+  onEdit: null,
+  onDelete: null,
+  focus: false,
+  icon: null,
+  iconAction: null,
+  minLength: null,
+  maxLength: null,
+};

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

@@ -2,11 +2,24 @@ import React from 'react';
 import IdWidget from './IdWidget';
 import WidgetStory from './story';
 
-export const Text = WidgetStory.bind({
-  props: { id: 'text', title: 'Text' },
+export const Default = WidgetStory.bind({
   widget: IdWidget,
 });
 
+Default.args = {
+  id: 'text',
+  title: 'Text',
+};
+
+export const Errored = WidgetStory.bind({
+  widget: IdWidget,
+});
+Errored.args = {
+  id: 'field-errored',
+  title: 'Errored field title',
+  value: '@@name',
+};
+
 export default {
   title: 'Edit Widgets/Id',
   component: IdWidget,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Button, Grid } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   small: {