Skip to content

Commit e71f1fd

Browse files
zombieJzombieJ
authored
refactor: Move semantic props (#404)
* test: fix test logic * chore: fix logic
1 parent 9d4b76c commit e71f1fd

File tree

5 files changed

+69
-52
lines changed

5 files changed

+69
-52
lines changed

‎src/Image.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@ import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
22
import classnames from 'classnames';
33
import * as React from 'react';
44
import { useContext, useMemo, useState } from 'react';
5-
import type {
6-
InternalPreviewConfig,
7-
InternalPreviewSemanticName,
8-
ToolbarRenderInfoType,
9-
} from './Preview';
5+
import type { InternalPreviewConfig, PreviewSemanticName, ToolbarRenderInfoType } from './Preview';
106
import Preview from './Preview';
117
import PreviewGroup from './PreviewGroup';
128
import { COMMON_PROPS } from './common';
@@ -25,8 +21,6 @@ export interface ImgInfo {
2521

2622
export interface PreviewConfig extends Omit<InternalPreviewConfig, 'countRender'> {
2723
cover?: React.ReactNode;
28-
classNames?: Partial<Record<PreviewSemanticName, string>>;
29-
styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
3024

3125
// Similar to InternalPreviewConfig but not have `current`
3226
imageRender?: (
@@ -43,9 +37,7 @@ export interface PreviewConfig extends Omit<InternalPreviewConfig, 'countRender'
4337
onOpenChange?: (open: boolean) => void;
4438
}
4539

46-
export type SemanticName = 'root' | 'image';
47-
48-
export type PreviewSemanticName = InternalPreviewSemanticName | 'cover';
40+
export type SemanticName = 'root' | 'image' | 'cover';
4941

5042
export interface ImageProps
5143
extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder' | 'onClick'> {
@@ -55,8 +47,16 @@ export interface ImageProps
5547

5648
// Styles
5749
rootClassName?: string;
58-
classNames?: Partial<Record<SemanticName, string>>;
59-
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
50+
classNames?: Partial<
51+
Record<SemanticName, string> & {
52+
popup?: Partial<Record<PreviewSemanticName, string>>;
53+
}
54+
>;
55+
styles?: Partial<
56+
Record<SemanticName, React.CSSProperties> & {
57+
popup?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
58+
}
59+
>;
6060

6161
// Image
6262
src?: string;
@@ -117,8 +117,6 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
117117
open: previewOpen,
118118
onOpenChange: onPreviewOpenChange,
119119
cover,
120-
classNames: previewClassNames = {},
121-
styles: previewStyles = {},
122120
rootClassName: previewRootClassName,
123121
...restProps
124122
}: PreviewConfig = preview && typeof preview === 'object' ? preview : {};
@@ -239,10 +237,10 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
239237
{/* Preview Click Mask */}
240238
{cover !== false && canPreview && (
241239
<div
242-
className={classnames(`${prefixCls}-cover`, previewClassNames.cover)}
240+
className={classnames(`${prefixCls}-cover`, classNames.cover)}
243241
style={{
244242
display: style?.display === 'none' ? 'none' : undefined,
245-
...previewStyles.cover,
243+
...styles.cover,
246244
}}
247245
>
248246
{cover}
@@ -261,10 +259,10 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
261259
imageInfo={{ width, height }}
262260
fallback={fallback}
263261
imgCommonProps={imgCommonProps}
264-
classNames={previewClassNames}
265-
styles={previewStyles}
266-
rootClassName={classnames(previewRootClassName, rootClassName)}
267262
{...restProps}
263+
classNames={classNames?.popup}
264+
styles={styles?.popup}
265+
rootClassName={classnames(previewRootClassName, rootClassName)}
268266
/>
269267
)}
270268
</>

‎src/Preview/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import PrevNext from './PrevNext';
1919

2020
// Note: if you want to add `action`,
2121
// pls contact @zombieJ or @thinkasany first.
22-
export type InternalPreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
22+
export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
2323

2424
export interface OperationIcons {
2525
rotateLeft?: React.ReactNode;
@@ -71,8 +71,6 @@ export interface InternalPreviewConfig {
7171
// Semantic
7272
/** Better to use `classNames.root` instead */
7373
rootClassName?: string;
74-
classNames?: Partial<Record<InternalPreviewSemanticName, string>>;
75-
styles?: Partial<Record<InternalPreviewSemanticName, React.CSSProperties>>;
7674

7775
// Image
7876
src?: string;
@@ -113,6 +111,9 @@ export interface PreviewProps extends InternalPreviewConfig {
113111
// Misc
114112
prefixCls: string;
115113

114+
classNames?: Partial<Record<PreviewSemanticName, string>>;
115+
styles?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
116+
116117
// Origin image Info
117118
imageInfo?: {
118119
width: number | string;

‎src/PreviewGroup.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
22
import * as React from 'react';
33
import { useState } from 'react';
44
import type { ImgInfo } from './Image';
5-
import type { InternalPreviewConfig, PreviewProps } from './Preview';
5+
import type { InternalPreviewConfig, PreviewProps, PreviewSemanticName } from './Preview';
66
import Preview from './Preview';
77
import { PreviewGroupContext } from './context';
88
import type { TransformType } from './hooks/useImageTransform';
@@ -20,17 +20,27 @@ export interface GroupPreviewConfig extends InternalPreviewConfig {
2020
onChange?: (current: number, prevCurrent: number) => void;
2121
}
2222

23-
export interface GroupConsumerProps {
23+
export interface PreviewGroupProps {
2424
previewPrefixCls?: string;
25+
classNames?: {
26+
popup?: Partial<Record<PreviewSemanticName, string>>;
27+
};
28+
29+
styles?: {
30+
popup?: Partial<Record<PreviewSemanticName, React.CSSProperties>>;
31+
};
32+
2533
icons?: PreviewProps['icons'];
2634
items?: (string | ImageElementProps)[];
2735
fallback?: string;
2836
preview?: boolean | GroupPreviewConfig;
2937
children?: React.ReactNode;
3038
}
3139

32-
const Group: React.FC<GroupConsumerProps> = ({
40+
const Group: React.FC<PreviewGroupProps> = ({
3341
previewPrefixCls = 'rc-image-preview',
42+
classNames,
43+
styles,
3444
children,
3545
icons = {},
3646
items,
@@ -132,6 +142,8 @@ const Group: React.FC<GroupConsumerProps> = ({
132142
count={mergedItems.length}
133143
onChange={onInternalChange}
134144
{...restProps}
145+
classNames={classNames?.popup}
146+
styles={styles?.popup}
135147
/>
136148
</PreviewGroupContext.Provider>
137149
);

‎src/hooks/usePreviewItems.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import type { GroupConsumerProps } from '../PreviewGroup';
2+
import type { PreviewGroupProps } from '../PreviewGroup';
33
import { COMMON_PROPS } from '../common';
44
import type {
55
ImageElementProps,
@@ -14,7 +14,7 @@ export type Items = Omit<InternalItem, 'canPreview'>[];
1414
* Merge props provided `items` or context collected images
1515
*/
1616
export default function usePreviewItems(
17-
items?: GroupConsumerProps['items'],
17+
items?: PreviewGroupProps['items'],
1818
): [items: Items, registerImage: RegisterImage, fromItems: boolean] {
1919
// Context collection image data
2020
const [images, setImages] = React.useState<Record<number, PreviewImageElementProps>>({});

‎tests/preview.test.tsx‎

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -609,11 +609,11 @@ describe('Preview', () => {
609609
render(
610610
<Image
611611
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
612+
classNames={{
613+
cover: 'bamboo',
614+
}}
612615
preview={{
613616
cover: 'Bamboo Is Light',
614-
classNames: {
615-
cover: 'bamboo',
616-
},
617617
}}
618618
/>,
619619
);
@@ -733,23 +733,25 @@ describe('Preview', () => {
733733
<Image
734734
src={src}
735735
rootClassName="both"
736-
classNames={{ root: 'image-root' }}
736+
classNames={{
737+
root: 'image-root',
738+
popup: {
739+
root: 'preview-root',
740+
},
741+
}}
737742
styles={{
738743
root: {
739744
color: 'red',
740745
},
741-
}}
742-
preview={{
743-
open: true,
744-
classNames: {
745-
root: 'preview-root',
746-
},
747-
styles: {
746+
popup: {
748747
root: {
749748
background: 'green',
750749
},
751750
},
752751
}}
752+
preview={{
753+
open: true,
754+
}}
753755
/>,
754756
);
755757

@@ -1073,26 +1075,30 @@ describe('Preview', () => {
10731075
it('support classnames and styles', () => {
10741076
const customClassnames = {
10751077
cover: 'custom-cover',
1076-
mask: 'custom-mask',
1077-
actions: 'custom-actions',
1078-
root: 'custom-root',
1078+
popup: {
1079+
mask: 'custom-mask',
1080+
actions: 'custom-actions',
1081+
root: 'custom-root',
1082+
},
10791083
};
10801084
const customStyles = {
10811085
cover: { color: 'red' },
1082-
mask: { color: 'red' },
1083-
actions: { backgroundColor: 'blue' },
1084-
root: { border: '1px solid green' },
1086+
popup: {
1087+
mask: { color: 'red' },
1088+
actions: { backgroundColor: 'blue' },
1089+
root: { border: '1px solid green' },
1090+
},
10851091
};
10861092
const { baseElement } = render(
10871093
<Image
10881094
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
10891095
preview={{
1090-
styles: customStyles,
1091-
classNames: customClassnames,
10921096
cover: 'Bamboo Is Light',
10931097
zIndex: 9999,
10941098
open: true,
10951099
}}
1100+
classNames={customClassnames}
1101+
styles={customStyles}
10961102
/>,
10971103
);
10981104

@@ -1101,11 +1107,11 @@ describe('Preview', () => {
11011107
const actions = baseElement.querySelector('.rc-image-preview-actions');
11021108
expect(cover).toHaveClass(customClassnames.cover);
11031109
expect(cover).toHaveStyle(customStyles.cover);
1104-
expect(mask).toHaveClass(customClassnames.mask);
1105-
expect(mask).toHaveStyle(customStyles.mask);
1106-
expect(actions).toHaveClass(customClassnames.actions);
1107-
expect(actions).toHaveStyle(customStyles.actions);
1108-
expect(baseElement.querySelector('.rc-image-preview')).toHaveClass(customClassnames.root);
1109-
expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.root);
1110+
expect(mask).toHaveClass(customClassnames.popup.mask);
1111+
expect(mask).toHaveStyle(customStyles.popup.mask);
1112+
expect(actions).toHaveClass(customClassnames.popup.actions);
1113+
expect(actions).toHaveStyle(customStyles.popup.actions);
1114+
expect(baseElement.querySelector('.rc-image-preview')).toHaveClass(customClassnames.popup.root);
1115+
expect(baseElement.querySelector('.rc-image-preview')).toHaveStyle(customStyles.popup.root);
11101116
});
11111117
});

0 commit comments

Comments
 (0)