fix: 自定义渲染例子修复

fix: maskOpacity 设置 null 背景不响应下拉变化
MinJieLiu · Jun 25, 2022 · 346cc90 · 346cc90 · vercel · Jun 25, 2022
1 parent 7e3d891
commit 346cc90
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 18 deletions.
diff --git a/packages/example/components/doc-close.tsx b/packages/example/components/doc-close.tsx
@@ -5,7 +5,7 @@ import photo4 from '../images/4.jpg';
 
 export default function DocDemo() {
   return (
-    <PhotoProvider pullClosable={false} maskClosable={false}>
+    <PhotoProvider pullClosable={false} maskClosable={false} maskOpacity={null}>
       <ImageList>
         <PhotoView src={photo4.src}>
           <Image src={photo4.src} />

diff --git a/packages/example/components/doc-controlled.tsx b/packages/example/components/doc-controlled.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PhotoSlider } from 'react-photo-view';
-import { Button, ImageList, photoImages } from './doc-components';
+import { Button, ImageList, Overlay, photoImages } from './doc-components';
 
 export default function DocDemo() {
   const [visible, setVisible] = React.useState(false);
@@ -26,6 +26,15 @@ export default function DocDemo() {
         onClose={handleCloseSlider}
         index={index}
         onIndexChange={setIndex}
+        overlayRender={({ index, onIndexChange }) => (
+          <Overlay>
+            <div className="mb-1">index: {index}</div>
+            <div className="flex">
+              <Button onClick={() => onIndexChange(0)}>setIndex(0)</Button>
+              <Button onClick={() => onIndexChange(4)}>setIndex(4)</Button>
+            </div>
+          </Overlay>
+        )}
       />
     </ImageList>
   );

diff --git a/packages/example/components/doc-render.tsx b/packages/example/components/doc-render.tsx
@@ -19,11 +19,10 @@ export default function DocDemo() {
             const childScale = scale === 1 ? scale + offset : 1 + offset;
 
             return (
-              <div
-                {...attrs}
-                className={`flex-none flex flex-col items-center justify-center bg-white ${attrs.className}`}
-              >
-                <div style={{ transform: `scale(${childScale})` }}>
+              <div {...attrs} className={`flex-none bg-white ${attrs.className || ''}`}>
+                <div
+                  style={{ transform: `scale(${childScale})`, width: elementSize, transformOrigin: '0 0', padding: 20 }}
+                >
                   <div className="mb-2">Hello world</div>
                   <Button className="mb-2 w-full" primary>
                     button

diff --git a/packages/example/pages/docs/api.en-US.mdx b/packages/example/pages/docs/api.en-US.mdx
@@ -14,7 +14,7 @@ title: API
 | easing             | animation function                                                           | (type: ActiveAnimationType) =>string                                       | () => 'cubic-bezier(0.25, 0.8, 0.25, 1)' |
 | photoClosable      | Can the image be clicked to close                                            | boolean                                                                    |
 | maskClosable       | Whether the background click can be closed                                   | boolean                                                                    | true                                     |
-| maskOpacity        | Default background transparency                                              | number                                                                     | 1                                        |
+| maskOpacity        | Default background transparency                                              | number \| null                                                             | 1                                        |
 | pullClosable       | Whether the drop down can be closed                                          | boolean                                                                    | true                                     |
 | bannerVisible      | Navigation bar visible                                                       | boolean                                                                    | true                                     |
 | overlayRender      | Custom render overlays                                                       | \(overlayProps: OverlayRenderProps\) =&gt; React\.ReactNode                |

diff --git a/packages/example/pages/docs/api.zh-CN.mdx b/packages/example/pages/docs/api.zh-CN.mdx
@@ -14,7 +14,7 @@ title: API
 | easing             | 动画函数                       | (type: ActiveAnimationType) =>string                                       | () => 'cubic-bezier(0.25, 0.8, 0.25, 1)' |
 | photoClosable      | 图片点击是否可关闭             | boolean                                                                    |
 | maskClosable       | 背景点击是否可关闭             | boolean                                                                    | true                                     |
-| maskOpacity        | 默认背景透明度                 | number                                                                     | 1                                        |
+| maskOpacity        | 默认背景透明度                 | number \| null                                                             | 1                                        |
 | pullClosable       | 下拉是否可关闭                 | boolean                                                                    | true                                     |
 | bannerVisible      | 导航条 visible                 | boolean                                                                    | true                                     |
 | overlayRender      | 自定义渲染覆盖物               | \(overlayProps: OverlayRenderProps\) =&gt; React\.ReactNode                |

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,11 @@
 title: Change Log
 ---
 
+## 1.2.1
+
+fix: Custom rendering example fixes
+fix: maskOpacity set null background does not respond to drop-down changes
+
 ## 1.2.0
 
 feat: configurable react portal container

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,11 @@
 title: Change Log
 ---
 
+## 1.2.1
+
+fix: 自定义渲染例子修复
+fix: maskOpacity 设置 null 背景不响应下拉变化
+
 ## 1.2.0
 
 feat: configurable react portal container

diff --git a/packages/example/pages/docs/getting-started.en-US.mdx b/packages/example/pages/docs/getting-started.en-US.mdx
@@ -268,7 +268,7 @@ function MyComponent() {
 
         return (
           <div {...attrs}>
-            <div style={{ transform: `scale(${childScale})` }}>
+            <div style={{ transform: `scale(${childScale})`, width: elementSize, transformOrigin: '0 0' }}>
               <div>Hello world</div>
               <Button>button</Button>
               <input onMouseDown={(e) => e.stopPropagation()} />

diff --git a/packages/example/pages/docs/getting-started.zh-CN.mdx b/packages/example/pages/docs/getting-started.zh-CN.mdx
@@ -267,7 +267,7 @@ function MyComponent() {
 
         return (
           <div {...attrs}>
-            <div style={{ transform: `scale(${childScale})` }}>
+            <div style={{ transform: `scale(${childScale})`, width: elementSize, transformOrigin: '0 0' }}>
               <div>Hello world</div>
               <Button>button</Button>
               <input onMouseDown={(e) => e.stopPropagation()} />

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.2.0",
+  "version": "1.2.1",
   "description": "An exquisite React photo preview component",
   "author": "MinJieLiu",
   "license": "Apache-2.0",

diff --git a/packages/react-photo-view/src/PhotoSlider.less b/packages/react-photo-view/src/PhotoSlider.less
@@ -29,7 +29,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 1);
     transition-property: background-color;
     z-index: -1;
   }

diff --git a/packages/react-photo-view/src/PhotoSlider.tsx b/packages/react-photo-view/src/PhotoSlider.tsx
@@ -45,9 +45,9 @@ type PhotoSliderState = {
   // Reach 开始时 y 坐标
   lastCY: number | undefined;
   // 背景透明度
-  bg: number | undefined;
+  bg: number | null | undefined;
   // 上次关闭的背景透明度
-  lastBg: number | undefined;
+  lastBg: number | null | undefined;
   // 是否显示 overlay
   overlay: boolean;
   // 是否为最小状态，可下拉关闭
@@ -237,7 +237,8 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
       });
       return;
     }
-    const opacity = limitNumber(maskOpacity, 0, maskOpacity - Math.abs(clientY - lastCY) / 100 / 4);
+    const opacity =
+      maskOpacity === null ? null : limitNumber(maskOpacity, 0.01, maskOpacity - Math.abs(clientY - lastCY) / 100 / 4);
 
     updateState({
       touched: true,
@@ -365,7 +366,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
             : ''
         }`}
         style={{
-          background: `rgba(0, 0, 0, ${currentOpacity})`,
+          background: currentOpacity ? `rgba(0, 0, 0, ${currentOpacity})` : undefined,
           transitionTimingFunction: currentEasing,
           transitionDuration: `${touched ? 0 : currentSpeed}ms`,
           animationDuration: `${currentSpeed}ms`,

diff --git a/packages/react-photo-view/src/types.ts b/packages/react-photo-view/src/types.ts
@@ -61,9 +61,10 @@ export interface PhotoProviderBase {
   maskClosable?: boolean;
   /**
    * 默认背景透明度
+   * 设置 null 背景不响应下拉变化
    * @defaultValue 1
    */
-  maskOpacity?: number;
+  maskOpacity?: number | null;
   /**
    * 下拉是否可关闭
    * @defaultValue true