feat: extends CreateImagePreviewProps

bowencool · Dec 12, 2023 · 29c867b · 29c867b
1 parent 178c7e5
commit 29c867b
Show file tree

Hide file tree

Showing 5 changed files with 2,079 additions and 2,263 deletions.
diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
       "prettier --parser=typescript --write"
     ]
   },
-  "dependencies": {},
   "devDependencies": {
     "@swc/core": "^1.3.53",
     "@testing-library/jest-dom": "^5.16.5",
@@ -53,7 +52,7 @@
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^2.14.1",
     "@umijs/test": "^3.5.40",
-    "antd": "^5.8.4",
+    "antd": "^5.12.2",
     "dumi": "^1.1.50",
     "father": "^4.1.9",
     "lint-staged": "^10.0.7",

diff --git a/src/createImagePreview/demos/basic.tsx b/src/createImagePreview/demos/basic.tsx
@@ -7,11 +7,14 @@ const Demo: React.FC = () => {
     <Button
       onClick={() => {
         createImagePreview({
-          images: [
+          items: [
             'https://dummyimage.com/100x100/394FC4/FFF.png&text=1',
             'https://dummyimage.com/100x100/894FC4/FFF.png&text=2',
           ],
-          current: 1,
+          preview: {
+            current: 1, // default index of preview images
+            scaleStep: 0.1,
+          },
           onClose() {
             console.log('Close');
           },

diff --git a/src/createImagePreview/index.md b/src/createImagePreview/index.md
@@ -13,4 +13,30 @@ group:
 
 <code title="Basic" src="./demos/basic.tsx" />
 
-<API />
+### API
+
+Everything is the same as [Image.PreviewGroup](https://ant.design/components/image#previewgroup).
+
+```ts
+import type { PreviewGroupPreview, GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
+
+export type CreateImagePreviewProps = Omit<GroupConsumerProps, 'preview'> & {
+  preview?: Omit<PreviewGroupPreview, 'visible' | 'onVisibleChange' | 'onChange'>;
+  /**
+   * @description callback on close
+   */
+  onClose?: () => void;
+  /**
+   * @deprecated use `items` instead
+   * @description alias of `items` for compatibility
+   * @default []
+   */
+  images?: GroupConsumerProps['items'];
+  /**
+   * @deprecated use `preview.current` instead
+   * @description alias of `preview.current` for compatibility
+   * @default []
+   */
+  current?: PreviewGroupPreview['current'];
+};
+```
diff --git a/src/createImagePreview/index.tsx b/src/createImagePreview/index.tsx
@@ -1,48 +1,51 @@
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
+import type { PreviewGroupPreview, GroupConsumerProps } from 'rc-image/lib/PreviewGroup';
 import { Image } from 'antd';
 
-export type CreateImagePreviewProps = {
+export type CreateImagePreviewProps = Omit<GroupConsumerProps, 'preview'> & {
+  preview?: Omit<PreviewGroupPreview, 'visible' | 'onVisibleChange' | 'onChange'>;
   /**
-   * @description image urls to preview
-   * @default []
+   * @description callback on close
    */
-  images?: string[];
+  onClose?: () => void;
   /**
-   * @description initial index to preview
-   * @default 0
+   * @deprecated use `items` instead
+   * @description alias of `items` for compatibility
+   * @default []
    */
-  current?: number;
+  images?: GroupConsumerProps['items'];
   /**
-   * @description callback on close
+   * @deprecated use `preview.current` instead
+   * @description alias of `preview.current` for compatibility
+   * @default []
    */
-  onClose?: () => void;
+  current?: PreviewGroupPreview['current'];
 };
 
-function App({ images = [], current = 0, onClose }: CreateImagePreviewProps) {
+function App({ preview, onClose, images, current: oldCurrent, ...rest }: CreateImagePreviewProps) {
   const [visible, setVisible] = useState(false);
+  const [current, setCurrent] = useState(preview?.current || oldCurrent || 0);
   useEffect(() => {
     setVisible(true);
   }, []);
   return (
-    <div style={{ display: 'none' }}>
-      <Image.PreviewGroup
-        preview={{
-          visible,
-          onVisibleChange: (vis) => {
-            setVisible(vis);
-            if (!vis) {
-              onClose?.();
-            }
-          },
-          current,
-        }}
-      >
-        {images?.filter(Boolean)?.map((img) => (
-          <Image key={img} src={img} />
-        ))}
-      </Image.PreviewGroup>
-    </div>
+    <Image.PreviewGroup
+      items={images}
+      {...rest}
+      preview={{
+        ...preview,
+        current,
+        onChange: setCurrent,
+        visible,
+        onVisibleChange: (vis) => {
+          setVisible(vis);
+          if (!vis) {
+            onClose?.();
+          }
+        },
+      }}
+    />
   );
 }