feat: preview zIndex should pass into operations (#288)

react-component · Nov 21, 2023 · d2f3f62 · d2f3f62 · vercel · Nov 21, 2023
1 parent cd92f7d
commit d2f3f62
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
@@ -41,6 +41,7 @@ export default function Base() {
           onVisibleChange: visible => {
             console.log('visible', visible);
           },
+          zIndex: 9999
         }}
       />
 

diff --git a/src/Operations.tsx b/src/Operations.tsx
@@ -41,6 +41,7 @@ interface OperationsProps
     originalNode: React.ReactElement,
     info: ToolbarRenderInfoType | Omit<ToolbarRenderInfoType, 'current' | 'total'>,
   ) => React.ReactNode;
+  zIndex?: number;
 }
 
 const Operations: React.FC<OperationsProps> = props => {
@@ -71,6 +72,7 @@ const Operations: React.FC<OperationsProps> = props => {
     onFlipX,
     onFlipY,
     toolbarRender,
+    zIndex,
   } = props;
   const groupContext = useContext(PreviewGroupContext);
   const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = icons;
@@ -148,7 +150,10 @@ const Operations: React.FC<OperationsProps> = props => {
         <Portal open getContainer={getContainer ?? document.body}>
           <div
             className={classnames(`${prefixCls}-operations-wrapper`, className, rootClassName)}
-            style={style}
+            style={{
+              ...style,
+              zIndex,
+            }}
           >
             {closeIcon === null ? null : (
               <button className={`${prefixCls}-close`} onClick={onClose}>

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -411,6 +411,7 @@ const Preview: React.FC<PreviewProps> = props => {
         onFlipX={onFlipX}
         onFlipY={onFlipY}
         onClose={onClose}
+        zIndex={restProps.zIndex}
       />
     </>
   );

diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx
@@ -87,4 +87,14 @@ describe('Basic', () => {
     const maskElement = container.querySelector('.rc-image-mask');
     expect(maskElement).toHaveStyle({ display: 'none' });
   });
+  it('preview zIndex should pass into operations', () => {
+    const { baseElement } = render(
+      <Image
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        preview={{ zIndex: 9999, visible: true }}
+      />,
+    );
+    const operationsElement = baseElement.querySelector('.rc-image-preview-operations-wrapper');
+    expect(operationsElement).toHaveStyle({ zIndex: 9999 });
+  });
 });