diff --git a/src/Image.tsx b/src/Image.tsx index 50397ce..6745788 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -62,7 +62,7 @@ interface CompoundedComponent

extends React.FC

{ type ImageStatus = 'normal' | 'error' | 'loading'; -const COMMON_PROPS: (keyof ImageElementProps)[] = [ +export const COMMON_PROPS: (keyof Omit)[] = [ 'crossOrigin', 'decoding', 'draggable', diff --git a/src/hooks/usePreviewItems.ts b/src/hooks/usePreviewItems.ts index 0ca803d..eff868a 100644 --- a/src/hooks/usePreviewItems.ts +++ b/src/hooks/usePreviewItems.ts @@ -1,5 +1,11 @@ import * as React from 'react'; -import type { InternalItem, PreviewImageElementProps, RegisterImage } from '../interface'; +import { COMMON_PROPS } from '..'; +import type { + ImageElementProps, + InternalItem, + PreviewImageElementProps, + RegisterImage, +} from '../interface'; import type { GroupConsumerProps } from '../PreviewGroup'; export type Items = Omit[]; @@ -31,9 +37,18 @@ export default function usePreviewItems( // items const mergedItems = React.useMemo(() => { if (items) { - return items.map(item => - typeof item === 'string' ? { data: { src: item } } : { data: item }, - ); + return items.map(item => { + if (typeof item === 'string') { + return { data: { src: item } }; + } + const data: ImageElementProps = {}; + Object.keys(items).forEach(key => { + if (['src', ...COMMON_PROPS].includes(key)) { + data[key] = items[key]; + } + }); + return { data }; + }); } return Object.keys(images).reduce((total: Items, id) => { diff --git a/tsconfig.json b/tsconfig.json index d754de4..02ccd13 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,7 @@ "target": "esnext", "moduleResolution": "node", "baseUrl": "./", - "jsx": "react", + "jsx": "preserve", "declaration": true, "skipLibCheck": true, "esModuleInterop": true,