@plone/volto 18.0.0-alpha.32 → 18.0.0-alpha.34

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

@@ -3,14 +3,13 @@
  * @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 { 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';
@@ -28,222 +27,158 @@ const messages = defineMessages({
   },
 });
 
-/**
- * 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 (
       // eslint-disable-next-line no-control-regex
       !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
-        value,
+        values,
       )
     ) {
-      error.push(this.props.intl.formatMessage(messages.invalidCharacters));
+      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/InternalUrlWidget.jsx

@@ -15,13 +15,13 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
 
 /** Widget to edit urls
  *
- * This is the default widget used for the `remoteUrl` field. You can also use
+ * This is a widget used for getting and setting an internal url. You can also use
  * it by declaring a field like:
  *
  * ```jsx
  * {
  *  title: "URL",
- *  widget: 'url',
+ *  widget: 'internal_url',
  * }
  * ```
  */
@@ -35,20 +35,20 @@ export const InternalUrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    value,
   } = props;
   const inputId = `field-${id}`;
 
-  const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
+
   /**
    * Clear handler
    * @method clear
    * @param {Object} value Value
-   * @returns {undefined}
+   * @returns {string} Empty string
    */
   const clear = () => {
-    setValue('');
-    onChange(id, undefined);
+    onChange(id, '');
   };
 
   const onChangeValue = (_value) => {
@@ -63,8 +63,6 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    setValue(newValue);
-
     newValue = isInternalURL(newValue) ? flattenToAppURL(newValue) : newValue;
 
     if (!isInternalURL(newValue) && newValue.length > 0) {
@@ -75,7 +73,7 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    onChange(id, newValue === '' ? undefined : newValue);
+    onChange(id, newValue);
   };
 
   return (
@@ -89,12 +87,10 @@ export const InternalUrlWidget = (props) => {
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
+          onBlur={({ target }) => onBlur(id, target.value)}
           onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
+          minLength={minLength}
+          maxLength={maxLength}
           error={isInvalid}
         />
         {value?.length > 0 ? (

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

@@ -1,136 +1,104 @@
-/**
- * TextWidget component.
- * @module components/manage/Widgets/TextWidget
- */
-
-import React, { Component } from 'react';
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
 
-import { injectIntl } from 'react-intl';
 import { Icon } from '@plone/volto/components';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
-/**
- * The simple text widget.
- *
- * It is the default fallback widget, so if no other widget is found based on
- * passed field properties, it will be used.
- */
-class TextWidget 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,
-  };
+const TextWidget = (props) => {
+  const {
+    id,
+    value,
+    onChange,
+    onBlur,
+    onClick,
+    icon,
+    iconAction,
+    minLength,
+    maxLength,
+    placeholder,
+    isDisabled,
+    focus,
+  } = props;
 
-  /**
-   * 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,
-  };
+  const ref = useRef();
 
-  /**
-   * Component did mount lifecycle method
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.focus) {
-      this.node.focus();
+  useEffect(() => {
+    if (focus) {
+      ref.current.focus();
     }
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props} className="text">
+      <Input
+        id={`field-${id}`}
+        name={id}
+        value={value || ''}
+        disabled={isDisabled}
+        icon={icon || null}
+        placeholder={placeholder}
+        onChange={({ target }) =>
+          onChange(id, target.value === '' ? undefined : target.value)
+        }
+        ref={ref}
+        onBlur={({ target }) =>
+          onBlur(id, target.value === '' ? undefined : target.value)
+        }
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+      />
+      {icon && iconAction && (
+        <button className={`field-${id}-action-button`} onClick={iconAction}>
+          <Icon name={icon} size="18px" />
+        </button>
+      )}
+    </FormFieldWrapper>
+  );
+};
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const {
-      id,
-      value,
-      onChange,
-      onBlur,
-      onClick,
-      icon,
-      iconAction,
-      minLength,
-      maxLength,
-      placeholder,
-      isDisabled,
-    } = this.props;
+export default TextWidget;
 
-    return (
-      <FormFieldWrapper {...this.props} className="text">
-        <Input
-          id={`field-${id}`}
-          name={id}
-          value={value || ''}
-          disabled={isDisabled}
-          icon={icon || null}
-          placeholder={placeholder}
-          onChange={({ target }) =>
-            onChange(id, target.value === '' ? undefined : target.value)
-          }
-          ref={(node) => {
-            this.node = node;
-          }}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
-          onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
-        />
-        {icon && iconAction && (
-          <button className={`field-${id}-action-button`} onClick={iconAction}>
-            <Icon name={icon} size="18px" />
-          </button>
-        )}
-      </FormFieldWrapper>
-    );
-  }
-}
+TextWidget.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,
+};
 
-export default injectIntl(TextWidget);
+TextWidget.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,
+};