fix: component.displayName To distinguish the environment (#36126)

Co-authored-by: afc163 <afc163@gmail.com>

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 * as React from 'react';
+import Button from '../button';
+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';
-import Button from '../button';
-import SizeContext from '../config-provider/SizeContext';
-import { ConfigContext } from '../config-provider';
-import { cloneElement } from '../_util/reactNode';
 
 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 BarsOutlined from '@ant-design/icons/BarsOutlined';
+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 BarsOutlined from '@ant-design/icons/BarsOutlined';
-import RightOutlined from '@ant-design/icons/RightOutlined';
-import LeftOutlined from '@ant-design/icons/LeftOutlined';
+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 />,

components/segmented/index.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import RcSegmented from 'rc-segmented';
 import type {
+  SegmentedLabeledOption as RcSegmentedLabeledOption,
   SegmentedProps as RCSegmentedProps,
   SegmentedRawOption,
-  SegmentedLabeledOption as RcSegmentedLabeledOption,
 } from 'rc-segmented';
+import RcSegmented from 'rc-segmented';
+import * as React from 'react';
 
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
@@ -95,7 +95,10 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
   );
 });
 
-Segmented.displayName = 'Segmented';
+if (process.env.NODE_ENV !== 'production') {
+  Segmented.displayName = 'Segmented';
+}
+
 Segmented.defaultProps = {
   options: [],
 };

components/slider/index.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import classNames from 'classnames';
 import type { SliderProps as RcSliderProps } from 'rc-slider';
 import RcSlider from 'rc-slider';
-import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
 import type { TooltipPlacement } from '../tooltip';
 import SliderTooltip from './SliderTooltip';
-import { ConfigContext } from '../config-provider';
 
 export type SliderMarks = RcSliderProps['marks'];
 
@@ -161,7 +161,9 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
   },
 );
 
-Slider.displayName = 'Slider';
+if (process.env.NODE_ENV !== 'production') {
+  Slider.displayName = 'Slider';
+}
 
 Slider.defaultProps = {
   tipFormatter(value: number) {

components/switch/index.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import RcSwitch from 'rc-switch';
-import classNames from 'classnames';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import classNames from 'classnames';
+import RcSwitch from 'rc-switch';
+import * as React from 'react';
 
-import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
-import SizeContext from '../config-provider/SizeContext';
 import DisabledContext from '../config-provider/DisabledContext';
+import SizeContext from '../config-provider/SizeContext';
 import warning from '../_util/warning';
+import Wave from '../_util/wave';
 
 export type SwitchSize = 'small' | 'default';
 export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
@@ -94,6 +94,8 @@ const Switch = React.forwardRef<unknown, SwitchProps>(
 ) as CompoundedComponent;
 
 Switch.__ANT_SWITCH = true;
-Switch.displayName = 'Switch';
+if (process.env.NODE_ENV !== 'production') {
+  Switch.displayName = 'Switch';
+}
 
 export default Switch;

components/tag/index.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import * as React from 'react';
 
-import CheckableTag from './CheckableTag';
 import { ConfigContext } from '../config-provider';
 import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
-import Wave from '../_util/wave';
 import type { LiteralUnion } from '../_util/type';
+import Wave from '../_util/wave';
+import CheckableTag from './CheckableTag';
 
 export { CheckableTagProps } from './CheckableTag';
 
@@ -131,7 +131,9 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
 
 const Tag = React.forwardRef<unknown, TagProps>(InternalTag) as TagType;
 
-Tag.displayName = 'Tag';
+if (process.env.NODE_ENV !== 'production') {
+  Tag.displayName = 'Tag';
+}
 
 Tag.CheckableTag = CheckableTag;
 

components/time-picker/index.tsx

@@ -2,8 +2,8 @@ import type { Moment } from 'moment';
 import * as React from 'react';
 import DatePicker from '../date-picker';
 import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
-import warning from '../_util/warning';
 import type { InputStatus } from '../_util/statusUtils';
+import warning from '../_util/warning';
 
 const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
 
@@ -61,7 +61,9 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
   },
 );
 
-TimePicker.displayName = 'TimePicker';
+if (process.env.NODE_ENV !== 'production') {
+  TimePicker.displayName = 'TimePicker';
+}
 
 type MergedTimePicker = typeof TimePicker & {
   RangePicker: typeof RangePicker;

components/tooltip/index.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import RcTooltip from 'rc-tooltip';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 import classNames from 'classnames';
+import RcTooltip from 'rc-tooltip';
 import type { placements as Placements } from 'rc-tooltip/lib/placements';
-import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
-import { cloneElement, isValidElement } from '../_util/reactNode';
+import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { PresetColorType } from '../_util/colors';
 import { PresetColorTypes } from '../_util/colors';
-import type { LiteralUnion } from '../_util/type';
 import { getTransitionName } from '../_util/motion';
+import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
+import { cloneElement, isValidElement } from '../_util/reactNode';
+import type { LiteralUnion } from '../_util/type';
 
 export { AdjustOverflow, PlacementsConfig };
 
@@ -268,7 +268,9 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   );
 });
 
