@plone/volto 18.32.2 → 18.32.4

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

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import map from 'lodash/map';
 import cx from 'classnames';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import LanguageSVG from '@plone/volto/icons/language.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -31,156 +31,178 @@ const messages = defineMessages({
   },
 });
 /**
- * FormFieldWrapper component.
- * @function FormFieldWrapper
- * @param {Object} props - Component props
- * @returns {JSX.Element} Markup for the component.
+ * FormFieldWrapper component class.
+ * @class FormFieldWrapper
+ * @extends Component
  */
-const FormFieldWrapper = ({
-  id,
-  title,
-  description = null,
-  fieldSet,
-  required = false,
-  error = [],
-  wrapped = true,
-  columns = 2,
-  draggable = null,
-  onEdit,
-  className,
-  isDisabled = null,
-  onDelete = null,
-  noForInFieldLabel,
-  multilingual_options,
-  children,
-}) => {
-  const intl = useIntl();
-  const languageIndependent = multilingual_options?.language_independent;
+class FormFieldWrapper extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    required: PropTypes.bool,
+    error: PropTypes.arrayOf(PropTypes.string),
+    wrapped: PropTypes.bool,
+    columns: PropTypes.number,
+    draggable: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    onEdit: PropTypes.func,
+    className: PropTypes.string,
+    onDelete: PropTypes.func,
+    intl: PropTypes.object,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    error: [],
+    wrapped: true,
+    columns: 2,
+    onDelete: null,
+    intl: null,
+    isDisabled: null,
+    draggable: null,
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const {
+      id,
+      title,
+      description,
+      fieldSet,
+      required,
+      error,
+      wrapped,
+      columns,
+      draggable,
+      onEdit,
+      className,
+      isDisabled,
+      onDelete,
+      intl,
+      noForInFieldLabel,
+      multilingual_options,
+    } = this.props;
+
+    const languageIndependent = multilingual_options?.language_independent;
 
-  const wdg = (
-    <>
-      {children}
+    const wdg = (
+      <>
+        {this.props.children}
 
-      {map(error, (message) => (
-        <Label key={message} basic color="red" className="form-error-label">
-          {message}
-        </Label>
-      ))}
-    </>
-  );
+        {map(error, (message) => (
+          <Label key={message} basic color="red" className="form-error-label">
+            {message}
+          </Label>
+        ))}
+      </>
+    );
 
-  return wrapped ? (
-    <Form.Field
-      inline
-      required={required}
-      error={error && error.length > 0}
-      className={cx(
-        description ? 'help' : '',
-        className,
-        `field-wrapper-${id}`,
-        languageIndependent ? 'language-independent-field' : null,
-      )}
-    >
-      <Grid>
-        <Grid.Row stretched>
-          {columns === 2 && (
-            <Grid.Column width="4">
-              <div className="wrapper">
-                <label
-                  id={`fieldset-${fieldSet}-field-label-${id}`}
-                  htmlFor={noForInFieldLabel ? null : `field-${id}`}
-                >
-                  {draggable && onEdit && (
-                    <i
-                      aria-hidden="true"
-                      className="grey bars icon drag handle"
-                    />
-                  )}
-                  {title}
-                  {languageIndependent && (
-                    <div className="languageIndependent-icon">
-                      <Icon
-                        title={intl.formatMessage(
-                          messages.language_independent_icon_title,
-                        )}
-                        name={LanguageSVG}
-                        size="24px"
-                        color="#555"
+    return wrapped ? (
+      <Form.Field
+        inline
+        required={required}
+        error={error && error.length > 0}
+        className={cx(
+          description ? 'help' : '',
+          className,
+          `field-wrapper-${id}`,
+          languageIndependent ? 'language-independent-field' : null,
+        )}
+      >
+        <Grid>
+          <Grid.Row stretched>
+            {columns === 2 && (
+              <Grid.Column width="4">
+                <div className="wrapper">
+                  <label
+                    id={`fieldset-${fieldSet}-field-label-${id}`}
+                    htmlFor={noForInFieldLabel ? null : `field-${id}`}
+                  >
+                    {draggable && onEdit && (
+                      <i
+                        aria-hidden="true"
+                        className="grey bars icon drag handle"
                       />
-                    </div>
-                  )}
-                </label>
-              </div>
-            </Grid.Column>
-          )}
-          <Grid.Column width={columns === 2 ? 8 : 12}>
-            {onEdit && !isDisabled && (
-              <div className="toolbar" style={{ zIndex: '2' }}>
-                <button
-                  aria-label={intl.formatMessage(messages.edit)}
-                  className="item ui noborder button"
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    onEdit(id);
-                  }}
-                >
-                  <IconOld name="write square" size="large" color="blue" />
-                </button>
-                <button
-                  aria-label={intl.formatMessage(messages.delete)}
-                  className="item ui noborder button"
-                  onClick={(evt) => {
-                    evt.preventDefault();
-                    onDelete(id);
-                  }}
-                >
-                  <IconOld name="close" size="large" color="red" />
-                </button>
-              </div>
+                    )}
+                    {title}
+                    {languageIndependent && (
+                      <div className="languageIndependent-icon">
+                        <Icon
+                          title={intl.formatMessage(
+                            messages.language_independent_icon_title,
+                          )}
+                          name={LanguageSVG}
+                          size="24px"
+                          color="#555"
+                        />
+                      </div>
+                    )}
+                  </label>
+                </div>
+              </Grid.Column>
             )}
-            {wdg}
-          </Grid.Column>
-        </Grid.Row>
-        {description && (
-          <Grid.Row stretched>
-            <Grid.Column stretched width="12">
-              <p className="help">
-                {multilingual_options
-                  ? `${intl.formatMessage(messages.language_independent)} `
-                  : null}
-                {description}
-              </p>
+            <Grid.Column width={columns === 2 ? 8 : 12}>
+              {onEdit && !isDisabled && (
+                <div className="toolbar" style={{ zIndex: '2' }}>
+                  <button
+                    aria-label={intl.formatMessage(messages.edit)}
+                    className="item ui noborder button"
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      onEdit(id);
+                    }}
+                  >
+                    <IconOld name="write square" size="large" color="blue" />
+                  </button>
+                  <button
+                    aria-label={intl.formatMessage(messages.delete)}
+                    className="item ui noborder button"
+                    onClick={(evt) => {
+                      evt.preventDefault();
+                      onDelete(id);
+                    }}
+                  >
+                    <IconOld name="close" size="large" color="red" />
+                  </button>
+                </div>
+              )}
+              {wdg}
             </Grid.Column>
           </Grid.Row>
-        )}
-      </Grid>
-    </Form.Field>
-  ) : (
-    <>{wdg}</>
-  );
-};
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- */
-FormFieldWrapper.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  required: PropTypes.bool,
-  error: PropTypes.arrayOf(PropTypes.string),
-  wrapped: PropTypes.bool,
-  columns: PropTypes.number,
-  draggable: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  onEdit: PropTypes.func,
-  className: PropTypes.string,
-  onDelete: PropTypes.func,
-  fieldSet: PropTypes.string,
-  noForInFieldLabel: PropTypes.bool,
-  multilingual_options: PropTypes.object,
-  children: PropTypes.node,
-};
+          {description && (
+            <Grid.Row stretched>
+              <Grid.Column stretched width="12">
+                <p className="help">
+                  {this.props.multilingual_options
+                    ? `${intl.formatMessage(messages.language_independent)} `
+                    : null}
+                  {description}
+                </p>
+              </Grid.Column>
+            </Grid.Row>
+          )}
+        </Grid>
+      </Form.Field>
+    ) : (
+      <>{wdg}</>
+    );
+  }
+}
 
