Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Add warning when use `value` of Switch, Checkbox, Upload #18497

Merged
merged 2 commits into from Aug 27, 2019
Merged
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -6,6 +6,7 @@ import RcCheckbox from 'rc-checkbox';
import shallowEqual from 'shallowequal';
import CheckboxGroup, { CheckboxGroupContext } from './Group';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';

export interface AbstractCheckboxProps<T> {
prefixCls?: string;
@@ -66,6 +67,12 @@ class Checkbox extends React.Component<CheckboxProps, {}> {
if (checkboxGroup.registerValue) {
checkboxGroup.registerValue(value);
}

warning(
'checked' in this.props || (this.context || {}).checkboxGroup || !('value' in this.props),
'Checkbox',
'`value` is not validate prop, do you mean `checked`?',
);
}

shouldComponentUpdate(
@@ -2,8 +2,9 @@ import React from 'react';
import { mount } from 'enzyme';
import Checkbox from '..';
import focusTest from '../../../tests/shared/focusTest';
import { resetWarned } from '../../_util/warning';

describe('Checkbox', () => {
describe('Checkbox.2333', () => {

This comment has been minimized.

Copy link
@afc163

This comment has been minimized.

Copy link
@zombieJ

zombieJ Aug 27, 2019

Author Member

😝

focusTest(Checkbox);

it('responses hover events', () => {
@@ -18,4 +19,15 @@ describe('Checkbox', () => {
wrapper.find('label').simulate('mouseleave');
expect(onMouseLeave).toHaveBeenCalled();
});

it('warning if set `value`', () => {
resetWarned();

const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Checkbox value />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?',
);
errorSpy.mockRestore();
});
});
@@ -2,6 +2,7 @@ import React from 'react';
import { mount } from 'enzyme';
import Switch from '..';
import focusTest from '../../../tests/shared/focusTest';
import { resetWarned } from '../../_util/warning';

describe('Switch', () => {
focusTest(Switch);
@@ -15,4 +16,15 @@ describe('Switch', () => {
await new Promise(resolve => setTimeout(resolve, 0));
expect(wrapper.render()).toMatchSnapshot();
});

it('warning if set `value`', () => {
resetWarned();

const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Switch value />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Switch] `value` is not validate prop, do you mean `checked`?',
);
errorSpy.mockRestore();
});
});
@@ -6,6 +6,7 @@ import omit from 'omit.js';
import Wave from '../_util/wave';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';

export type SwitchSize = 'small' | 'default';
export type SwitchChangeEventHandler = (checked: boolean, event: MouseEvent) => void;
@@ -43,6 +44,16 @@ export default class Switch extends React.Component<SwitchProps, {}> {

private rcSwitch: typeof RcSwitch;

constructor(props: SwitchProps) {
super(props);

warning(
'checked' in props || !('value' in props),

This comment has been minimized.

Copy link
@afc163

afc163 Aug 27, 2019

Member

只要是指定了 value 就 warning 吧,不管有没有 checked

This comment has been minimized.

Copy link
@zombieJ

zombieJ Aug 27, 2019

Author Member

为了保险一点,检查都是没填正确的 prop 且填了 value 才报错。免得误报,因为看我们自己测试用例也会用错。

This comment has been minimized.

Copy link
@afc163

afc163 Aug 27, 2019

Member

怕有人这么写

getDecorator({ name: 'xxx', initialValue: true })(
  <Switch checked={this.state.checked} />
)
'Switch',
'`value` is not validate prop, do you mean `checked`?',
);
}

saveSwitch = (node: typeof RcSwitch) => {
this.rcSwitch = node;
};
@@ -20,6 +20,7 @@ import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './u
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/default';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';

export { UploadProps };

@@ -62,6 +63,12 @@ class Upload extends React.Component<UploadProps, UploadState> {
fileList: props.fileList || props.defaultFileList || [],
dragState: 'drop',
};

warning(
'fileList' in props || !('value' in props),
'Upload',
'`value` is not validate prop, do you mean `fileList`?',
);
}

componentWillUnmount() {
@@ -5,6 +5,7 @@ import Upload from '..';
import Form from '../../form';
import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from '../utils';
import { setup, teardown } from './mock';
import { resetWarned } from '../../_util/warning';

describe('Upload', () => {
beforeEach(() => setup());
@@ -214,7 +215,9 @@ describe('Upload', () => {
return (
<Form>
<Form.Item label="Upload">
{getFieldDecorator('upload')(<Upload>{children}</Upload>)}
{getFieldDecorator('upload', { valuePropName: 'fileList' })(
<Upload>{children}</Upload>,
)}
</Form.Item>
</Form>
);
@@ -243,7 +246,9 @@ describe('Upload', () => {
return (
<Form>
<Form.Item label="Upload">
{getFieldDecorator('upload')(
{getFieldDecorator('upload', {
valuePropName: 'fileList',
})(
<Upload disabled={disabled}>
<div>upload</div>
</Upload>,
@@ -464,4 +469,15 @@ describe('Upload', () => {
expect(wrapper.onProgress('', { uid: 'fileItem' })).toBe(undefined);
expect(wrapper.onError('', '', { uid: 'fileItem' })).toBe(undefined);
});

it('warning if set `value`', () => {
resetWarned();

const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
mount(<Upload value={[]} />);
expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Upload] `value` is not validate prop, do you mean `fileList`?',
);
errorSpy.mockRestore();
});
});
@@ -387,7 +387,7 @@ describe('Upload List', () => {
<Form onSubmit={this.handleSubmit}>
<Form.Item>
{getFieldDecorator('file', {
valuePropname: 'fileList',
valuePropName: 'fileList',
getValueFromEvent: e => e.fileList,
rules: [
{
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.