Skip to content

Commit dd9ce73

Browse files
SevereCloudSevereCloud
committed
feat: use defineComponentDisplayNames
1 parent 5600092 commit dd9ce73

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+91
-191
lines changed

‎packages/vkui/src/components/Accordion/Accordion.tsx

+3-9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import * as React from 'react';
44
import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
5+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
56
import type { HasChildren } from '../../types';
67
import { AccordionContent } from './AccordionContent';
78
import { AccordionContext } from './AccordionContext';
@@ -69,13 +70,6 @@ Accordion.Summary = AccordionSummary;
6970
Accordion.Content = AccordionContent;
7071

7172
if (process.env.NODE_ENV !== 'production') {
72-
Accordion.Summary.displayName = 'Accordion.Summary';
73-
Object.defineProperty(Accordion.Summary, 'name', {
74-
value: 'Accordion.Summary',
75-
});
76-
77-
Accordion.Content.displayName = 'Accordion.Content';
78-
Object.defineProperty(Accordion.Content, 'name', {
79-
value: 'Accordion.Content',
80-
});
73+
defineComponentDisplayNames(Accordion.Summary, 'Accordion.Summary');
74+
defineComponentDisplayNames(Accordion.Content, 'Accordion.Content');
8175
}

‎packages/vkui/src/components/Accordion/AccordionContent.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ export interface AccordionContentProps
2525
HasRef<HTMLDivElement>,
2626
React.HTMLAttributes<HTMLDivElement> {}
2727

28-
export const AccordionContent: React.FC<AccordionContentProps> = ({
28+
export const AccordionContent = ({
2929
getRootRef,
3030
getRef,
3131
className,
3232
children,
3333
...restProps
34-
}) => {
34+
}: AccordionContentProps) => {
3535
const { expanded, labelId, contentId } = React.useContext(AccordionContext);
3636

3737
const inRef = useExternRef(getRef);

‎packages/vkui/src/components/Accordion/AccordionSummary.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'chevron'>
2222
iconPosition?: 'before' | 'after';
2323
}
2424

25-
export const AccordionSummary: React.FC<AccordionSummaryProps> = ({
25+
export const AccordionSummary = ({
2626
after,
2727
before,
2828
ExpandIcon = Icon24ChevronDown,

‎packages/vkui/src/components/Avatar/Avatar.tsx

+4-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { classNames } from '@vkontakte/vkjs';
2+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
23
import { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';
34
import {
45
ImageBaseOverlay,
@@ -133,18 +134,7 @@ Avatar.Overlay = ImageBaseOverlay;
133134
Avatar.getInitialsFontSize = getInitialsFontSize;
134135

135136
if (process.env.NODE_ENV !== 'production') {
136-
Avatar.Badge.displayName = 'Avatar.Badge';
137-
Object.defineProperty(Avatar.Badge, 'name', {
138-
value: 'Avatar.Badge',
139-
});
140-
141-
Avatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
142-
Object.defineProperty(Avatar.BadgeWithPreset, 'name', {
143-
value: 'Avatar.BadgeWithPreset',
144-
});
145-
146-
Avatar.Overlay.displayName = 'Avatar.Overlay';
147-
Object.defineProperty(Avatar.Overlay, 'name', {
148-
value: 'Avatar.Overlay',
149-
});
137+
defineComponentDisplayNames(Avatar.Badge, 'Avatar.Badge');
138+
defineComponentDisplayNames(Avatar.BadgeWithPreset, 'Avatar.BadgeWithPreset');
139+
defineComponentDisplayNames(Avatar.Overlay, 'Avatar.Overlay');
150140
}

‎packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadge.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@ import styles from './AvatarBadge.module.css';
77

88
export type AvatarBadgeProps = ImageBaseBadgeProps;
99

10-
export const AvatarBadge: React.FC<AvatarBadgeProps> = ({
11-
className,
12-
...restProps
13-
}: AvatarBadgeProps) => {
10+
export const AvatarBadge = ({ className, ...restProps }: AvatarBadgeProps) => {
1411
const { size } = React.useContext(ImageBaseContext);
1512
return (
1613
<ImageBase.Badge

‎packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface AvatarBadgeWithPresetProps
2222
preset?: 'online' | 'online-mobile';
2323
}
2424

25-
export const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({
25+
export const AvatarBadgeWithPreset = ({
2626
preset = 'online',
2727
className,
2828
...restProps

‎packages/vkui/src/components/CalendarDay/CalendarDay.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import * as React from 'react';
44
import { classNames } from '@vkontakte/vkjs';
55
import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';
6+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
67
import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
78
import { Tappable } from '../Tappable/Tappable';
89
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -42,7 +43,8 @@ export interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTe
4243
renderDayContent?: (day: Date) => React.ReactNode;
4344
}
4445

45-
export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
46+
// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
47+
export const CalendarDay = React.memo(
4648
({
4749
day,
4850
today,
@@ -153,8 +155,5 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
153155
);
154156

155157
if (process.env.NODE_ENV !== 'production') {
156-
CalendarDay.displayName = 'CalendarDay';
157-
Object.defineProperty(CalendarDay, 'name', {
158-
value: 'CalendarDay',
159-
});
158+
defineComponentDisplayNames(CalendarDay, 'CalendarDay');
160159
}

‎packages/vkui/src/components/CarouselBase/Bullets.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import { classNames } from '@vkontakte/vkjs';
32
import { type BaseGalleryProps } from './types';
43
import styles from './CarouselBase.module.css';
@@ -21,7 +20,7 @@ const stylesBullets = {
2120
light: styles.bulletsLight,
2221
};
2322

24-
export const Bullets: React.FC<BulletsProps> = ({ bullets, slideIndex, count, bulletTestId }) => {
23+
export const Bullets = ({ bullets, slideIndex, count, bulletTestId }: BulletsProps) => {
2524
return (
2625
<div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>
2726
{Array.from({ length: count }).map((_, index) => (

‎packages/vkui/src/components/CarouselBase/CarouselViewPort.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ type GalleryViewPortProps = Pick<BaseGalleryProps, 'slideWidth' | 'slideTestId'>
1616
layerRef?: React.Ref<HTMLDivElement>;
1717
};
1818

19-
export const CarouselViewPort: React.FC<GalleryViewPortProps> = ({
19+
export const CarouselViewPort = ({
2020
slideTestId,
2121
slideWidth,
2222
onStart,
@@ -26,7 +26,7 @@ export const CarouselViewPort: React.FC<GalleryViewPortProps> = ({
2626
layerRef,
2727
children,
2828
setSlideRef,
29-
}) => {
29+
}: GalleryViewPortProps) => {
3030
return (
3131
<Touch
3232
className={styles.viewport}

‎packages/vkui/src/components/CarouselBase/ScrollArrows.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ interface ScrollArrowsProps
4343
onSlideRight: (e: React.MouseEvent) => void;
4444
}
4545

46-
export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
46+
export const ScrollArrows = ({
4747
hasPointer,
4848
canSlideLeft,
4949
canSlideRight,
@@ -54,7 +54,7 @@ export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
5454
arrowAreaHeight = 'stretch',
5555
nextArrowTestId,
5656
prevArrowTestId,
57-
}) => {
57+
}: ScrollArrowsProps) => {
5858
return showArrows && hasPointer ? (
5959
<>
6060
{canSlideLeft && (

‎packages/vkui/src/components/CellButtonGroup/CellButtonGroup.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
23
import { type HTMLAttributesWithRootRef } from '../../types';
34
import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
45
import { CellButtonGroupSeparator } from './CellButtonGroupSeparator/CellButtonGroupSeparator';
@@ -17,8 +18,5 @@ export const CellButtonGroup = (props: CellButtonGroupProps): React.ReactNode =>
1718
CellButtonGroup.Separator = CellButtonGroupSeparator;
1819

1920
if (process.env.NODE_ENV !== 'production') {
20-
CellButtonGroup.Separator.displayName = 'CellButtonGroup.Separator';
21-
Object.defineProperty(CellButtonGroup.Separator, 'name', {
22-
value: 'CellButtonGroup.Separator',
23-
});
21+
defineComponentDisplayNames(CellButtonGroup.Separator, 'CellButtonGroup.Separator');
2422
}

‎packages/vkui/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import styles from './CellButtonGroupSeparator.module.css';
44

55
type CellButtonGroupSeparatorProps = Omit<SeparatorProps, 'direction' | 'padding'>;
66

7-
export const CellButtonGroupSeparator: React.FC<CellButtonGroupSeparatorProps> = ({
7+
export const CellButtonGroupSeparator = ({
88
className,
99
...restProps
10-
}) => {
10+
}: CellButtonGroupSeparatorProps) => {
1111
return (
1212
<Separator
1313
className={classNames(styles.root, className)}

‎packages/vkui/src/components/ContentBadge/ContentBadge.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import { classNames } from '@vkontakte/vkjs';
3+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
34
import type { HTMLAttributesWithRootRef } from '../../types';
45
import { Caption } from '../Typography/Caption/Caption';
56
import { Footnote } from '../Typography/Footnote/Footnote';
@@ -121,8 +122,5 @@ export const ContentBadge: React.FC<ContentBadgeProps> & {
121122
ContentBadge.SlotIcon = ContentBadgeSlotIcon;
122123

123124
if (process.env.NODE_ENV !== 'production') {
124-
ContentBadge.SlotIcon.displayName = 'ContentBadge.SlotIcon';
125-
Object.defineProperty(ContentBadge.SlotIcon, 'name', {
126-
value: 'ContentBadge.SlotIcon',
127-
});
125+
defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');
128126
}

‎packages/vkui/src/components/ContentBadge/ContentBadgeSlotIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const singleIconClassNames = {
1818

1919
export type ContentBadgeSlotIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
2020

21-
export const ContentBadgeSlotIcon: React.FC<ContentBadgeSlotIconProps> = ({
21+
export const ContentBadgeSlotIcon = ({
2222
className,
2323
getRootRef,
2424
children,

‎packages/vkui/src/components/DropZone/DropZone.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import * as React from 'react';
44
import { classNames } from '@vkontakte/vkjs';
55
import { callMultiple } from '../../lib/callMultiple';
6+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
67
import type { HTMLAttributesWithRootRef } from '../../types';
78
import { RootComponent } from '../RootComponent/RootComponent';
89
import { DropZoneGrid } from './components/DropZoneGrid';
@@ -56,8 +57,5 @@ export const DropZone: React.FC<DropZoneProps> & {
5657
DropZone.Grid = DropZoneGrid;
5758

5859
if (process.env.NODE_ENV !== 'production') {
59-
DropZone.Grid.displayName = 'DropZone.Grid';
60-
Object.defineProperty(DropZone.Grid, 'name', {
61-
value: 'DropZone.Grid',
62-
});
60+
defineComponentDisplayNames(DropZone.Grid, 'DropZone.Grid');
6361
}

‎packages/vkui/src/components/DropZone/components/DropZoneGrid.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@ export interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElem
1212
direction?: 'row' | 'column';
1313
}
1414

15-
export const DropZoneGrid: React.FC<DropZoneGridProps> = ({
16-
direction = 'column',
17-
...props
18-
}: DropZoneGridProps) => (
15+
export const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (
1916
<RootComponent baseClassName={classNames(styles.host, directionStyle[direction])} {...props} />
2017
);

‎packages/vkui/src/components/FormItem/FormItem.tsx

+4-14
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as React from 'react';
44
import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
55
import { useAdaptivity } from '../../hooks/useAdaptivity';
66
import { useExternRef } from '../../hooks/useExternRef';
7+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
78
import type { HasComponent, HasRootRef } from '../../types';
89
import { Removable, type RemovableProps } from '../Removable/Removable';
910
import { RootComponent } from '../RootComponent/RootComponent';
@@ -164,18 +165,7 @@ FormItem.TopLabel = FormItemTopLabel;
164165
FormItem.TopAside = FormItemTopAside;
165166

166167
if (process.env.NODE_ENV !== 'production') {
167-
FormItem.Top.displayName = 'FormItem.Top';
168-
Object.defineProperty(FormItem.Top, 'name', {
169-
value: 'FormItem.Top',
170-
});
171-
172-
FormItem.TopLabel.displayName = 'FormItem.TopLabel';
173-
Object.defineProperty(FormItem.TopLabel, 'name', {
174-
value: 'FormItem.TopLabel',
175-
});
176-
177-
FormItem.TopAside.displayName = 'FormItem.TopAside';
178-
Object.defineProperty(FormItem.TopAside, 'name', {
179-
value: 'FormItem.TopAside',
180-
});
168+
defineComponentDisplayNames(FormItem.Top, 'FormItem.Top');
169+
defineComponentDisplayNames(FormItem.TopLabel, 'FormItem.TopLabel');
170+
defineComponentDisplayNames(FormItem.TopAside, 'FormItem.TopAside');
181171
}

‎packages/vkui/src/components/FormItem/FormItemTop/FormItemTop.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ export interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivEleme
1010
* @since 6.1.0
1111
*
1212
*/
13-
export const FormItemTop: React.FC<FormItemTopProps> = (props: FormItemTopProps) => (
13+
export const FormItemTop = (props: FormItemTopProps) => (
1414
<RootComponent {...props} baseClassName={styles.top} />
1515
);

‎packages/vkui/src/components/FormItem/FormItemTop/FormItemTopAside.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@ export interface FormItemTopAsideProps
1414
* @since 6.1.0
1515
*
1616
*/
17-
export const FormItemTopAside: React.FC<FormItemTopAsideProps> = ({
18-
children,
19-
...restProps
20-
}: FormItemTopAsideProps) => {
17+
export const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {
2118
return (
2219
<Subhead className={styles.aside} {...restProps}>
2320
{children}

‎packages/vkui/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface FormItemTopLabelProps
1919
* @since 6.1.0
2020
*
2121
*/
22-
export const FormItemTopLabel: React.FC<FormItemTopLabelProps> = ({
22+
export const FormItemTopLabel = ({
2323
children,
2424
Component: componentProp,
2525
htmlFor,

‎packages/vkui/src/components/Group/Group.tsx

+5-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import { hasReactNode } from '@vkontakte/vkjs';
3+
import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
34
import { GroupContainer, type GroupContainerProps } from './GroupContainer';
45
import { GroupDescription } from './GroupDescription';
56
import { GroupExpandedContent } from './GroupExpandedContent';
@@ -34,23 +35,8 @@ Group.Description = GroupDescription;
3435
Group.ExpandedContent = GroupExpandedContent;
3536

3637
if (process.env.NODE_ENV !== 'production') {
37-
Group.Container.displayName = 'Group.Container';
38-
Object.defineProperty(Group.Container, 'name', {
39-
value: 'Group.Container',
40-
});
41-
42-
Group.Header.displayName = 'Group.Header';
43-
Object.defineProperty(Group.Header, 'name', {
44-
value: 'Group.Header',
45-
});
46-
47-
Group.Description.displayName = 'Group.Description';
48-
Object.defineProperty(Group.Description, 'name', {
49-
value: 'Group.Description',
50-
});
51-
52-
Group.ExpandedContent.displayName = 'Group.ExpandedContent';
53-
Object.defineProperty(Group.ExpandedContent, 'name', {
54-
value: 'Group.ExpandedContent',
55-
});
38+
defineComponentDisplayNames(Group.Container, 'Group.Container');
39+
defineComponentDisplayNames(Group.Header, 'Group.Header');
40+
defineComponentDisplayNames(Group.Description, 'Group.Description');
41+
defineComponentDisplayNames(Group.ExpandedContent, 'Group.ExpandedContent');
5642
}

‎packages/vkui/src/components/Group/GroupContainer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &
8282

8383
const warn = warnOnce('Group');
8484

85-
export const GroupContainer: React.FC<GroupContainerProps> = ({
85+
export const GroupContainer = ({
8686
children,
8787
separator = 'auto',
8888
mode: modeProps,

‎packages/vkui/src/components/Group/GroupDescription.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
import * as React from 'react';
21
import { classNames } from '@vkontakte/vkjs';
32
import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
43
import { Footnote } from '../Typography/Footnote/Footnote';
54
import styles from './Group.module.css';
65

76
export type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
8-
export const GroupDescription: React.FC<GroupDescriptionProps> = ({
9-
className,
10-
...restProps
11-
}: GroupDescriptionProps): React.ReactNode => (
7+
8+
export const GroupDescription = ({ className, ...restProps }: GroupDescriptionProps) => (
129
<Footnote className={classNames(className, styles.description)} {...restProps} />
1310
);

‎packages/vkui/src/components/Group/GroupExpandedContent.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import * as React from 'react';
21
import { classNames } from '@vkontakte/vkjs';
32
import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
43
import { RootComponent } from '../RootComponent/RootComponent';
@@ -13,7 +12,7 @@ export type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &
1312
HasComponent & {
1413
direction?: 'inline' | 'block';
1514
};
16-
export const GroupExpandedContent: React.FC<GroupExpandedContentProps> = ({
15+
export const GroupExpandedContent = ({
1716
direction = 'inline',
1817
...restProps
1918
}: GroupExpandedContentProps) => {

0 commit comments

Comments
 (0)