-export default FormFieldWrapper;
+export default injectIntl(FormFieldWrapper);

package/src/config/validation.ts

@@ -16,6 +16,7 @@ import {
   endEventDateRangeValidator,
   patternValidator,
   defaultLanguageControlPanelValidator,
+  sizeValidator,
 } from '@plone/volto/helpers/FormValidation/validators';
 
 const registerValidators = (config: ConfigType) => {
@@ -33,6 +34,13 @@ const registerValidators = (config: ConfigType) => {
     method: maxLengthValidator,
   });
 
+  config.registerUtility({
+    name: 'size',
+    type: 'validator',
+    dependencies: { fieldType: 'object' },
+    method: sizeValidator,
+  });
+
   config.registerUtility({
     name: 'pattern',
     type: 'validator',

package/src/helpers/FormValidation/FormValidation.test.js

@@ -8,6 +8,18 @@ const schema = {
     username: { title: 'Username', type: 'string', description: '' },
     email: { title: 'Email', type: 'string', widget: 'email', description: '' },
     url: { title: 'url', type: 'string', widget: 'url', description: '' },
+    file: {
+      title: 'file',
+      type: 'object',
+      description: '',
+      size: 5,
+    },
+    notafile: {
+      title: 'notafile',
+      type: 'object',
+      description: '',
+      whatever: 1,
+    },
   },
   fieldsets: [
     { id: 'default', title: 'FIXME: User Data', fields: ['username'] },
@@ -181,6 +193,41 @@ describe('FormValidation', () => {
       ).toEqual({});
     });
 
+    it('file - validates invalid size', () => {
+      const validationErrorMessages = [messages.maxSize.defaultMessage];
+      validationErrorMessages.title = 'file';
+
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData: { ...formData, file: { size: 10 } },
+          formatMessage,
+        }),
+      ).toEqual({
+        file: validationErrorMessages,
+      });
+    });
+
+    it('file - validates size', () => {
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData: { ...formData, file: { size: 1 } },
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+
+    it('notafile - the size validator does nothing', () => {
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData: { ...formData, notafile: { whatever: 1 } },
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+
     it('widget - validator from block - Fails', () => {
       let newSchema = {
         properties: {

package/src/helpers/FormValidation/validators.ts

@@ -1,5 +1,6 @@
 import { validationMessage } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+import config from '@plone/volto/registry';
 
 type MinMaxValidator = {
   value: string | number;
@@ -26,6 +27,13 @@ type ChoiceValidator = {
   formatMessage: Function;
 };
 
+type FileValidator = {
+  value: Record<string, any>;
+  field: Record<string, any>;
+  formData: any;
+  formatMessage: Function;
+};
+
 export const isMaxPropertyValid = ({
   value,
   fieldSpec,
@@ -232,3 +240,16 @@ export const defaultLanguageControlPanelValidator = ({
       formData.available_languages.includes(token));
   return !isValid ? formatMessage(messages.defaultLanguage) : null;
 };
+
+export const sizeValidator = ({
+  value,
+  field,
+  formatMessage,
+}: FileValidator) => {
+  const maxSize = field.size
+    ? parseInt(field.size, 10)
+    : config.settings.maxFileUploadSize;
+  return maxSize && value.size > maxSize
+    ? formatMessage(messages.maxSize, { maxSize, size: value.size })
+    : null;
+};

package/src/helpers/MessageLabels/MessageLabels.js

@@ -25,6 +25,11 @@ export const messages = defineMessages({
     id: 'Maximum value is {len}.',
     defaultMessage: 'Maximum value is {len}.',
   },
+  maxSize: {
+    id: 'Maximum file size is {maxSize} bytes, but the uploaded file is {size} bytes.',
+    defaultMessage:
+      'Maximum file size is {maxSize} bytes, but the uploaded file is {size} bytes.',
+  },
   uniqueItems: {
     id: 'Items must be unique.',
     defaultMessage: 'Items must be unique.',

package/src/reducers/users/users.js

@@ -117,7 +117,7 @@ export default function users(state = initialState, action = {}) {
     case `${LIST_USERS}_SUCCESS`:
       return {
         ...state,
-        users: action.result,
+        users: action.result.items ? action.result.items : action.result,
         [getRequestKey(action.type)]: {
           loading: false,
           loaded: true,

package/theme/themes/pastanaga/extras/main.less

@@ -391,8 +391,6 @@ button {
 }
 
 .users-control-panel .table {
-  overflow-x: scroll;
-
   &::-webkit-scrollbar {
     width: 3px;
     height: 3px; /* scrollbar height */

package/types/components/manage/Widgets/FormFieldWrapper.d.ts

@@ -1,28 +1,5 @@
-export default FormFieldWrapper;
-/**
- * FormFieldWrapper component.
- * @function FormFieldWrapper
- * @param {Object} props - Component props
- * @returns {JSX.Element} Markup for the component.
- */
-declare function FormFieldWrapper({ id, title, description, fieldSet, required, error, wrapped, columns, draggable, onEdit, className, isDisabled, onDelete, noForInFieldLabel, multilingual_options, children, }: any): JSX.Element;
-declare namespace FormFieldWrapper {
-    namespace propTypes {
-        let id: any;
-        let title: any;
-        let description: any;
-        let required: any;
-        let error: any;
-        let wrapped: any;
-        let columns: any;
-        let draggable: any;
-        let isDisabled: any;
-        let onEdit: any;
-        let className: any;
-        let onDelete: any;
-        let fieldSet: any;
-        let noForInFieldLabel: any;
-        let multilingual_options: any;
-        let children: any;
-    }
-}
+declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: React.ComponentType<any>;
+};
+export default _default;
+import React from 'react';

package/types/components/manage/Widgets/index.d.ts

@@ -121,4 +121,4 @@ export declare const ColorPickerWidget: import("@loadable/component").LoadableCo
 export declare const DatetimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const TimeWidget: import("@loadable/component").LoadableClassComponent<any>;
 export declare const RecurrenceWidget: import("@loadable/component").LoadableClassComponent<any>;
-export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<any>;
+export declare const FormFieldWrapper: import("@loadable/component").LoadableComponent<import("react-intl").WithIntlProps<any>>;

package/types/helpers/FormValidation/validators.d.ts

@@ -20,6 +20,12 @@ type ChoiceValidator = {
     formData: any;
     formatMessage: Function;
 };
+type FileValidator = {
+    value: Record<string, any>;
+    field: Record<string, any>;
+    formData: any;
+    formatMessage: Function;
+};
 export declare const isMaxPropertyValid: ({ value, fieldSpec, criterion, formatMessage, }: MinMaxValidator) => any;
 export declare const isMinPropertyValid: ({ value, fieldSpec, criterion, formatMessage, }: MinMaxValidator) => any;
 export declare const minLengthValidator: ({ value, field, formatMessage, }: Validator) => any;
@@ -37,4 +43,5 @@ export declare const patternValidator: ({ value, field, formatMessage, }: Valida
 export declare const maxItemsValidator: ({ value, field, formatMessage, }: Validator) => any;
 export declare const minItemsValidator: ({ value, field, formatMessage, }: Validator) => any;
 export declare const defaultLanguageControlPanelValidator: ({ value, formData, formatMessage, }: ChoiceValidator) => any;
+export declare const sizeValidator: ({ value, field, formatMessage, }: FileValidator) => any;
 export {};