feat: Added overlay parameter to PhotoView

fix: Remove css sourceMap fix: Fix the problem that the right button of the picture triggers dragging
MinJieLiu · Apr 27, 2022 · 2d54b14 · 2d54b14 · vercel · Apr 27, 2022
1 parent 0675d2a
commit 2d54b14
Show file tree

Hide file tree

Showing 13 changed files with 222 additions and 222 deletions.
diff --git a/packages/example/components/doc-overlay.tsx b/packages/example/components/doc-overlay.tsx
@@ -5,8 +5,7 @@ import { ImageList, Overlay, photoImages, Image } from './doc-components';
 export default function DocDemo() {
   return (
     <PhotoProvider
-      // @ts-ignore
-      overlayRender={({ rotate, onRotate, scale, index }) => {
+      overlayRender={({ rotate, onRotate, scale, overlay }) => {
         return (
           <Overlay>
             <div>
@@ -16,14 +15,14 @@ export default function DocDemo() {
               旋转角度 {rotate}
             </div>
             <div>缩放：{scale}</div>
-            <div>描述：{photoImages[index]}</div>
+            <div>描述：{overlay}</div>
           </Overlay>
         );
       }}
     >
       <ImageList>
         {photoImages.map((item, index) => (
-          <PhotoView key={index} src={item}>
+          <PhotoView key={index} src={item} overlay={<div>{item}</div>}>
             <Image src={item} />
           </PhotoView>
         ))}

diff --git a/packages/example/pages/docs/api.en-US.mdx b/packages/example/pages/docs/api.en-US.mdx
@@ -32,6 +32,7 @@ title: API
 | -------- | ----------------------------------------- | --------------------------------------------------- | ------------- |
 | src      | Image src                                 | string                                              |
 | render   | Custom rendering, lower priority than src | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
+| overlay  | Overlay                                   | React\.ReactNode                                    |
 | width    | Custom render node width                  | number                                              |
 | height   | Custom render node height                 | number                                              |
 | children | Child nodes, usually thumbnails           | React\.ReactElement                                 |
@@ -43,6 +44,7 @@ title: API
 | key       | Uniquely identifies                       | number \| string                                    | Required\*    |
 | src       | RESOURCE ADDRESS                          | string                                              |
 | render    | Custom rendering, lower priority than src | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
+| overlay   | Overlay                                   | React\.ReactNode                                    |
 | width     | Custom render node width                  | number                                              |
 | height    | Custom render node height                 | number                                              |
 | originRef | TRIGGER REF                               | React\.MutableRefObject&lt;HTMLElement \| null&gt;  |
@@ -57,6 +59,7 @@ title: API
 | visible        | Is it visible           | boolean                                                     | Required\*    |
 | onClose        | close event callback    | \(evt?: React\.MouseEvent \| React\.TouchEvent\) =&gt; void | Required\*    |
 | overlayVisible | Is the covering visible | boolean                                                     | Required\*    |
+| overlay        | Overlay                 | React\.ReactNode                                            | Required\*    |
 | rotate         | Current rotation angle  | number                                                      | Required\*    |
 | onRotate       | Rotation event callback | \(rotate: number\) =&gt; void                               | Required\*    |
 | scale          | Current zoom            | number                                                      | Required\*    |

diff --git a/packages/example/pages/docs/api.zh-CN.mdx b/packages/example/pages/docs/api.zh-CN.mdx
@@ -32,6 +32,7 @@ title: API
 | -------- | --------------------------- | --------------------------------------------------- | ------------- |
 | src      | 图片地址                    | string                                              |
 | render   | 自定义渲染，优先级比 src 低 | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
+| overlay  | 图片覆盖物                  | React\.ReactNode                                    |
 | width    | 自定义渲染节点宽度          | number                                              |
 | height   | 自定义渲染节点高度          | number                                              |
 | children | 子节点，一般为缩略图        | React\.ReactElement                                 |
@@ -43,6 +44,7 @@ title: API
 | key       | 唯一标识                    | number \| string                                    | Required\*    |
 | src       | 资源地址                    | string                                              |
 | render    | 自定义渲染，优先级比 src 低 | \(props: PhotoRenderParams\) =&gt; React\.ReactNode |
+| overlay   | 图片覆盖物                  | React\.ReactNode                                    |
 | width     | 自定义渲染节点宽度          | number                                              |
 | height    | 自定义渲染节点高度          | number                                              |
 | originRef | 触发 ref                    | React\.MutableRefObject&lt;HTMLElement \| null&gt;  |
@@ -57,6 +59,7 @@ title: API
 | visible        | 是否可见       | boolean                                                     | Required\*    |
 | onClose        | 关闭事件回调   | \(evt?: React\.MouseEvent \| React\.TouchEvent\) =&gt; void | Required\*    |
 | overlayVisible | 覆盖物是否可见 | boolean                                                     | Required\*    |
+| overlay        | 图片覆盖物     | React\.ReactNode                                            | Required\*    |
 | rotate         | 当前旋转角度   | number                                                      | Required\*    |
 | onRotate       | 旋转事件回调   | \(rotate: number\) =&gt; void                               | Required\*    |
 | scale          | 当前缩放       | number                                                      | Required\*    |

diff --git a/packages/example/pages/docs/change-log.en-US.mdx b/packages/example/pages/docs/change-log.en-US.mdx
@@ -2,6 +2,12 @@
 title: Change Log
 ---
 
+## 1.1.0
+
+1. feat: Added `overlay` parameter to PhotoView
+2. fix: Remove css sourceMap
+3. fix: Fix the problem that the right button of the picture triggers dragging
+
 ## 1.0.0
 
 1. fix: `loadingElement` position problem

diff --git a/packages/example/pages/docs/change-log.zh-CN.mdx b/packages/example/pages/docs/change-log.zh-CN.mdx
@@ -2,6 +2,12 @@
 title: Change Log
 ---
 
+## 1.1.0
+
+1. feat: PhotoView 新增 `overlay` 参数
+2. fix: 移除 css sourceMap
+3. fix: 修复图片右键触发拖动的问题
+
 ## 1.0.0
 
 1. fix: `loadingElement` 位置问题

diff --git a/packages/example/pages/docs/getting-started.en-US.mdx b/packages/example/pages/docs/getting-started.en-US.mdx
@@ -159,6 +159,7 @@ The parameters provided by the `toolbarRender` function are:
 - `visible` - whether to see `boolean`
 - `onClose` - close event callback `() => void`
 - `overlayVisible` - whether the overlay is visible `boolean`
+- `overlay` - Overlay
 - `rotate` - the current rotation angle `number`
 - `onRotate` - Rotate event callback `(rotate: number) => void`
 - `scale` - the current scale `number`
@@ -293,7 +294,7 @@ function MyComponent() {
 
 ### Custom description
 
-Add the `overlayRender` function to `<PhotoProvider>` to implement custom nodes. The return value of the function parameter is the same as that of `toolbarRender`.
+Add the `overlayRender` function to `<PhotoProvider>` to implement custom nodes. **The return value of the function parameter is the same as that of `toolbarRender`**.
 
 <DocOverlay />
 

diff --git a/packages/example/pages/docs/getting-started.zh-CN.mdx b/packages/example/pages/docs/getting-started.zh-CN.mdx
@@ -158,6 +158,7 @@ export default function MyComponent() {
 - `visible` - 是否可见 `boolean`
 - `onClose` - 关闭事件回调 `() => void`
 - `overlayVisible` - 覆盖物是否可见 `boolean`
+- `overlay` - 图片覆盖物
 - `rotate` - 当前旋转角度 `number`
 - `onRotate` - 旋转事件回调 `(rotate: number) => void`
 - `scale` - 当前缩放 `number`
@@ -291,7 +292,7 @@ function MyComponent() {
 
 ### 自定义描述
 
-在 `<PhotoProvider />` 上添加 `overlayRender` 函数，可以实现自定义节点，函数参数返回值与 `toolbarRender` 一致。
+在 `<PhotoProvider />` 上添加 `overlayRender` 函数，可以实现自定义节点，**函数参数返回值与 `toolbarRender` 一致**。
 
 <DocOverlay />
 

diff --git a/packages/react-photo-view/package.json b/packages/react-photo-view/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-photo-view",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An exquisite React photo preview component",
   "author": "MinJieLiu",
   "license": "Apache-2.0",
@@ -22,18 +22,18 @@
     "carousel"
   ],
   "scripts": {
-    "build": "rimraf ./dist && microbundle --jsx React.createElement --external react,react-dom --format cjs,esm,modern",
+    "build": "rimraf ./dist && microbundle --external react,react-dom --format cjs,esm,modern",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
+    "@micro-web/microbundle": "^0.14.3",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "less": "^4.1.2",
-    "microbundle": "^0.14.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2"

diff --git a/packages/react-photo-view/src/PhotoBox.tsx b/packages/react-photo-view/src/PhotoBox.tsx
@@ -404,7 +404,9 @@ export default function PhotoBox({
 
   function handleMouseDown(e: React.MouseEvent) {
     e.stopPropagation();
-    handleStart(e.clientX, e.clientY, 0);
+    if (e.button === 0) {
+      handleStart(e.clientX, e.clientY, 0);
+    }
   }
 
   // 计算位置

diff --git a/packages/react-photo-view/src/PhotoSlider.tsx b/packages/react-photo-view/src/PhotoSlider.tsx
@@ -333,6 +333,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
       onClose: close,
       onIndexChange: changeIndex,
       overlayVisible: currentOverlayVisible,
+      overlay: currentImage.overlay,
       scale,
       rotate,
       onScale,

diff --git a/packages/react-photo-view/src/PhotoView.tsx b/packages/react-photo-view/src/PhotoView.tsx
@@ -15,6 +15,10 @@ export interface PhotoViewProps {
    * 自定义渲染，优先级比 src 低
    */
   render?: (props: PhotoRenderParams) => React.ReactNode;
+  /**
+   * 自定义覆盖节点
+   */
+  overlay?: React.ReactNode;
   /**
    * 自定义渲染节点宽度
    */
@@ -29,7 +33,7 @@ export interface PhotoViewProps {
   children?: React.ReactElement;
 }
 
-const PhotoView: React.FC<PhotoViewProps> = ({ src, render, width, height, children }) => {
+const PhotoView: React.FC<PhotoViewProps> = ({ src, render, overlay, width, height, children }) => {
   const photoContext = useContext<PhotoContextType>(PhotoContext);
   const key = useInitial(() => photoContext.nextId());
   const originRef = useRef<HTMLElement>(null);
@@ -65,6 +69,7 @@ const PhotoView: React.FC<PhotoViewProps> = ({ src, render, width, height, child
       src,
       originRef,
       render: fn.render,
+      overlay,
       width,
       height,
     });

diff --git a/packages/react-photo-view/src/types.ts b/packages/react-photo-view/src/types.ts
@@ -16,6 +16,10 @@ export interface DataType {
    * 自定义渲染，优先级比 src 低
    */
   render?: (props: PhotoRenderParams) => React.ReactNode;
+  /**
+   * 自定义覆盖节点
+   */
+  overlay?: React.ReactNode;
   /**
    * 指定渲染节点宽度
    */
@@ -133,6 +137,10 @@ export interface OverlayRenderProps {
    * 覆盖物是否可见
    */
   overlayVisible: boolean;
+  /**
+   * 自定义覆盖节点
+   */
+  overlay?: React.ReactNode;
   /**
    * 当前旋转角度
    */