From eb1bac8204fc451c199734956ff39047388401b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Fri, 18 Mar 2022 22:40:47 +0800 Subject: [PATCH] feat: add rootClassName api (#116) * feat: add rootClassName api * feat: add test case --- package.json | 2 +- src/Image.tsx | 12 ++- src/Preview.tsx | 17 ++++- src/PreviewGroup.tsx | 7 +- tests/__snapshots__/preview.test.tsx.snap | 90 +++++++++++++++++++++++ tests/preview.test.tsx | 36 +++++++++ 6 files changed, 155 insertions(+), 9 deletions(-) create mode 100644 tests/__snapshots__/preview.test.tsx.snap diff --git a/package.json b/package.json index e0d156cc..f5ffc1f7 100644 --- 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 index 24648ca1..f35d5a0b 100644 --- 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 = ({ onError: onImageError, wrapperClassName, wrapperStyle, + rootClassName, // Img crossOrigin, @@ -190,7 +193,7 @@ const ImageInternal: CompoundedComponent = ({ } }, [imgSrc]); - const wrapperClass = cn(prefixCls, wrapperClassName, { + const wrapperClass = cn(prefixCls, wrapperClassName, rootClassName, { [`${prefixCls}-error`]: isError, }); @@ -261,6 +264,7 @@ const ImageInternal: CompoundedComponent = ({ alt={alt} getContainer={getPreviewContainer} icons={icons} + rootClassName={rootClassName} {...dialogProps} /> )} diff --git a/src/Preview.tsx b/src/Preview.tsx index 986f320f..8c92e4b1 100644 --- 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 { onClose?: (e: React.SyntheticEvent) => void; src?: string; alt?: string; + rootClassName?: string; icons?: { rotateLeft?: React.ReactNode; rotateRight?: React.ReactNode; @@ -30,7 +32,17 @@ const initialPosition = { }; const Preview: React.FC = 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 = props => { afterClose={onAfterClose} visible={visible} wrapClassName={wrapClassName} + rootClassName={rootClassName} {...restProps} >
    diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx index ee425b07..c6a34a99 100644 --- 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 { @@ -33,6 +34,7 @@ export interface GroupConsumerValue extends GroupConsumerProps { setShowPreview: React.Dispatch>; setMousePosition: React.Dispatch>; registerImage: (id: number, url: string, canPreview?: boolean) => () => void; + rootClassName?: string; } /* istanbul ignore next */ @@ -44,6 +46,7 @@ export const context = React.createContext({ 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 new file mode 100644 index 00000000..0eb402d8 --- /dev/null +++ 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`] = ` +
    + +
    +`; + +exports[`Preview add rootClassName should be correct when open preview 1`] = ` +Array [ +
    + +
    , +
    +
    +