From 2e284aa017e28e28e0a70e5837f7a799044729d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 14 May 2020 15:57:04 +0800 Subject: [PATCH] chore: small bundle size (#24135) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update warning * rm warning * replace with dev warning * fix test * fix site * Update webpack.config.js Co-authored-by: 偏右 * Update webpack.config.js * fix sytax * adjust * move into function Co-authored-by: 偏右 --- components/_util/devWarning.ts | 7 +++++++ components/_util/warning.ts | 7 ------- components/auto-complete/index.tsx | 11 ++++++---- components/avatar/index.tsx | 4 ++-- components/breadcrumb/Breadcrumb.tsx | 4 ++-- components/button/button.tsx | 4 ++-- components/cascader/index.tsx | 6 +++--- components/checkbox/Checkbox.tsx | 4 ++-- .../checkbox/__tests__/checkbox.test.js | 2 +- .../descriptions/__tests__/index.test.js | 2 +- components/descriptions/index.tsx | 4 ++-- components/dropdown/dropdown.tsx | 4 ++-- components/form/FormItem.tsx | 16 +++++++-------- components/form/FormList.tsx | 9 ++++++--- components/form/index.tsx | 4 ++-- components/icon/index.tsx | 4 ++-- components/input/Input.tsx | 4 ++-- components/locale-provider/index.tsx | 4 ++-- components/menu/__tests__/index.test.js | 2 +- components/menu/index.tsx | 8 ++++---- components/modal/ConfirmDialog.tsx | 4 ++-- components/result/index.tsx | 4 ++-- components/switch/__tests__/index.test.js | 2 +- components/switch/index.tsx | 4 ++-- components/table/Table.tsx | 4 ++-- .../table/__tests__/Table.pagination.test.js | 2 +- .../__tests__/Table.rowSelection.test.js | 2 +- components/table/hooks/useSelection.tsx | 6 +++--- .../time-picker/__tests__/index.test.js | 2 +- components/time-picker/index.tsx | 4 ++-- components/tree-select/index.tsx | 4 ++-- components/typography/Base.tsx | 6 +++--- components/typography/Text.tsx | 4 ++-- components/typography/Title.tsx | 4 ++-- components/typography/Typography.tsx | 4 ++-- components/typography/__tests__/index.test.js | 2 +- components/upload/Upload.tsx | 4 ++-- components/upload/__tests__/upload.test.js | 2 +- package.json | 1 + site/theme/template/Icon/index.jsx | 2 +- site/theme/template/Icon/utils.js | 7 ++----- webpack.config.js | 20 +++++++++++++++++++ 42 files changed, 114 insertions(+), 90 deletions(-) create mode 100644 components/_util/devWarning.ts delete mode 100644 components/_util/warning.ts diff --git a/components/_util/devWarning.ts b/components/_util/devWarning.ts new file mode 100644 index 0000000000..60403d293b --- /dev/null +++ b/components/_util/devWarning.ts @@ -0,0 +1,7 @@ +import devWarning, { resetWarned } from 'rc-util/lib/warning'; + +export { resetWarned }; + +export default (valid: boolean, component: string, message: string): void => { + devWarning(valid, `[antd: ${component}] ${message}`); +}; diff --git a/components/_util/warning.ts b/components/_util/warning.ts deleted file mode 100644 index 1bcaa5740b..0000000000 --- a/components/_util/warning.ts +++ /dev/null @@ -1,7 +0,0 @@ -import warning, { resetWarned } from 'rc-util/lib/warning'; - -export { resetWarned }; - -export default (valid: boolean, component: string, message: string): void => { - warning(valid, `[antd: ${component}] ${message}`); -}; diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index a66b08f4f9..cbb47a4b65 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -12,7 +12,7 @@ import classNames from 'classnames'; import omit from 'omit.js'; import Select, { InternalSelectProps, OptionType } from '../select'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; const { Option } = Select; @@ -25,7 +25,10 @@ export interface DataSourceItemObject { export type DataSourceItemType = string | DataSourceItemObject; export interface AutoCompleteProps - extends Omit, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'> { + extends Omit< + InternalSelectProps, + 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue' + > { dataSource?: DataSourceItemType[]; } @@ -90,13 +93,13 @@ const AutoComplete: React.RefForwardingComponent = (p // ============================ Warning ============================ React.useEffect(() => { - warning( + devWarning( !('dataSource' in props), 'AutoComplete', '`dataSource` is deprecated, please use `options` instead.', ); - warning( + devWarning( !customizeInput || !('size' in props), 'AutoComplete', 'You need to control style self instead of setting `size` when using customize input.', diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx index a911413b25..0a337eacaa 100644 --- a/components/avatar/index.tsx +++ b/components/avatar/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; export interface AvatarProps { /** Shape of avatar, options:`circle`, `square` */ @@ -109,7 +109,7 @@ export default class Avatar extends React.Component { ...others } = this.props; - warning( + devWarning( !(typeof icon === 'string' && icon.length > 2), 'Avatar', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index af9a383161..3d32e306ac 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -6,7 +6,7 @@ import BreadcrumbItem from './BreadcrumbItem'; import BreadcrumbSeparator from './BreadcrumbSeparator'; import Menu from '../menu'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { Omit } from '../_util/type'; export interface Route { @@ -130,7 +130,7 @@ export default class Breadcrumb extends React.Component { return element; } - warning( + devWarning( element.type && (element.type.__ANT_BREADCRUMB_ITEM === true || element.type.__ANT_BREADCRUMB_SEPARATOR === true), diff --git a/components/button/button.tsx b/components/button/button.tsx index 92518d3ed1..6fe0a914b0 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -7,7 +7,7 @@ import Group from './button-group'; import { ConfigContext } from '../config-provider'; import Wave from '../_util/wave'; import { Omit, tuple } from '../_util/type'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import SizeContext, { SizeType } from '../config-provider/SizeContext'; import LoadingIcon from './LoadingIcon'; @@ -186,7 +186,7 @@ const InternalButton: React.ForwardRefRenderFunction = (pr ...rest } = props; - warning( + devWarning( !(typeof icon === 'string' && icon.length > 2), 'Button', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 36cf59d478..0ace190eac 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -14,7 +14,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined'; import Input from '../input'; import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import SizeContext, { SizeType } from '../config-provider/SizeContext'; export interface CascaderOptionType { @@ -211,7 +211,7 @@ const defaultDisplayRender = (label: string[]) => label.join(' / '); function warningValueNotExist(list: CascaderOptionType[], fieldNames: FieldNamesType = {}) { (list || []).forEach(item => { const valueFieldName = fieldNames.value || 'value'; - warning(valueFieldName in item, 'Cascader', 'Not found `value` in `options`.'); + devWarning(valueFieldName in item, 'Cascader', 'Not found `value` in `options`.'); warningValueNotExist(item[fieldNames.children || 'children'], fieldNames); }); } @@ -384,7 +384,7 @@ class Cascader extends React.Component { return matchCount >= limit; }); } else { - warning( + devWarning( typeof limit !== 'number', 'Cascader', "'limit' of showSearch should be positive number or false.", diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 6c4cac4843..b50c82dd04 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import RcCheckbox from 'rc-checkbox'; import CheckboxGroup, { GroupContext } from './Group'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; export interface AbstractCheckboxProps { prefixCls?: string; @@ -60,7 +60,7 @@ class Checkbox extends React.PureComponent { const { value } = this.props; this.context?.registerValue(value); - warning( + devWarning( 'checked' in this.props || this.context || !('value' in this.props), 'Checkbox', '`value` is not a valid prop, do you mean `checked`?', diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js index c5e45181cd..7d756d395e 100644 --- a/components/checkbox/__tests__/checkbox.test.js +++ b/components/checkbox/__tests__/checkbox.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; import Checkbox from '..'; import focusTest from '../../../tests/shared/focusTest'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js index 0c969a03ce..268bb631aa 100644 --- a/components/descriptions/__tests__/index.test.js +++ b/components/descriptions/__tests__/index.test.js @@ -3,7 +3,7 @@ import MockDate from 'mockdate'; import { mount } from 'enzyme'; import Descriptions from '..'; import mountTest from '../../../tests/shared/mountTest'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; describe('Descriptions', () => { mountTest(Descriptions); diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 0bb4887dc7..8f6e26d8f1 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -7,7 +7,7 @@ import ResponsiveObserve, { ScreenMap, responsiveArray, } from '../_util/responsiveObserve'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { ConfigContext } from '../config-provider'; import Row from './Row'; import DescriptionsItem from './Item'; @@ -49,7 +49,7 @@ function getFilledItem( clone = React.cloneElement(node, { span: rowRestCol, }); - warning( + devWarning( span === undefined, 'Descriptions', 'Sum of column `span` in a line not match `column` of Descriptions.', diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index b3c2fcf7a8..28436ac0a0 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -5,7 +5,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined'; import DropdownButton from './dropdown-button'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { tuple } from '../_util/type'; const Placements = tuple( @@ -88,7 +88,7 @@ export default class Dropdown extends React.Component { const overlayProps = overlayNode.props; // Warning if use other mode - warning( + devWarning( !overlayProps.mode || overlayProps.mode === 'vertical', 'Dropdown', `mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`, diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index df0b361895..f1593eccfb 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -8,7 +8,7 @@ import omit from 'omit.js'; import Row from '../grid/row'; import { ConfigContext } from '../config-provider'; import { tuple } from '../_util/type'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import FormItemLabel, { FormItemLabelProps } from './FormItemLabel'; import FormItemInput, { FormItemInputProps } from './FormItemInput'; import { FormContext, FormItemContext } from './context'; @@ -51,7 +51,7 @@ export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, R function hasValidName(name?: NamePath): Boolean { if (name === null) { - warning(false, 'Form.Item', '`null` is passed as `name` property'); + devWarning(false, 'Form.Item', '`null` is passed as `name` property'); } return !(name === undefined || name === null); } @@ -285,27 +285,27 @@ function FormItem(props: FormItemProps): React.ReactElement { let childNode: React.ReactNode = null; if (Array.isArray(children) && hasName) { - warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.'); + devWarning(false, 'Form.Item', '`children` is array of render props cannot have `name`.'); childNode = children; } else if (isRenderProps && (!shouldUpdate || hasName)) { - warning( + devWarning( !!shouldUpdate, 'Form.Item', '`children` of render props only work with `shouldUpdate`.', ); - warning( + devWarning( !hasName, 'Form.Item', "Do not use `name` with `children` of render props since it's not a field.", ); } else if (dependencies && !isRenderProps && !hasName) { - warning( + devWarning( false, 'Form.Item', 'Must set `name` or use render props when `dependencies` is set.', ); } else if (React.isValidElement(children)) { - warning( + devWarning( children.props.defaultValue === undefined, 'Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.', @@ -334,7 +334,7 @@ function FormItem(props: FormItemProps): React.ReactElement { } else if (isRenderProps && shouldUpdate && !hasName) { childNode = (children as RenderChildren)(context); } else { - warning( + devWarning( !mergedName.length, 'Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.', diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx index a81f870c20..9268ca81bc 100644 --- a/components/form/FormList.tsx +++ b/components/form/FormList.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { List } from 'rc-field-form'; import { StoreValue } from 'rc-field-form/lib/interface'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; interface FieldData { name: number; @@ -21,12 +21,15 @@ interface FormListProps { } const FormList: React.FC = ({ children, ...props }) => { - warning(!!props.name, 'Form.List', 'Miss `name` prop.'); + devWarning(!!props.name, 'Form.List', 'Miss `name` prop.'); return ( {(fields, operation) => { - return children(fields.map(field => ({ ...field, fieldKey: field.key })), operation); + return children( + fields.map(field => ({ ...field, fieldKey: field.key })), + operation, + ); }} ); diff --git a/components/form/index.tsx b/components/form/index.tsx index 021a763086..ba21537d41 100644 --- a/components/form/index.tsx +++ b/components/form/index.tsx @@ -3,7 +3,7 @@ import InternalForm, { useForm, FormInstance, FormProps } from './Form'; import Item, { FormItemProps } from './FormItem'; import List from './FormList'; import { FormProvider } from './context'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; type InternalForm = typeof InternalForm; interface Form extends InternalForm { @@ -23,7 +23,7 @@ Form.List = List; Form.useForm = useForm; Form.Provider = FormProvider; Form.create = () => { - warning( + devWarning( false, 'Form', 'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.', diff --git a/components/icon/index.tsx b/components/icon/index.tsx index 0ced5db7a7..05a3a1695d 100755 --- a/components/icon/index.tsx +++ b/components/icon/index.tsx @@ -1,7 +1,7 @@ -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; const Icon = () => { - warning(false, 'Icon', 'Empty Icon'); + devWarning(false, 'Icon', 'Empty Icon'); return null; }; diff --git a/components/input/Input.tsx b/components/input/Input.tsx index d674d93f6f..8f74efd488 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -9,7 +9,7 @@ import { Omit, LiteralUnion } from '../_util/type'; import ClearableLabeledInput, { hasPrefixSuffix } from './ClearableLabeledInput'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import SizeContext, { SizeType } from '../config-provider/SizeContext'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; export interface InputProps extends Omit, 'size' | 'prefix' | 'type'> { @@ -153,7 +153,7 @@ class Input extends React.Component { getSnapshotBeforeUpdate(prevProps: InputProps) { if (hasPrefixSuffix(prevProps) !== hasPrefixSuffix(this.props)) { - warning( + devWarning( 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`, diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx index 2de4b9e889..21a790aec4 100644 --- a/components/locale-provider/index.tsx +++ b/components/locale-provider/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { ValidateMessages } from 'rc-field-form/lib/interface'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { ModalLocale, changeConfirmLocale } from '../modal/locale'; import { TransferLocale as TransferLocaleForEmpty } from '../empty'; @@ -51,7 +51,7 @@ export default class LocaleProvider extends React.Component { constructor(props: InternalMenuProps) { super(props); - warning( + devWarning( !('inlineCollapsed' in props && props.mode !== 'inline'), 'Menu', '`inlineCollapsed` should only be used when `mode` is inline.', ); - warning( + devWarning( !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props), 'Menu', '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.', @@ -197,7 +197,7 @@ class InternalMenu extends React.Component { } if (openAnimation) { - warning( + devWarning( typeof openAnimation === 'string', 'Menu', '`openAnimation` do not support object. Please use `motion` instead.', diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx index dbd113e395..731d358cdd 100644 --- a/components/modal/ConfirmDialog.tsx +++ b/components/modal/ConfirmDialog.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import Dialog, { ModalFuncProps } from './Modal'; import ActionButton from './ActionButton'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; interface ConfirmDialogProps extends ModalFuncProps { afterClose?: () => void; @@ -29,7 +29,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => { cancelButtonProps, } = props; - warning( + devWarning( !(typeof icon === 'string' && icon.length > 2), 'Modal', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, diff --git a/components/result/index.tsx b/components/result/index.tsx index 86b412eb2e..1473fe45ea 100644 --- a/components/result/index.tsx +++ b/components/result/index.tsx @@ -6,7 +6,7 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import WarningFilled from '@ant-design/icons/WarningFilled'; import { ConfigConsumerProps, ConfigConsumer } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import noFound from './noFound'; import serverError from './serverError'; @@ -52,7 +52,7 @@ const ExceptionStatus = Object.keys(ExceptionMap); const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => { const className = classnames(`${prefixCls}-icon`); - warning( + devWarning( !(typeof icon === 'string' && icon.length > 2), 'Result', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`, diff --git a/components/switch/__tests__/index.test.js b/components/switch/__tests__/index.test.js index a3d5c2ead5..aebeebe1a6 100644 --- a/components/switch/__tests__/index.test.js +++ b/components/switch/__tests__/index.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { mount } from 'enzyme'; import Switch from '..'; import focusTest from '../../../tests/shared/focusTest'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; diff --git a/components/switch/index.tsx b/components/switch/index.tsx index a5a8f5d6a4..62282f6fae 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -7,7 +7,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import Wave from '../_util/wave'; import { ConfigContext } from '../config-provider'; import SizeContext from '../config-provider/SizeContext'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; export type SwitchSize = 'small' | 'default'; export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void; @@ -36,7 +36,7 @@ interface CompoundedComponent } const Switch = React.forwardRef((props, ref) => { - warning( + devWarning( 'checked' in props || !('value' in props), 'Switch', '`value` is not a valid prop, do you mean `checked`?', diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 8b4ac08ecf..fef843cb4b 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -35,7 +35,7 @@ import defaultLocale from '../locale/en_US'; import SizeContext, { SizeType } from '../config-provider/SizeContext'; import Column from './Column'; import ColumnGroup from './ColumnGroup'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import useBreakpoint from '../grid/hooks/useBreakpoint'; export { ColumnsType, TablePaginationConfig }; @@ -315,7 +315,7 @@ function Table(props: TableProps) { // Dynamic table data if (mergedData.length < total!) { if (mergedData.length > pageSize) { - warning( + devWarning( false, 'Table', '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.', diff --git a/components/table/__tests__/Table.pagination.test.js b/components/table/__tests__/Table.pagination.test.js index eeacb96a67..21285c755b 100644 --- a/components/table/__tests__/Table.pagination.test.js +++ b/components/table/__tests__/Table.pagination.test.js @@ -5,7 +5,7 @@ import React from 'react'; import { mount } from 'enzyme'; import Table from '..'; import scrollTo from '../../_util/scrollTo'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; describe('Table.pagination', () => { const columns = [ diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js index 551a53fe3e..938c99a937 100644 --- a/components/table/__tests__/Table.rowSelection.test.js +++ b/components/table/__tests__/Table.rowSelection.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { mount, render } from 'enzyme'; import Table from '..'; import Checkbox from '../../checkbox'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; import ConfigProvider from '../../config-provider'; describe('Table.rowSelection', () => { diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx index f04c0b3156..026a12ed1c 100644 --- a/components/table/hooks/useSelection.tsx +++ b/components/table/hooks/useSelection.tsx @@ -6,7 +6,7 @@ import Checkbox, { CheckboxProps } from '../../checkbox'; import Dropdown from '../../dropdown'; import Menu from '../../menu'; import Radio from '../../radio'; -import warning from '../../_util/warning'; +import devWarning from '../../_util/devWarning'; import { TableRowSelection, Key, @@ -178,7 +178,7 @@ export default function useSelection( const keys = Array.from(keySet); setSelectedKeys(keys); if (onSelectInvert) { - warning( + devWarning( false, 'Table', '`onSelectInvert` will be removed in future. Please use `onChange` instead.', @@ -215,7 +215,7 @@ export default function useSelection( process.env.NODE_ENV !== 'production' && ('checked' in checkboxProps || 'defaultChecked' in checkboxProps) ) { - warning( + devWarning( false, 'Table', 'Do not set `checked` or `defaultChecked` in `getCheckboxProps`. Please use `selectedRowKeys` instead.', diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js index 2b6cae2f13..25ca473c30 100644 --- a/components/time-picker/__tests__/index.test.js +++ b/components/time-picker/__tests__/index.test.js @@ -4,7 +4,7 @@ import moment from 'moment'; import TimePicker from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; import rtlTest from '../../../tests/shared/rtlTest'; describe('TimePicker', () => { diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 210230fa78..e83b4e89c1 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -2,7 +2,7 @@ import { Moment } from 'moment'; import * as React from 'react'; import DatePicker from '../date-picker'; import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { Omit } from '../_util/type'; const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker; @@ -30,7 +30,7 @@ const TimePicker = React.forwardRef( return renderExtraFooter; } if (addon) { - warning( + devWarning( false, 'TimePicker', '`addon` is deprecated. Please use `renderExtraFooter` instead.', diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 4c5e27cc40..e0988a5291 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -9,7 +9,7 @@ import RcTreeSelect, { import classNames from 'classnames'; import omit from 'omit.js'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { AntTreeNodeProps } from '../tree'; import getIcons from '../select/utils/iconUtil'; import renderSwitcherIcon from '../tree/utils/iconUtil'; @@ -55,7 +55,7 @@ class TreeSelect extends React.Component, {}> { constructor(props: TreeSelectProps) { super(props); - warning( + devWarning( props.multiple !== false || !props.treeCheckable, 'TreeSelect', '`multiple` will alway be `true` when `treeCheckable` is true', diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index d0359d2d4d..b9bbf15573 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -11,7 +11,7 @@ import ResizeObserver from 'rc-resize-observer'; import { ConfigConsumerProps, configConsumerProps } from '../config-provider'; import { withConfigConsumer } from '../config-provider/context'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import TransButton from '../_util/transButton'; import raf from '../_util/raf'; import isStyleSupport from '../_util/styleChecker'; @@ -111,7 +111,7 @@ class Base extends React.Component typeof child === 'string'), 'Typography', '`ellipsis` should use string as children only.', diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx index 27dadfbefb..8542283d90 100644 --- a/components/typography/Text.tsx +++ b/components/typography/Text.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import Base, { BlockProps } from './Base'; export interface TextProps extends BlockProps { @@ -7,7 +7,7 @@ export interface TextProps extends BlockProps { } const Text: React.FC = ({ ellipsis, ...restProps }) => { - warning( + devWarning( typeof ellipsis !== 'object', 'Typography.Text', '`ellipsis` only supports boolean value.', diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx index 37b6943061..63095e4654 100644 --- a/components/typography/Title.tsx +++ b/components/typography/Title.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import warning from 'warning'; +import devWarning from '../_util/devWarning'; import Base, { BlockProps } from './Base'; import { tupleNum, Omit } from '../_util/type'; @@ -14,7 +14,7 @@ const Title: React.FC = props => { if (TITLE_ELE_LIST.indexOf(level) !== -1) { component = `h${level}`; } else { - warning(false, 'Title only accept `1 | 2 | 3 | 4` as `level` value.'); + devWarning(false, 'Typography.Title', 'Title only accept `1 | 2 | 3 | 4` as `level` value.'); component = 'h1'; } diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx index 93478bd9b5..1c69cee606 100644 --- a/components/typography/Typography.tsx +++ b/components/typography/Typography.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import classNames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; import { composeRef } from '../_util/ref'; export interface TypographyProps { @@ -34,7 +34,7 @@ const Typography: React.RefForwardingComponent<{}, InternalTypographyProps> = ( let mergedRef = ref; if (setContentRef) { - warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); + devWarning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.'); mergedRef = composeRef(ref, setContentRef); } diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js index e9704f3d84..63daa8b721 100644 --- a/components/typography/__tests__/index.test.js +++ b/components/typography/__tests__/index.test.js @@ -61,7 +61,7 @@ describe('Typography', () => { mount(); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: Title only accept `1 | 2 | 3 | 4` as `level` value.', + 'Warning: [antd: Typography.Title] Title only accept `1 | 2 | 3 | 4` as `level` value.', ); }); }); diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 095e99477a..08dc813043 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -17,7 +17,7 @@ import { T, fileToObject, getFileItem, removeFileItem } from './utils'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale/default'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import warning from '../_util/warning'; +import devWarning from '../_util/devWarning'; export { UploadProps }; @@ -61,7 +61,7 @@ class Upload extends React.Component<UploadProps, UploadState> { dragState: 'drop', }; - warning( + devWarning( 'fileList' in props || !('value' in props), 'Upload', '`value` is not a valid prop, do you mean `fileList`?', diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index d2d00eb34f..31391e3c4c 100644 --- a/components/upload/__tests__/upload.test.js +++ b/components/upload/__tests__/upload.test.js @@ -5,7 +5,7 @@ import Upload from '..'; import Form from '../../form'; import { T, fileToObject, getFileItem, removeFileItem } from '../utils'; import { setup, teardown } from './mock'; -import { resetWarned } from '../../_util/warning'; +import { resetWarned } from '../../_util/devWarning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; diff --git a/package.json b/package.json index c067e60c3d..7a3a38a46b 100644 --- a/package.json +++ b/package.json @@ -257,6 +257,7 @@ "rimraf": "^3.0.0", "scrollama": "^2.0.0", "simple-git": "^2.0.0", + "string-replace-loader": "^2.3.0", "stylelint": "^13.0.0", "stylelint-config-prettier": "^8.0.0", "stylelint-config-rational-order": "^0.1.2", diff --git a/site/theme/template/Icon/index.jsx b/site/theme/template/Icon/index.jsx index 0499cc34fb..1706e8bc83 100644 --- a/site/theme/template/Icon/index.jsx +++ b/site/theme/template/Icon/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import AntdIcon, { createFromIconfontCN } from '@ant-design/icons'; import { withThemeSuffix, removeTypeTheme, getThemeFromTypeName } from './utils'; -import warning from '../../../../components/_util/warning'; +import warning from '../../../../components/_util/devWarning'; const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1329669_t1u72b9zk8s.js', diff --git a/site/theme/template/Icon/utils.js b/site/theme/template/Icon/utils.js index 68413fac9c..1eaaf31c09 100644 --- a/site/theme/template/Icon/utils.js +++ b/site/theme/template/Icon/utils.js @@ -1,4 +1,4 @@ -import warning from '../../../../components/_util/warning'; +import warning from '../../../../components/_util/devWarning'; // These props make sure that the SVG behaviours like general text. // Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 @@ -27,10 +27,7 @@ export function getThemeFromTypeName(type) { } export function removeTypeTheme(type) { - return type - .replace(fillTester, '') - .replace(outlineTester, '') - .replace(twoToneTester, ''); + return type.replace(fillTester, '').replace(outlineTester, '').replace(twoToneTester, ''); } export function withThemeSuffix(type, theme) { diff --git a/webpack.config.js b/webpack.config.js index 4d8881ef37..ff6ea1636e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -34,10 +34,29 @@ function externalMoment(config) { }; } +function injectWarningCondition(config) { + config.module.rules.forEach(rule => { + // Remove devWarning if needed + if (rule.test.test('test.tsx')) { + rule.use = [ + ...rule.use, + { + loader: 'string-replace-loader', + options: { + search: 'devWarning(', + replace: "if (process.env.NODE_ENV !== 'production') devWarning(", + }, + }, + ]; + } + }); +} + function processWebpackThemeConfig(themeConfig, theme, vars) { themeConfig.forEach(config => { ignoreMomentLocale(config); externalMoment(config); + injectWarningCondition(config); // rename default entry to ${theme} entry Object.keys(config.entry).forEach(entryName => { @@ -79,6 +98,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') { if (process.env.ESBUILD) { config.optimization.minimizer[0] = new EsbuildPlugin(); } + // skip codesandbox ci if (!process.env.CSB_REPO) { config.plugins.push(