@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

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

@@ -15,7 +15,6 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import Image from '@plone/volto/components/theme/Image/Image';
 import loadable from '@loadable/component';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
 import { defineMessages, useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
@@ -90,18 +89,25 @@ const FileWidget = (props) => {
   const [fileType, setFileType] = React.useState(false);
   const intl = useIntl();
 
+  const imgAttrs = React.useMemo(() => {
+    const data = {};
+    if (value?.download) {
+      data.item = {
+        '@id': value.download.substring(0, value.download.indexOf('/@@images')),
+        image: value,
+      };
+    } else if (value?.data) {
+      data.src = `data:${value['content-type']};${value.encoding},${value.data}`;
+    }
+    return data;
+  }, [value]);
+
   React.useEffect(() => {
     if (value && imageMimetypes.includes(value['content-type'])) {
       setFileType(true);
     }
   }, [value]);
 
-  const imgsrc = value?.download
-    ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
-    : null || value?.data
-      ? `data:${value['content-type']};${value.encoding},${value.data}`
-      : null;
-
   /**
    * Drop handler
    * @method onDrop
@@ -175,7 +181,7 @@ const FileWidget = (props) => {
               <Image
                 className="image-preview small ui image"
                 id={`field-${id}-image`}
-                src={imgsrc}
+                {...imgAttrs}
               />
             ) : (
               <div className="dropzone-placeholder">

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

@@ -2,12 +2,12 @@
  * FormFieldWrapper component.
  * @module components/manage/Widgets/FormFieldWrapper
  */
-import React, { Component } from 'react';
+import React 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, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import LanguageSVG from '@plone/volto/icons/language.svg';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 
@@ -31,178 +31,156 @@ const messages = defineMessages({
   },
 });
 /**
- * FormFieldWrapper component class.
- * @class FormFieldWrapper
- * @extends Component
+ * FormFieldWrapper component.
+ * @function FormFieldWrapper
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Markup for the component.
  */
-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 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;
 
-    const wdg = (
-      <>
-        {this.props.children}
+  const wdg = (
+    <>
+      {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"
+  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"
                       />
-                    )}
-                    {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>
+                    </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>
             )}
-            <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}
+            {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>
           </Grid.Row>
-          {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}</>
-    );
-  }
-}
+        )}
+      </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,
+};
 
-export default injectIntl(FormFieldWrapper);
+export default FormFieldWrapper;