add component param in warning (#15078)

* add component param in warning

* update snapshot

components/_util/warning.tsx

@@ -1,9 +1,9 @@
 import warning from 'warning';
 
 const warned: Record<string, boolean> = {};
-export default (valid: boolean, message: string): void => {
+export default (valid: boolean, component: string, message: string): void => {
   if (!valid && !warned[message]) {
-    warning(false, message);
+    warning(false, `[antd: ${component}] ${message}`);
     warned[message] = true;
   }
 };

components/breadcrumb/Breadcrumb.tsx

@@ -64,6 +64,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
     const props = this.props;
     warning(
       !('linkRender' in props || 'nameRender' in props),
+      'Breadcrumb',
       '`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
         'see: https://u.ant.design/item-render.',
     );
@@ -106,7 +107,8 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         }
         warning(
           element.type && element.type.__ANT_BREADCRUMB_ITEM,
-          "Breadcrumb only accepts Breadcrumb.Item as it's children",
+          'Breadcrumb',
+          "Only accepts Breadcrumb.Item as it's children",
         );
         return cloneElement(element, {
           separator,

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -23,7 +23,7 @@ describe('Breadcrumb', () => {
     );
     expect(errorSpy.mock.calls).toHaveLength(1);
     expect(errorSpy.mock.calls[0][0]).toMatch(
-      "Breadcrumb only accepts Breadcrumb.Item as it's children",
+      "Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item as it's children",
     );
   });
 

components/card/index.tsx

@@ -71,11 +71,13 @@ export default class Card extends React.Component<CardProps, CardState> {
     if ('noHovering' in this.props) {
       warning(
         !this.props.noHovering,
-        '`noHovering` of Card is deprecated, you can remove it safely or use `hoverable` instead.',
+        'Card',
+        '`noHovering` is deprecated, you can remove it safely or use `hoverable` instead.',
       );
       warning(
         !!this.props.noHovering,
-        '`noHovering={false}` of Card is deprecated, use `hoverable` instead.',
+        'Card',
+        '`noHovering={false}` is deprecated, use `hoverable` instead.',
       );
     }
   }

components/cascader/__tests__/index.test.js

@@ -425,7 +425,7 @@ describe('Cascader', () => {
       wrapper.find('input').simulate('change', { target: { value: 'a' } });
       expect(wrapper.find('.ant-cascader-menu-item').length).toBe(2);
       expect(errorSpy).toBeCalledWith(
-        "Warning: 'limit' of showSearch in Cascader should be positive number or false.",
+        "Warning: [antd: Cascader] 'limit' of showSearch should be positive number or false.",
       );
     });
   });

components/cascader/index.tsx

@@ -366,7 +366,8 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     } else {
       warning(
         typeof limit !== 'number',
-        "'limit' of showSearch in Cascader should be positive number or false.",
+        'Cascader',
+        "'limit' of showSearch should be positive number or false.",
       );
       filtered = flattenOptions.filter(path => filter(this.state.inputValue, path, names));
     }

components/date-picker/RangePicker.tsx

