Add all DirectusImage component props (#358)

Co-authored-by: Sakuk <[email protected]>
Co-authored-by: Marco Polichetti <[email protected]>

Author: 3 people

README.md

@@ -127,11 +127,18 @@ export const TodoItem = ({ item }) => {
 Computes the URL of the given resource `asset`, rendering it using the `render` prop:
 
 - `asset`: the asset representing the resource (`string` or `object` with an `id` property)
+- `render`: a function (which receives an object with the `url` property and all propertys provided to `DirectusImage`) that provides the component to render
+- `presetKey`: the key of the [Storage Asset Preset](https://docs.directus.io/user-guide/cloud/project-settings.html#files-storage), a shortcut for the below parameters
+
+> **Note**: the following parameters are ignored if `presetKey` is provided
+
 - `fit`: fit of the thumbnail while always preserving the aspect ratio, can be any of the following options: `cover`, `contain`, `inside` or `outside`
 - `height`: height of the thumbnail in pixels
-- `quality`: quality of the thumbnail (`1` to `100`)
 - `width`: width of the thumbnail in pixels
-- `render`: a function (which receives an object with the `url` property) that provides the component to render
+- `quality`: quality of the thumbnail (`1` to `100`)
+- `format`: the return file format
+- `withoutEnlargement`: if `true`, the thumbnail will not be larger than the original image
+- `transforms`: an array of [Sharp transforms](https://sharp.pixelplumbing.com/api-operation) to apply to the image
 
 ```jsx
 import React from 'react';

src/components/DirectusImage.spec.tsx

@@ -34,6 +34,13 @@ describe('Component', () => {
         fit: 'cover',
       },
     ],
+    [
+      {
+        apiUrl: 'http://example.com',
+        asset: '11263b49-13b9-4ed8-ba39-01fe7cbeb284',
+        presetKey: 'true',
+      },
+    ],
   ])('pass the props to the renderer', props => {
     render(<DirectusImage {...(props as DirectusImageProps)} render={dummyRenderer} />);
 

src/components/DirectusImage.tsx

@@ -3,21 +3,98 @@ import * as React from 'react';
 import { DirectusContext } from '@/DirectusProvider';
 import { DirectusImageProps } from '@/types';
 
-export const DirectusImage = ({ apiUrl: propsApiUrl, asset, render, ...params }: DirectusImageProps): JSX.Element => {
+export const DirectusImage = ({
+  apiUrl: propsApiUrl,
+  asset,
+  render,
+  presetKey,
+  width,
+  height,
+  quality,
+  fit,
+  format,
+  withoutEnlargement,
+  transforms,
+}: DirectusImageProps): JSX.Element => {
   const directusContext = React.useContext(DirectusContext);
 
   if (!directusContext && !propsApiUrl) {
-    throw new Error('DirectusAsset requires either a DirectusProvider or an apiUrl prop');
+    throw new Error('DirectusImage requires either a DirectusProvider or an apiUrl prop');
   }
 
   const apiUrl = propsApiUrl || directusContext?.apiUrl;
 
+  const imageUrl = React.useMemo((): string | undefined => {
+    const assetId = asset && 'object' === typeof asset ? asset.id : asset;
+
+    if (!assetId) {
+      return undefined;
+    }
+
+    const params = new URLSearchParams();
+
+    // test if props is DirectusImagePropsKeyed or DirectusImagePropsDynamic
+    if ('string' === typeof presetKey) {
+      params.append('key', presetKey);
+    } else {
+      if (width) {
+        params.append('width', width.toString());
+      }
+      if (height) {
+        params.append('height', height.toString());
+      }
+      if (quality) {
+        params.append('quality', quality.toString());
+      }
+      if (fit) {
+        params.append('fit', fit);
+      }
+      if (format) {
+        params.append('format', format);
+      }
+      if (withoutEnlargement) {
+        params.append('withoutEnlargement', 'true');
+      }
+      if (transforms) {
+        params.append('transforms', JSON.stringify(transforms));
+      }
+    }
+
+    return `${apiUrl}/assets/${assetId}?${params.toString()}`;
+  }, [
+    directusContext,
+    asset,
+    propsApiUrl,
+    presetKey,
+    width,
+    height,
+    quality,
+    fit,
+    format,
+    withoutEnlargement,
+    transforms,
+  ]);
+
+  // test if props is DirectusImagePropsKeyed or DirectusImagePropsDynamic
+  if ('string' === typeof presetKey) {
+    return render({
+      apiUrl,
+      asset,
+      url: imageUrl,
+      presetKey,
+    });
+  }
+
   return render({
     apiUrl,
     asset,
-    ...params,
-    url: `${apiUrl}/assets/${'object' === typeof asset ? asset.id : asset}?${new URLSearchParams(
-      params as Record<string, string>
-    ).toString()}`,
+    url: imageUrl,
+    width,
+    height,
+    quality,
+    fit,
+    format,
+    withoutEnlargement,
+    transforms,
   });
 };

src/types.ts

@@ -31,16 +31,32 @@ export interface DirectusAssetProps {
 }
 
 /**
- * Shape of the `DirectusImage` component `render` prop.
+ * Shape of the `DirectusImage` component `render` prop, with `presetKey` prop.
  */
-export type DirectusImageRenderer = Omit<DirectusImageProps, 'render'> & {
+export type DirectusImageRendererKeyed = Omit<DirectusImagePropsKeyed, 'render'> & {
   url?: string;
 };
 
 /**
- * Shape of `DirectusImage` component props.
+ * Shape of the `DirectusImage` component `render` prop, with dynamic props.
+ */
+export type DirectusImageRendererDynamic = Omit<DirectusImagePropsDynamic, 'render'> & {
+  url?: string;
+};
+
+/**
+ * Shape of the `DirectusImage` component `render` prop.
  */
-export interface DirectusImageProps extends Omit<DirectusAssetProps, 'download' | 'render'> {
+export type DirectusImageRenderer = DirectusImageRendererKeyed | DirectusImageRendererDynamic;
+
+/**
+ * Shape of a generic image component props.
+ */
+export type DirectusImagePropsBase = Omit<DirectusAssetProps, 'download' | 'render'> & {
+  render: (args: DirectusImageRenderer) => JSX.Element;
+};
+
+export interface DirectusImageCustomProps {
   /** The width of the thumbnail in pixels. */
   width?: number;
   /** The height of the thumbnail in pixels. */
@@ -49,10 +65,36 @@ export interface DirectusImageProps extends Omit<DirectusAssetProps, 'download'
   quality?: number;
   /** The fit of the thumbnail while always preserving the aspect ratio. */
   fit?: 'cover' | 'contain' | 'inside' | 'outside';
-  /** A function that returns the React element to be rendered. It will receive an object with the `url` key and all the passed props. */
-  render: (args: DirectusImageRenderer) => JSX.Element;
+  /** What file format to return the image in. */
+  format?: 'auto' | 'jpg' | 'png' | 'webp' | 'tiff';
+  /** Disable image up-scaling. */
+  withoutEnlargement?: boolean;
+  /** An array of sharp operations to apply to the image. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  transforms?: [string, ...any[]][];
 }
 
+/**
+ * Shape of the `DirectusImage` component props, with dynamic props.
+ */
+export type DirectusImagePropsDynamic = {
+  presetKey?: never;
+} & DirectusImageCustomProps &
+  DirectusImagePropsBase;
+
+/**
+ * Shape of the `DirectusImage` component props, with `presetKey` prop.
+ */
+export type DirectusImagePropsKeyed = {
+  /** Key for Storage Asset Preset ( https://docs.directus.io/user-guide/cloud/project-settings.html#files-thumbnails ). */
+  presetKey: string;
+} & { [p in keyof DirectusImageCustomProps]: never } & DirectusImagePropsBase;
+
+/**
+ * Shape of the `DirectusImage` component props.
+ */
+export type DirectusImageProps = DirectusImagePropsDynamic | DirectusImagePropsKeyed;
+
 /**
  * Shape of the context provider props.
  */