Browse Source

fix jslint (#5514)

pull/5498/merge
黄子毅 8 years ago
committed by 偏右
parent
commit
0648172973
  1. 24
      components/radio/__tests__/group.test.js
  2. 68
      components/radio/demo/radiogroup-optional.md
  3. 47
      components/radio/group.tsx
  4. 1
      components/radio/index.en-US.md
  5. 1
      components/radio/index.zh-CN.md

24
components/radio/__tests__/group.test.js

@ -16,6 +16,21 @@ describe('Radio', () => {
); );
} }
function createRadioGroupByOption(props) {
const options = [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' },
];
return (
<RadioGroup
{...props}
options={options}
/>
);
}
it('responses hover events', () => { it('responses hover events', () => {
const onMouseEnter = jest.fn(); const onMouseEnter = jest.fn();
const onMouseLeave = jest.fn(); const onMouseLeave = jest.fn();
@ -77,4 +92,13 @@ describe('Radio', () => {
radios.at(0).simulate('change'); radios.at(0).simulate('change');
expect(onChange.mock.calls.length).toBe(0); expect(onChange.mock.calls.length).toBe(0);
}); });
it('optional should correct render', () => {
const wrapper = mount(
createRadioGroupByOption()
);
const radios = wrapper.find('input');
expect(radios.length).toBe(3);
});
}); });

68
components/radio/demo/radiogroup-optional.md

@ -0,0 +1,68 @@
---
order: 2
title:
zh-CN: RadioGroup 组合 - 配置方式
en-US: RadioGroup group - optional
---
## zh-CN
通过配置参数来控制渲染单选框。
## en-US
Render radios by configuring parameters.
```jsx
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
];
class App extends React.Component {
state = {
value1: 'Apple',
value2: 'Apple',
value3: 'Apple',
}
onChange1 = (e) => {
console.log('radio1 checked', e.target.value);
this.setState({
value1: e.target.value,
});
}
onChange2 = (e) => {
console.log('radio2 checked', e.target.value);
this.setState({
value2: e.target.value,
});
}
onChange3 = (e) => {
console.log('radio3 checked', e.target.value);
this.setState({
value3: e.target.value,
});
}
render() {
return (
<div>
<RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
<RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
<RadioGroup options={optionsWithDisabled} onChange={this.onChange3} value={this.state.value3} />
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
```

47
components/radio/group.tsx

@ -1,6 +1,7 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import shallowEqual from 'shallowequal'; import shallowEqual from 'shallowequal';
import Radio from './radio';
function getCheckedValue(children) { function getCheckedValue(children) {
let value = null; let value = null;
@ -29,6 +30,12 @@ export interface RadioGroupProps {
disabled?: boolean; disabled?: boolean;
onMouseEnter?: React.FormEventHandler<any>; onMouseEnter?: React.FormEventHandler<any>;
onMouseLeave?: React.FormEventHandler<any>; onMouseLeave?: React.FormEventHandler<any>;
/** 以配置的方式设置 Radio 子元素,设置了此参数,会忽略 children */
options?: Array<string | {
label: string;
value: string;
disabled?: boolean;
}>;
} }
export default class RadioGroup extends React.Component<RadioGroupProps, any> { export default class RadioGroup extends React.Component<RadioGroupProps, any> {
@ -83,8 +90,8 @@ export default class RadioGroup extends React.Component<RadioGroupProps, any> {
shouldComponentUpdate(nextProps, nextState, nextContext) { shouldComponentUpdate(nextProps, nextState, nextContext) {
return !shallowEqual(this.props, nextProps) || return !shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState) || !shallowEqual(this.state, nextState) ||
!shallowEqual(this.context.group, nextContext.group); !shallowEqual(this.context.group, nextContext.group);
} }
onRadioChange = (ev) => { onRadioChange = (ev) => {
@ -103,10 +110,44 @@ export default class RadioGroup extends React.Component<RadioGroupProps, any> {
} }
render() { render() {
const props = this.props; const props = this.props;
const { prefixCls = 'ant-radio-group', className = '', children } = props; const { prefixCls = 'ant-radio-group', className = '' } = props;
const classString = classNames(prefixCls, { const classString = classNames(prefixCls, {
[`${prefixCls}-${props.size}`]: props.size, [`${prefixCls}-${props.size}`]: props.size,
}, className); }, className);
let children: React.ReactChildren[] | React.ReactElement<any>[] | React.ReactNode = props.children;
// 如果存在 options, 优先使用
if (props.options && props.options.length > 0) {
children = props.options.map((option, index) => {
if (typeof option === 'string') { // 此处类型自动推导为 string
return (
<Radio
key={index}
disabled={this.props.disabled}
value={option}
onChange={this.onRadioChange}
checked={this.state.value === option}
>
{option}
</Radio>
);
} else { // 此处类型自动推导为 { label: string value: string }
return (
<Radio
key={index}
disabled={option.disabled || this.props.disabled}
value={option.value}
onChange={this.onRadioChange}
checked={this.state.value === option.value}
>
{option.label}
</Radio>
);
}
});
}
return ( return (
<div <div
className={classString} className={classString}

1
components/radio/index.en-US.md

@ -31,3 +31,4 @@ radio group,wrap a group of `Radio`。
| value | Used for setting the currently selected value. | any | none | none | | value | Used for setting the currently selected value. | any | none | none |
| defaultValue | Default selected value | any | none | none | | defaultValue | Default selected value | any | none | none |
| size | Size, only on radio style | string | `large` `default` `small` | `default` | | size | Size, only on radio style | string | `large` `default` `small` | `default` |
| options | set children optional | string[] \| Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |

1
components/radio/index.zh-CN.md

@ -32,3 +32,4 @@ title: Radio
| value | 用于设置当前选中的值 | any | 无 | 无 | | value | 用于设置当前选中的值 | any | 无 | 无 |
| defaultValue | 默认选中的值 | any | 无 | 无 | | defaultValue | 默认选中的值 | any | 无 | 无 |
| size | 大小,只对按钮样式生效 | string | `large` `default` `small` | `default` | | size | 大小,只对按钮样式生效 | string | `large` `default` `small` | `default` |
| options | 以配置形式设置子元素 | string[] \| Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |

Loading…
Cancel
Save