feat: add rootClassName api (#116)

* feat: add rootClassName api * feat: add test case
react-component · Mar 18, 2022 · eb1bac8 · eb1bac8 · vercel · Mar 18, 2022
1 parent 859c98b
commit eb1bac8
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.11.2",
     "classnames": "^2.2.6",
-    "rc-dialog": "~8.6.0",
+    "rc-dialog": "~8.7.0",
     "rc-util": "^5.0.6"
   },
   "devDependencies": {

diff --git a/src/Image.tsx b/src/Image.tsx
@@ -3,10 +3,11 @@ import { useState } from 'react';
 import cn from 'classnames';
 import { getOffset } from 'rc-util/lib/Dom/css';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import { GetContainer } from 'rc-util/lib/PortalWrapper';
-import Preview, { PreviewProps } from './Preview';
+import type { GetContainer } from 'rc-util/lib/PortalWrapper';
+import type { PreviewProps } from './Preview';
+import Preview from './Preview';
 import PreviewGroup, { context } from './PreviewGroup';
-import { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
+import type { IDialogPropTypes } from 'rc-dialog/lib/IDialogPropTypes';
 
 export interface ImagePreviewType
   extends Omit<
@@ -34,6 +35,7 @@ export interface ImageProps
   previewPrefixCls?: string;
   placeholder?: React.ReactNode;
   fallback?: string;
+  rootClassName?: string;
   preview?: boolean | ImagePreviewType;
   /**
    * @deprecated since version 3.2.1
@@ -66,6 +68,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
   onError: onImageError,
   wrapperClassName,
   wrapperStyle,
+  rootClassName,
 
   // Img
   crossOrigin,
@@ -190,7 +193,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
     }
   }, [imgSrc]);
 
-  const wrapperClass = cn(prefixCls, wrapperClassName, {
+  const wrapperClass = cn(prefixCls, wrapperClassName, rootClassName, {
     [`${prefixCls}-error`]: isError,
   });
 
@@ -261,6 +264,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = ({
           alt={alt}
           getContainer={getPreviewContainer}
           icons={icons}
+          rootClassName={rootClassName}
           {...dialogProps}
         />
       )}

diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Dialog, { DialogProps as IDialogPropTypes } from 'rc-dialog';
+import type { DialogProps as IDialogPropTypes } from 'rc-dialog';
+import Dialog from 'rc-dialog';
 import classnames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import { warning } from 'rc-util/lib/warning';
@@ -13,6 +14,7 @@ export interface PreviewProps extends Omit<IDialogPropTypes, 'onClose'> {
   onClose?: (e: React.SyntheticEvent<Element>) => void;
   src?: string;
   alt?: string;
+  rootClassName?: string;
   icons?: {
     rotateLeft?: React.ReactNode;
     rotateRight?: React.ReactNode;
@@ -30,7 +32,17 @@ const initialPosition = {
 };
 
 const Preview: React.FC<PreviewProps> = props => {
-  const { prefixCls, src, alt, onClose, afterClose, visible, icons = {}, ...restProps } = props;
+  const {
+    prefixCls,
+    src,
+    alt,
+    onClose,
+    afterClose,
+    visible,
+    icons = {},
+    rootClassName,
+    ...restProps
+  } = props;
   const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = icons;
   const [scale, setScale] = useState(1);
   const [rotate, setRotate] = useState(0);
@@ -243,6 +255,7 @@ const Preview: React.FC<PreviewProps> = props => {
       afterClose={onAfterClose}
       visible={visible}
       wrapClassName={wrapClassName}
+      rootClassName={rootClassName}
       {...restProps}
     >
       <ul className={`${prefixCls}-operations`}>

diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useState } from 'react';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import { ImagePreviewType } from './Image';
-import Preview, { PreviewProps } from './Preview';
+import type { ImagePreviewType } from './Image';
+import type { PreviewProps } from './Preview';
+import Preview from './Preview';
 
 export interface PreviewGroupPreview
   extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName'> {
@@ -33,6 +34,7 @@ export interface GroupConsumerValue extends GroupConsumerProps {
   setShowPreview: React.Dispatch<React.SetStateAction<boolean>>;
   setMousePosition: React.Dispatch<React.SetStateAction<null | { x: number; y: number }>>;
   registerImage: (id: number, url: string, canPreview?: boolean) => () => void;
+  rootClassName?: string;
 }
 
 /* istanbul ignore next */
@@ -44,6 +46,7 @@ export const context = React.createContext<GroupConsumerValue>({
   setShowPreview: () => null,
   setMousePosition: () => null,
   registerImage: () => () => null,
+  rootClassName: '',
 });
 
 const { Provider } = context;

diff --git a/tests/__snapshots__/preview.test.tsx.snap b/tests/__snapshots__/preview.test.tsx.snap
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preview add rootClassName should be correct 1`] = `
+<div
+  class="rc-image custom-className"
+>
+  <img
+    class="rc-image-img"
+    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+  />
+</div>
+`;
+
+exports[`Preview add rootClassName should be correct when open preview 1`] = `
+Array [
+  <div
+    class="rc-image custom-className"
+  >
+    <img
+      class="rc-image-img"
+      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    />
+  </div>,
+  <div
+    class="rc-image-preview-root custom-className"
+  >
+    <div
+      class="rc-image-preview-mask"
+    />
+    <div
+      class="rc-image-preview-wrap"
+      role="dialog"
+      tabindex="-1"
+    >
+      <div
+        class="rc-image-preview"
+        role="document"
+      >
+        <div
+          aria-hidden="true"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+          tabindex="0"
+        />
+        <div
+          class="rc-image-preview-content"
+        >
+          <div
+            class="rc-image-preview-body"
+          >
+            <ul
+              class="rc-image-preview-operations"
+            >
+              <li
+                class="rc-image-preview-operations-operation"
+              />
+              <li
+                class="rc-image-preview-operations-operation"
+              />
+              <li
+                class="rc-image-preview-operations-operation rc-image-preview-operations-operation-disabled"
+              />
+              <li
+                class="rc-image-preview-operations-operation"
+              />
+              <li
+                class="rc-image-preview-operations-operation"
+              />
+            </ul>
+            <div
+              class="rc-image-preview-img-wrapper"
+              style="transform: translate3d(0px, 0px, 0);"
+            >
+              <img
+                class="rc-image-preview-img"
+                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                style="transform: scale3d(1, 1, 1) rotate(0deg);"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
@@ -481,6 +481,42 @@ describe('Preview', () => {
     expect(wrapper.find('Preview').prop('maskTransitionName')).toBe('def');
   });
 
+  it('add rootClassName should be correct', () => {
+    const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+    const wrapper = mount(<Image src={src} rootClassName="custom-className" />);
+
+    expect(wrapper.find('.custom-className').length).toBe(1);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  it('add rootClassName should be correct when open preview', () => {
+    const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+    const previewSrc =
+      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
+
+    const wrapper = mount(
+      <Image src={src} preview={{ src: previewSrc }} rootClassName="custom-className" />,
+    );
+    expect(wrapper.find('.rc-image.custom-className .rc-image-img').prop('src')).toBe(src);
+    expect(wrapper.find('.rc-image-preview-root.custom-className').get(0)).toBeFalsy();
+
+    act(() => {
+      wrapper.find('.rc-image').simulate('click');
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper.find('.rc-image-preview-root.custom-className .rc-image-preview').get(0),
+    ).toBeTruthy();
+    expect(wrapper.find('.rc-image-preview-root.custom-className').get(0)).toBeTruthy();
+    expect(
+      wrapper.find('.rc-image-preview-root.custom-className .rc-image-preview-img').prop('src'),
+    ).toBe(previewSrc);
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
   it('if async src set should be correct', () => {
     const src =
       'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ';