fix: component.displayName To distinguish the environment (ant-design…

…#36126)

Co-authored-by: afc163 <[email protected]>

components/avatar/avatar.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import { composeRef } from 'rc-util/lib/ref';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import warning from '../_util/warning';
+import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { Breakpoint } from '../_util/responsiveObserve';
 import { responsiveArray } from '../_util/responsiveObserve';
-import useBreakpoint from '../grid/hooks/useBreakpoint';
+import warning from '../_util/warning';
 import type { AvatarSize } from './SizeContext';
 import SizeContext from './SizeContext';
 
@@ -238,7 +238,9 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
 };
 
 const Avatar = React.forwardRef<unknown, AvatarProps>(InternalAvatar);
-Avatar.displayName = 'Avatar';
+if (process.env.NODE_ENV !== 'production') {
+  Avatar.displayName = 'Avatar';
+}
 
 Avatar.defaultProps = {
   shape: 'circle' as AvatarProps['shape'],

components/button/button.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable react/button-has-type */
-import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
+import * as React from 'react';
 
-import Group, { GroupSizeContext } from './button-group';
 import { ConfigContext } from '../config-provider';
-import Wave from '../_util/wave';
-import { tuple } from '../_util/type';
-import warning from '../_util/warning';
+import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
-import DisabledContext from '../config-provider/DisabledContext';
-import LoadingIcon from './LoadingIcon';
 import { cloneElement } from '../_util/reactNode';
+import { tuple } from '../_util/type';
+import warning from '../_util/warning';
+import Wave from '../_util/wave';
+import Group, { GroupSizeContext } from './button-group';
+import LoadingIcon from './LoadingIcon';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -310,8 +310,9 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 };
 
 const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
-
-Button.displayName = 'Button';
+if (process.env.NODE_ENV !== 'production') {
+  Button.displayName = 'Button';
+}
 
 Button.Group = Group;
 Button.__ANT_BUTTON = true;

components/cascader/index.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import RightOutlined from '@ant-design/icons/RightOutlined';
 import classNames from 'classnames';
-import RcCascader from 'rc-cascader';
 import type {
-  SingleCascaderProps as RcSingleCascaderProps,
-  MultipleCascaderProps as RcMultipleCascaderProps,
-  ShowSearchType,
-  FieldNames,
   BaseOptionType,
   DefaultOptionType,
+  FieldNames,
+  MultipleCascaderProps as RcMultipleCascaderProps,
+  ShowSearchType,
+  SingleCascaderProps as RcSingleCascaderProps,
 } from 'rc-cascader';
+import RcCascader from 'rc-cascader';
 import omit from 'rc-util/lib/omit';
-import RightOutlined from '@ant-design/icons/RightOutlined';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
-import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import * as React from 'react';
 import { useContext } from 'react';
-import warning from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DisabledContext from '../config-provider/DisabledContext';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
-import DisabledContext from '../config-provider/DisabledContext';
+import { FormItemInputContext } from '../form/context';
 import getIcons from '../select/utils/iconUtil';
 import type { SelectCommonPlacement } from '../_util/motion';
-import { getTransitionName, getTransitionDirection } from '../_util/motion';
-import { FormItemInputContext } from '../form/context';
+import { getTransitionDirection, getTransitionName } from '../_util/motion';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
+import warning from '../_util/warning';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -308,8 +308,9 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   SHOW_PARENT: typeof SHOW_PARENT;
   SHOW_CHILD: typeof SHOW_CHILD;
 };
-
-Cascader.displayName = 'Cascader';
+if (process.env.NODE_ENV !== 'production') {
+  Cascader.displayName = 'Cascader';
+}
 Cascader.SHOW_PARENT = SHOW_PARENT;
 Cascader.SHOW_CHILD = SHOW_CHILD;
 

components/checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import RcCheckbox from 'rc-checkbox';
+import * as React from 'react';
 import { useContext } from 'react';
-import { FormItemInputContext } from '../form/context';
-import { GroupContext } from './Group';
 import { ConfigContext } from '../config-provider';
+import { FormItemInputContext } from '../form/context';
 import warning from '../_util/warning';
+import { GroupContext } from './Group';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -136,7 +136,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
 };
 
 const Checkbox = React.forwardRef<unknown, CheckboxProps>(InternalCheckbox);
-
-Checkbox.displayName = 'Checkbox';
+if (process.env.NODE_ENV !== 'production') {
+  Checkbox.displayName = 'Checkbox';
+}
 
 export default Checkbox;

components/config-provider/context.tsx

@@ -104,8 +104,9 @@ export function withConfigConsumer<ExportProps extends BasicExportProps>(config:
     const cons: ConstructorProps = Component.constructor as ConstructorProps;
     const name = (cons && cons.displayName) || Component.name || 'Component';
 
-    SFC.displayName = `withConfigConsumer(${name})`;
-
+    if (process.env.NODE_ENV !== 'production') {
+      SFC.displayName = `withConfigConsumer(${name})`;
+    }
     return SFC;
   };
 }

components/drawer/index.tsx

@@ -330,7 +330,8 @@ const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
     );
   },
 );
-
-Drawer.displayName = 'Drawer';
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
+}
 
 export default Drawer;

components/grid/col.tsx

@@ -134,6 +134,8 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
   );
 });
 
-Col.displayName = 'Col';
+if (process.env.NODE_ENV !== 'production') {
+  Col.displayName = 'Col';
+}
 
 export default Col;

components/grid/row.tsx

@@ -131,6 +131,8 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   );
 });
 
-Row.displayName = 'Row';
+if (process.env.NODE_ENV !== 'production') {
+  Row.displayName = 'Row';
+}
 
 export default Row;

components/input/Password.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
+import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import EyeOutlined from '@ant-design/icons/EyeOutlined';
-import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
+import * as React from 'react';
 
 import { useState } from 'react';
-import type { InputRef, InputProps } from './Input';
-import Input from './Input';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigConsumer } from '../config-provider';
+import type { InputProps, InputRef } from './Input';
+import Input from './Input';
 
 export interface PasswordProps extends InputProps {
   readonly inputPrefixCls?: string;
@@ -98,6 +98,8 @@ Password.defaultProps = {
   iconRender: (visible: boolean) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />),
 };
 
-Password.displayName = 'Password';
+if (process.env.NODE_ENV !== 'production') {
+  Password.displayName = 'Password';
+}
 
 export default Password;

components/input/Search.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
-import SearchOutlined from '@ant-design/icons/SearchOutlined';
-import type { InputProps, InputRef } from './Input';
-import Input from './Input';
+import * as React from 'react';
 import Button from '../button';
-import SizeContext from '../config-provider/SizeContext';
 import { ConfigContext } from '../config-provider';
+import SizeContext from '../config-provider/SizeContext';
 import { cloneElement } from '../_util/reactNode';
+import type { InputProps, InputRef } from './Input';
+import Input from './Input';
 
 export interface SearchProps extends InputProps {
   inputPrefixCls?: string;
@@ -165,7 +165,8 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
     />
   );
 });
-
-Search.displayName = 'Search';
+if (process.env.NODE_ENV !== 'production') {
+  Search.displayName = 'Search';
+}
 
 export default Search;

components/layout/Sider.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { useContext, useRef, useState, useEffect } from 'react';
-import classNames from 'classnames';
-import omit from 'rc-util/lib/omit';
 import BarsOutlined from '@ant-design/icons/BarsOutlined';
-import RightOutlined from '@ant-design/icons/RightOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import RightOutlined from '@ant-design/icons/RightOutlined';
+import classNames from 'classnames';
+import omit from 'rc-util/lib/omit';
+import * as React from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
-import { LayoutContext } from './layout';
 import { ConfigContext } from '../config-provider';
 import isNumeric from '../_util/isNumeric';
+import { LayoutContext } from './layout';
 
 const dimensionMaxMap = {
   xs: '479.98px',
@@ -225,6 +225,8 @@ const Sider = React.forwardRef<HTMLDivElement, SiderProps>(
   },
 );
 
-Sider.displayName = 'Sider';
+if (process.env.NODE_ENV !== 'production') {
+  Sider.displayName = 'Sider';
+}
 
 export default Sider;

components/layout/layout.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
 export interface GeneratorProps {
@@ -38,7 +38,9 @@ function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
 
       return <BasicComponent ref={ref} prefixCls={prefixCls} tagName={tagName} {...props} />;
     });
-    Adapter.displayName = displayName;
+    if (process.env.NODE_ENV !== 'production') {
+      Adapter.displayName = displayName;
+    }
     return Adapter;
   };
 }

components/mentions/index.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import RcMentions from 'rc-mentions';
 import type { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
 import { composeRef } from 'rc-util/lib/ref';
-import Spin from '../spin';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
+import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import { FormItemInputContext } from '../form/context';
+import Spin from '../spin';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
-import defaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 
 export const { Option } = RcMentions;
 
@@ -164,7 +164,9 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
 };
 
 const Mentions = React.forwardRef<unknown, MentionProps>(InternalMentions) as CompoundedComponent;
-Mentions.displayName = 'Mentions';
+if (process.env.NODE_ENV !== 'production') {
+  Mentions.displayName = 'Mentions';
+}
 Mentions.Option = Option;
 
 Mentions.getMentions = (value: string = '', config: MentionsConfig = {}): MentionsEntity[] => {

components/popover/index.tsx

@@ -42,7 +42,9 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
   },
 );
 
-Popover.displayName = 'Popover';
+if (process.env.NODE_ENV !== 'production') {
+  Popover.displayName = 'Popover';
+}
 
 Popover.defaultProps = {
   placement: 'top' as TooltipPlacement,

components/radio/radio.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import RcCheckbox from 'rc-checkbox';
 import classNames from 'classnames';
+import RcCheckbox from 'rc-checkbox';
 import { composeRef } from 'rc-util/lib/ref';
+import * as React from 'react';
 import { useContext } from 'react';
-import { FormItemInputContext } from '../form/context';
-import type { RadioProps, RadioChangeEvent } from './interface';
 import { ConfigContext } from '../config-provider';
-import RadioGroupContext, { RadioOptionTypeContext } from './context';
 import DisabledContext from '../config-provider/DisabledContext';
+import { FormItemInputContext } from '../form/context';
 import warning from '../_util/warning';
+import RadioGroupContext, { RadioOptionTypeContext } from './context';
+import type { RadioChangeEvent, RadioProps } from './interface';
 
 const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (props, ref) => {
   const groupContext = React.useContext(RadioGroupContext);
@@ -79,6 +79,8 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
 
 const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
 
-Radio.displayName = 'Radio';
+if (process.env.NODE_ENV !== 'production') {
+  Radio.displayName = 'Radio';
+}
 
 export default Radio;

components/rate/index.tsx

@@ -33,7 +33,9 @@ const Rate = React.forwardRef<unknown, RateProps>(({ prefixCls, tooltips, ...pro
   );
 });
 
-Rate.displayName = 'Rate';
+if (process.env.NODE_ENV !== 'production') {
+  Rate.displayName = 'Rate';
+}
 
 Rate.defaultProps = {
   character: <StarFilled />,