@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.22

package/src/components/manage/Workflow/Workflow.jsx

@@ -1,22 +1,17 @@
-/**
- * Workflow component.
- * @module components/manage/Workflow/Workflow
- */
-
-import React, { Component, Fragment } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { uniqBy } from 'lodash';
 import { toast } from 'react-toastify';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+
 import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
 import {
   flattenToAppURL,
-  getCurrentStateMapping,
   getWorkflowOptions,
+  getCurrentStateMapping,
 } from '@plone/volto/helpers';
-
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import {
@@ -24,7 +19,6 @@ import {
   getWorkflow,
   transitionWorkflow,
 } from '@plone/volto/actions';
-
 import downSVG from '@plone/volto/icons/down-key.svg';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import checkSVG from '@plone/volto/icons/check.svg';
@@ -165,191 +159,88 @@ const customSelectStyles = {
   }),
 };
 
-/**
- * Workflow container class.
- * @class Workflow
- * @extends Component
- */
-class Workflow extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getContent: PropTypes.func.isRequired,
-    getWorkflow: PropTypes.func.isRequired,
-    transitionWorkflow: PropTypes.func.isRequired,
-    loaded: PropTypes.bool.isRequired,
-    pathname: PropTypes.string.isRequired,
-    history: PropTypes.arrayOf(
-      PropTypes.shape({
-        review_state: PropTypes.string,
-      }),
-    ),
-    transitions: PropTypes.arrayOf(
-      PropTypes.shape({
-        '@id': PropTypes.string,
-        title: PropTypes.string,
-      }),
-    ),
-  };
+function useWorkflow() {
+  const history = useSelector((state) => state.workflow.history, shallowEqual);
+  const transitions = useSelector(
+    (state) => state.workflow.transitions,
+    shallowEqual,
+  );
+  const loaded = useSelector((state) => state.workflow.transition.loaded);
+  const currentStateValue = useSelector(
+    (state) => getCurrentStateMapping(state.workflow.currentState),
+    shallowEqual,
+  );
 
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    history: [],
-    transitions: [],
-  };
+  return { loaded, history, transitions, currentStateValue };
+}
 
-  componentDidMount() {
-    this.props.getWorkflow(this.props.pathname);
-  }
+const Workflow = (props) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { loaded, transitions, currentStateValue } = useWorkflow();
+  const content = useSelector((state) => state.content?.data, shallowEqual);
+  const { pathname } = props;
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      this.props.getWorkflow(nextProps.pathname);
-    }
-    if (!this.props.loaded && nextProps.loaded) {
-      this.props.getWorkflow(nextProps.pathname);
-      this.props.getContent(nextProps.pathname);
-    }
-  }
+  useEffect(() => {
+    dispatch(getWorkflow(pathname));
+    dispatch(getContent(pathname));
+  }, [dispatch, pathname, loaded]);
 
-  /**
-   * On transition handler
-   * @method transition
-   * @param {string} event Event object
-   * @returns {undefined}
-   */
-  transition = (selectedOption) => {
-    this.props.transitionWorkflow(flattenToAppURL(selectedOption.url));
+  const transition = (selectedOption) => {
+    dispatch(transitionWorkflow(flattenToAppURL(selectedOption.url)));
     toast.success(
       <Toast
         success
-        title={this.props.intl.formatMessage(messages.messageUpdated)}
+        title={intl.formatMessage(messages.messageUpdated)}
         content=""
       />,
     );
   };
 
-  selectValue = (option) => {
-    const stateDecorator = {
-      marginLeft: '10px',
-      marginRight: '10px',
-      display: 'inline-block',
-      backgroundColor: option.color || null,
-      content: ' ',
-      height: '10px',
-      width: '10px',
-      borderRadius: '50%',
-    };
-    return (
-      <Fragment>
-        <span style={stateDecorator} />
-        <span className="Select-value-label">{option.label}</span>
-      </Fragment>
-    );
-  };
-
-  optionRenderer = (option) => {
-    const stateDecorator = {
-      marginLeft: '10px',
-      marginRight: '10px',
-      display: 'inline-block',
-      backgroundColor:
-        this.props.currentStateValue.value === option.value
-          ? option.color
-          : null,
-      content: ' ',
-      height: '10px',
-      width: '10px',
-      borderRadius: '50%',
-      border:
-        this.props.currentStateValue.value !== option.value
-          ? `1px solid ${option.color}`
-          : null,
-    };
-
-    return (
-      <Fragment>
-        <span style={stateDecorator} />
-        <span style={{ marginRight: 'auto' }}>{option.label}</span>
-        <Icon name={checkSVG} size="24px" />
-      </Fragment>
-    );
-  };
+  const { Placeholder } = props.reactSelect.components;
+  const Select = props.reactSelect.default;
 
-  render() {
-    const { Placeholder } = this.props.reactSelect.components;
-    const Select = this.props.reactSelect.default;
+  return (
+    <FormFieldWrapper
+      id="state-select"
+      title={intl.formatMessage(messages.state)}
+      intl={intl}
+      {...props}
+    >
+      <Select
+        name="state-select"
+        className="react-select-container"
+        classNamePrefix="react-select"
+        isDisabled={!content.review_state || transitions.length === 0}
+        options={uniqBy(
+          transitions.map((transition) => getWorkflowOptions(transition)),
+          'label',
+        ).concat(currentStateValue)}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{
+          DropdownIndicator,
+          Placeholder,
+          Option,
+          SingleValue,
+        }}
+        onChange={transition}
+        value={
+          content.review_state
+            ? currentStateValue
+            : {
+                label: intl.formatMessage(messages.messageNoWorkflow),
+                value: 'noworkflow',
+              }
+        }
+        isSearchable={false}
+      />
+    </FormFieldWrapper>
+  );
+};
 
