@plone/volto 17.0.0-alpha.9 → 17.0.1

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();
+});