@@ -291,7 +291,11 @@ class RangePicker extends React.Component<any, RangePickerState> {
     fixLocale(value, localeCode);
     fixLocale(showDate, localeCode);
 
-    warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!');
+    warning(
+      !('onOK' in props),
+      'RangePicker',
+      'It should be `RangePicker[onOk]`, instead of `onOK`!',
+    );
 
     const calendarClassName = classNames({
       [`${prefixCls}-time`]: showTime,

components/date-picker/createPicker.tsx

@@ -172,6 +172,7 @@ export default function createPicker(TheCalendar: React.ComponentClass): any {
 
       warning(
         !('onOK' in props),
+        'DatePicker',
         'It should be `DatePicker[onOk]` or `MonthPicker[onOk]`, instead of `onOK`!',
       );
       const calendar = (

components/drawer/index.tsx

@@ -235,6 +235,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     } = this.props;
     warning(
       wrapClassName === undefined,
+      'Drawer',
       'wrapClassName is deprecated, please use className instead.',
     );
     const haveMask = rest.mask ? '' : 'no-mask';

components/dropdown/dropdown.tsx

@@ -89,6 +89,7 @@ export default class Dropdown extends React.Component<DropDownProps, any> {
     // Warning if use other mode
     warning(
       !overlayProps.mode || overlayProps.mode === 'vertical',
+      'Dropdown',
       `mode="${overlayProps.mode}" is not supported for Dropdown\'s Menu.`,
     );
 

components/form/Form.tsx

@@ -226,7 +226,7 @@ export default class Form extends React.Component<FormProps, any> {
   constructor(props: FormProps) {
     super(props);
 
-    warning(!props.form, 'It is unnecessary to pass `form` to `Form` after antd@1.7.0.');
+    warning(!props.form, 'Form', 'It is unnecessary to pass `form` to `Form` after antd@1.7.0.');
   }
 
   getChildContext() {

components/form/FormItem.tsx

@@ -70,7 +70,8 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     warning(
       this.getControls(children, true).length <= 1 ||
         (help !== undefined || validateStatus !== undefined),
-      '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' +
+      'Form.Item',
+      'Cannot generate `validateStatus` and `help` automatically, ' +
         'while there are more than one `getFieldDecorator` in it.',
     );
   }

components/form/__tests__/message.test.js

@@ -103,7 +103,7 @@ describe('Form', () => {
 
     mount(<Form1 />);
     expect(errorSpy).toBeCalledWith(
-      'Warning: `Form.Item` cannot generate `validateStatus` and `help` automatically, while there are more than one `getFieldDecorator` in it.',
+      'Warning: [antd: Form.Item] Cannot generate `validateStatus` and `help` automatically, while there are more than one `getFieldDecorator` in it.',
     );
     errorSpy.mockRestore();
   });

components/icon/__tests__/index.test.js

@@ -121,7 +121,7 @@ describe('Icon', () => {
     it('warns', () => {
       mount(<Icon type="clock-circle-o" theme="filled" />);
       expect(errorSpy).toBeCalledWith(
-        "Warning: The icon name 'clock-circle-o' already specify a theme 'outlined', the 'theme' prop 'filled' will be ignored.",
+        "Warning: [antd: Icon] The icon name 'clock-circle-o' already specify a theme 'outlined', the 'theme' prop 'filled' will be ignored.",
       );
     });
   });

components/icon/index.tsx

@@ -90,7 +90,8 @@ const Icon: IconComponent<IconProps> = props => {
 
   warning(
     Boolean(type || Component || children),
-    'Icon should have `type` prop or `component` prop or `children`.',
+    'Icon',
+    'Should have `type` prop or `component` prop or `children`.',
   );
 
   const classString = classNames(
@@ -136,6 +137,7 @@ const Icon: IconComponent<IconProps> = props => {
         (React.Children.count(children) === 1 &&
           React.isValidElement(children) &&
           React.Children.only(children).type === 'use'),
+      'Icon',
       'Make sure that you provide correct `viewBox`' +
         ' prop (default `0 0 1024 1024`) to the icon.',
     );
@@ -152,6 +154,7 @@ const Icon: IconComponent<IconProps> = props => {
       const themeInName = getThemeFromTypeName(type);
       warning(
         !themeInName || theme === themeInName,
+        'Icon',
         `The icon name '${type}' already specify a theme '${themeInName}',` +
           ` the 'theme' prop '${theme}' will be ignored.`,
       );
@@ -195,6 +198,7 @@ const Icon: IconComponent<IconProps> = props => {
 function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
   warning(
     false,
+    'Icon',
     `You are using the unstable method 'Icon.unstable_ChangeThemeOfAllIconsDangerously', ` +
       `make sure that all the icons with theme '${theme}' display correctly.`,
   );
@@ -204,6 +208,7 @@ function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
 function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
   warning(
     false,
+    'Icon',
     `You are using the unstable method 'Icon.unstable_ChangeDefaultThemeOfIcons', ` +
       `make sure that all the icons with theme '${theme}' display correctly.`,
   );

components/icon/utils.ts

@@ -43,7 +43,7 @@ export function withThemeSuffix(type: string, theme: ThemeType) {
   } else if (theme === 'twoTone') {
     result += '-twotone';
   } else {
-    warning(false, `This icon '${type}' has unknown theme '${theme}'`);
+    warning(false, 'Icon', `This icon '${type}' has unknown theme '${theme}'`);
   }
   return result;
 }

components/input/Input.tsx

@@ -93,6 +93,7 @@ class Input extends React.Component<InputProps, any> {
     if (hasPrefixSuffix(prevProps) !== hasPrefixSuffix(this.props)) {
       warning(
         this.input !== document.activeElement,
+        'Input',
         `When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`,
       );
     }

components/menu/index.tsx

@@ -88,13 +88,15 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
 
     warning(
       !('onOpen' in props || 'onClose' in props),
+      'Menu',
       '`onOpen` and `onClose` are removed, please use `onOpenChange` instead, ' +
         'see: https://u.ant.design/menu-on-open-change.',
     );
 
     warning(
       !('inlineCollapsed' in props && props.mode !== 'inline'),
-      "`inlineCollapsed` should only be used when Menu's `mode` is inline.",
+      'Menu',
+      '`inlineCollapsed` should only be used when `mode` is inline.',
     );
 
     let openKeys;

components/modal/confirm.tsx

@@ -33,6 +33,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
   } = props;
   warning(
     !('iconType' in props),
+    'Modal',
     `The property 'iconType' is deprecated. Use the property 'icon' instead.`,
   );
   const icon = props.icon ? props.icon : iconType;

components/popover/index.tsx

@@ -28,7 +28,8 @@ export default class Popover extends React.Component<PopoverProps, {}> {
     const { title, content } = this.props;
     warning(
       !('overlay' in this.props),
-      'Popover[overlay] is removed, please use Popover[content] instead, ' +
+      'Popover',
+      '`overlay` is removed, please use `content` instead, ' +
         'see: https://u.ant.design/popover-content',
     );
     return (

components/select/index.tsx

@@ -131,7 +131,8 @@ export default class Select<T = SelectValue> extends React.Component<SelectProps
 
     warning(
       props.mode !== 'combobox',
-      'The combobox mode of Select is deprecated, ' +
+      'Select',
+      'The combobox mode is deprecated, ' +
         'it will be removed in next major version, ' +
         'please use AutoComplete instead',
     );

components/table/Table.tsx

@@ -114,12 +114,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
 
     warning(
       !('columnsPageRange' in props || 'columnsPageSize' in props),
+      'Table',
       '`columnsPageRange` and `columnsPageSize` are removed, please use ' +
         'fixed columns instead, see: https://u.ant.design/fixed-columns.',
     );
 
     warning(
       !('expandedRowRender' in props) || !('scroll' in props),
+      'Table',
       '`expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
     );
 
@@ -731,6 +733,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       typeof rowKey === 'function' ? rowKey(record, index) : (record as any)[rowKey!];
     warning(
       recordKey !== undefined,
+      'Table',
       'Each record in dataSource of table should have a unique `key` prop, ' +
         'or set `rowKey` of Table to an unique primary key, ' +
         'see https://u.ant.design/table-row-key',

components/table/__tests__/Table.test.js

@@ -90,7 +90,7 @@ describe('Table', () => {
   it('warning if both `expandedRowRender` & `scroll` are used', () => {
     mount(<Table expandedRowRender={() => null} scroll={{}} />);
     expect(warnSpy).toBeCalledWith(
-      'Warning: `expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
+      'Warning: [antd: Table] `expandedRowRender` and `scroll` are not compatible. Please use one of them at one time.',
     );
   });
 });

components/tabs/index.tsx

@@ -110,7 +110,8 @@ export default class Tabs extends React.Component<TabsProps, any> {
 
     warning(
       !(type.indexOf('card') >= 0 && (size === 'small' || size === 'large')),
-      "Tabs[type=card|editable-card] doesn't have small or large size, it's by design.",
+      'Tabs',
+      "`type=card|editable-card` doesn't have small or large size, it's by design.",
     );
     const prefixCls = getPrefixCls('tabs', customizePrefixCls);
     const cls = classNames(className, {

components/time-picker/__tests__/index.test.js

@@ -30,7 +30,7 @@ describe('TimePicker', () => {
   it('allowEmpty deprecated', () => {
     mount(<TimePicker allowEmpty />);
     expect(errorSpy).toBeCalledWith(
-      'Warning: `allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
+      'Warning: [antd: TimePicker] `allowEmpty` is deprecated. Please use `allowClear` instead.',
     );
   });
 

components/time-picker/index.tsx

@@ -98,7 +98,8 @@ class TimePicker extends React.Component<TimePickerProps, any> {
 
     warning(
       !('allowEmpty' in props),
-      '`allowEmpty` in TimePicker is deprecated. Please use `allowClear` instead.',
+      'TimePicker',
+      '`allowEmpty` is deprecated. Please use `allowClear` instead.',
     );
   }
 

components/transfer/__tests__/index.test.js

@@ -269,7 +269,7 @@ describe('Transfer', () => {
     ).toEqual('old1');
 
     expect(consoleErrorSpy).toBeCalledWith(
-      'Warning: Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, please use Transfer[locale] instead.',
+      'Warning: [antd: Transfer] `notFoundContent` and `searchPlaceholder` will be removed, please use `locale` instead.',
     );
     consoleErrorSpy.mockRestore();
   });

components/transfer/__tests__/search.test.js

@@ -83,7 +83,7 @@ describe('Search', () => {
       .simulate('change', { target: { value: 'a' } });
 
     expect(errorSpy.mock.calls[0][0]).toMatch(
-      'Warning: `onSearchChange` in Transfer is deprecated. Please use `onSearch` instead.',
+      'Warning: [antd: Transfer] `onSearchChange` is deprecated. Please use `onSearch` instead.',
     );
     expect(onSearchChange.mock.calls[0][0]).toEqual('left');
     expect(onSearchChange.mock.calls[0][1].target.value).toEqual('a');

components/transfer/index.tsx

@@ -110,8 +110,9 @@ export default class Transfer extends React.Component<TransferProps, any> {
 
     warning(
       !('notFoundContent' in props || 'searchPlaceholder' in props),
-      'Transfer[notFoundContent] and Transfer[searchPlaceholder] will be removed, ' +
-        'please use Transfer[locale] instead.',
+      'Transfer',
+      '`notFoundContent` and `searchPlaceholder` will be removed, ' +
+        'please use `locale` instead.',
     );
 
     const { selectedKeys = [], targetKeys = [] } = props;
@@ -277,7 +278,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
       [`${direction}Filter`]: value,
     });
     if (onSearchChange) {
-      warning(false, '`onSearchChange` in Transfer is deprecated. Please use `onSearch` instead.');
+      warning(false, 'Transfer', '`onSearchChange` is deprecated. Please use `onSearch` instead.');
       onSearchChange(direction, e);
     }
     if (onSearch) {

components/tree-select/index.tsx

@@ -29,6 +29,7 @@ export default class TreeSelect extends React.Component<TreeSelectProps, any> {
 
     warning(
       props.multiple !== false || !props.treeCheckable,
+      'TreeSelect',
       '`multiple` will alway be `true` when `treeCheckable` is true',
     );
   }