-    return (
-      <FormFieldWrapper
-        id="state-select"
-        title={this.props.intl.formatMessage(messages.state)}
-        {...this.props}
-      >
-        <Select
-          name="state-select"
-          className="react-select-container"
-          classNamePrefix="react-select"
-          isDisabled={
-            !this.props.content.review_state ||
-            this.props.transitions.length === 0
-          }
-          options={uniqBy(
-            this.props.transitions.map((transition) =>
-              getWorkflowOptions(transition),
-            ),
-            'label',
-          ).concat(this.props.currentStateValue)}
-          styles={customSelectStyles}
-          theme={selectTheme}
-          components={{
-            DropdownIndicator,
-            Placeholder,
-            Option,
-            SingleValue,
-          }}
-          onChange={this.transition}
-          value={
-            this.props.content.review_state
-              ? this.props.currentStateValue
-              : {
-                  label: this.props.intl.formatMessage(
-                    messages.messageNoWorkflow,
-                  ),
-                  value: 'noworkflow',
-                }
-          }
-          isSearchable={false}
-        />
-      </FormFieldWrapper>
-    );
-  }
-}
+Workflow.propTypes = {
+  pathname: PropTypes.string.isRequired,
+};
 
-export default compose(
-  injectIntl,
-  injectLazyLibs(['reactSelect']),
-  connect(
-    (state) => ({
-      loaded: state.workflow.transition.loaded,
-      content: state.content.data,
-      history: state.workflow.history,
-      transitions: state.workflow.transitions,
-      currentStateValue: getCurrentStateMapping(state.workflow.currentState),
-    }),
-    { getContent, getWorkflow, transitionWorkflow },
-  ),
-)(Workflow);
+export default compose(injectLazyLibs(['reactSelect']))(Workflow);

package/src/components/theme/Image/Image.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * Image component
+ * @param {object} item - Context item that has the image field (can also be a catalog brain or summary)
+ * @param {string} imageField - Key of the image field inside the item, or inside the image_scales object of the item if it is a catalog brain or summary
+ * @param {string} src - URL of the image to be used if the item field is not available
+ * @param {string} alt - Alternative text for the image
+ * @param {boolean} loading - (default: eager) set to `lazy` to lazy load the image
+ * @param {boolean} responsive - (default: false) set to `true` to add the `responsive` class to the image
+ * @param {string} className - Additional classes to add to the image
+ */
+export default function Image({
+  item,
+  imageField,
+  src,
+  alt = '',
+  loading = 'eager',
+  responsive = false,
+  className = '',
+  ...imageProps
+}) {
+  if (!item && !src) return null;
+
+  // TypeScript hints for editor autocomplete :)
+  /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
+  const attrs = {};
+
+  if (!item && src) {
+    attrs.src = src;
+    attrs.className = cx(className, { responsive });
+  } else {
+    const isFromRealObject = !item.image_scales;
+    const imageFieldWithDefault = imageField || item.image_field || 'image';
+
+    const image = isFromRealObject
+      ? item[imageFieldWithDefault]
+      : item.image_scales[imageFieldWithDefault]?.[0];
+
+    if (!image) return null;
+
+    const isSvg = image['content-type'] === 'image/svg+xml';
+
+    const baseUrl = isFromRealObject ? '' : flattenToAppURL(item['@id'] + '/');
+
+    attrs.src = `${baseUrl}${flattenToAppURL(image.download)}`;
+    attrs.width = image.width;
+    attrs.height = image.height;
+    attrs.style = {
+      aspectRatio: `${image.width} / ${image.height}`,
+      ...imageProps.style,
+    };
+    attrs.className = cx(className, { responsive });
+
+    if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
+      const sortedScales = Object.values(image.scales).sort((a, b) => {
+        if (a.width > b.width) return 1;
+        else if (a.width < b.width) return -1;
+        else return 0;
+      });
+
+      attrs.srcSet = sortedScales
+        .map(
+          (scale) =>
+            `${baseUrl}${flattenToAppURL(scale.download)} ${scale.width}w`,
+        )
+        .join(', ');
+    }
+  }
+
+  if (loading === 'lazy') {
+    attrs.loading = 'lazy';
+    attrs.decoding = 'async';
+  } else {
+    attrs.fetchpriority = 'high';
+  }
+
+  return <img {...attrs} alt={alt} {...imageProps} />;
+}
+
+Image.propTypes = {
+  item: PropTypes.shape({
+    '@id': PropTypes.string,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    image: PropTypes.object,
+  }),
+  imageField: PropTypes.string,
+  src: PropTypes.string,
+  alt: PropTypes.string.isRequired,
+  loading: PropTypes.string,
+  responsive: PropTypes.bool,
+  className: PropTypes.string,
+};

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Image from './Image';
+
+test('renders an image component with fetchpriority high', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component with lazy loading', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+      loading="lazy"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component with responsive class', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+      responsive={true}
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component from a catalog brain', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        '@id': 'http://localhost:3000/image',
+        image_field: 'image',
+        image_scales: {
+          image: [
+            {
+              download: '@@images/image/image.png',
+              width: 400,
+              height: 400,
+              scales: {
+                preview: {
+                  download: '@@images/image/image-400.png',
+                  width: 400,
+                  height: 400,
+                },
+              },
+            },
+          ],
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component from a string src', () => {
+  const component = renderer.create(
+    <Image
+      src="http://localhost:3000/image/@@images/image/image.png"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/theme/Logo/Logo.jsx

@@ -42,6 +42,8 @@ const Logo = () => {
         src={LogoImage}
         alt={intl.formatMessage(messages.plonesite)}
         title={intl.formatMessage(messages.plonesite)}
+        width="158.2"
+        height="40.7"
       />
     </UniversalLink>
   );