-Tooltip.displayName = 'Tooltip';
+if (process.env.NODE_ENV !== 'production') {
+  Tooltip.displayName = 'Tooltip';
+}
 
 Tooltip.defaultProps = {
   placement: 'top' as TooltipPlacement,

components/tree/DirectoryTree.tsx

@@ -203,7 +203,9 @@ const ForwardDirectoryTree = React.forwardRef(
   DirectoryTree,
 ) as unknown as DirectoryTreeCompoundedComponent;
 
-ForwardDirectoryTree.displayName = 'DirectoryTree';
+if (process.env.NODE_ENV !== 'production') {
+  ForwardDirectoryTree.displayName = 'DirectoryTree';
+}
 
 ForwardDirectoryTree.defaultProps = {
   showIcon: true,

components/typography/Typography.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
+import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';
 
@@ -56,8 +56,9 @@ const Typography: React.ForwardRefRenderFunction<{}, InternalTypographyProps> =
 };
 
 const RefTypography = React.forwardRef(Typography);
-
-RefTypography.displayName = 'Typography';
+if (process.env.NODE_ENV !== 'production') {
+  RefTypography.displayName = 'Typography';
+}
 
 // es default export should use const instead of let
 const ExportTypography = RefTypography as unknown as React.FC<TypographyProps>;

components/upload/Dragger.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Upload from './Upload';
 import type { UploadProps } from './interface';
+import Upload from './Upload';
 
 export type DraggerProps = UploadProps & { height?: number };
 
@@ -11,6 +11,8 @@ const InternalDragger: React.ForwardRefRenderFunction<unknown, DraggerProps> = (
 
 const Dragger = React.forwardRef(InternalDragger) as React.FC<DraggerProps>;
 
-Dragger.displayName = 'Dragger';
+if (process.env.NODE_ENV !== 'production') {
+  Dragger.displayName = 'Dragger';
+}
 
 export default Dragger;

components/upload/Upload.tsx

@@ -1,24 +1,24 @@
-import * as React from 'react';
+import classNames from 'classnames';
 import type { UploadProps as RcUploadProps } from 'rc-upload';
 import RcUpload from 'rc-upload';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import classNames from 'classnames';
-import UploadList from './UploadList';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import defaultLocale from '../locale/default';
+import warning from '../_util/warning';
 import type {
   RcFile,
   ShowUploadListInterface,
-  UploadFile,
-  UploadLocale,
   UploadChangeParam,
-  UploadType,
+  UploadFile,
   UploadListType,
+  UploadLocale,
+  UploadType,
 } from './interface';
 import { UploadProps } from './interface';
+import UploadList from './UploadList';
 import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import defaultLocale from '../locale/default';
-import { ConfigContext } from '../config-provider';
-import warning from '../_util/warning';
 
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
 
@@ -423,8 +423,9 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 };
 
 const Upload = React.forwardRef<unknown, UploadProps>(InternalUpload);
-
-Upload.displayName = 'Upload';
+if (process.env.NODE_ENV !== 'production') {
+  Upload.displayName = 'Upload';
+}
 
 Upload.defaultProps = {
   type: 'select' as UploadType,

components/upload/UploadList/index.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import type { CSSMotionListProps } from 'rc-motion';
-import CSSMotion, { CSSMotionList } from 'rc-motion';
-import classNames from 'classnames';
+import FileTwoTone from '@ant-design/icons/FileTwoTone';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
 import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
-import FileTwoTone from '@ant-design/icons/FileTwoTone';
-import { cloneElement, isValidElement } from '../../_util/reactNode';
-import type { UploadListProps, UploadFile, UploadListType, InternalUploadFile } from '../interface';
-import { previewImage, isImageUrl } from '../utils';
-import collapseMotion from '../../_util/motion';
-import { ConfigContext } from '../../config-provider';
+import classNames from 'classnames';
+import type { CSSMotionListProps } from 'rc-motion';
+import CSSMotion, { CSSMotionList } from 'rc-motion';
+import * as React from 'react';
 import type { ButtonProps } from '../../button';
 import Button from '../../button';
+import { ConfigContext } from '../../config-provider';
 import useForceUpdate from '../../_util/hooks/useForceUpdate';
+import collapseMotion from '../../_util/motion';
+import { cloneElement, isValidElement } from '../../_util/reactNode';
+import type { InternalUploadFile, UploadFile, UploadListProps, UploadListType } from '../interface';
+import { isImageUrl, previewImage } from '../utils';
 import ListItem from './ListItem';
 
 const listItemMotion: Partial<CSSMotionListProps> = {
@@ -247,8 +247,9 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
 };
 
 const UploadList = React.forwardRef<unknown, UploadListProps>(InternalUploadList);
-
-UploadList.displayName = 'UploadList';
+if (process.env.NODE_ENV !== 'production') {
+  UploadList.displayName = 'UploadList';
+}
 
 UploadList.defaultProps = {
   listType: 'text' as UploadListType, // or picture