mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Pass CheckboxGroup/RadioGroup prefixCls down to children (#10002)

Browse Source 
Close #9950
This commit is contained in:
Wei Zhu 2018-04-22 16:35:34 +08:00 committed by 偏右
parent 15c6d58796
commit 7ee2eca848
6 changed files with 132 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/checkbox/Group.tsx
View File

@ -41,7 +41,7 @@ export interface CheckboxGroupContext {
export default class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupState> {
static defaultProps = {
options: [],
prefixCls: 'ant-checkbox-group',
prefixCls: 'ant-checkbox',
};
static propTypes = {
@ -115,23 +115,25 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
render() {
const { props, state } = this;
const { prefixCls, className, style, options } = props;
const groupPrefixCls = `${prefixCls}-group`;
let children = props.children;
if (options && options.length > 0) {
children = this.getOptions().map(option => (
<Checkbox
prefixCls={prefixCls}
key={option.value}
disabled={'disabled' in option ? option.disabled : props.disabled}
value={option.value}
checked={state.value.indexOf(option.value) !== -1}
onChange={() => this.toggleOption(option)}
className={`${prefixCls}-item`}
className={`${groupPrefixCls}-item`}
>
{option.label}
</Checkbox>
));
}
const classString = classNames(prefixCls, className);
const classString = classNames(groupPrefixCls, className);
return (
<div className={classString} style={style}>
{children}

46
components/checkbox/__tests__/__snapshots__/group.test.js.snap Normal file
View File

@ -0,0 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
<div
class="my-checkbox-group"
>
<label
class="my-checkbox-group-item my-checkbox-wrapper"
>
<span
class="my-checkbox"
>
<input
class="my-checkbox-input"
type="checkbox"
value="Apple"
/>
<span
class="my-checkbox-inner"
/>
</span>
<span>
Apple
</span>
</label>
<label
class="my-checkbox-group-item my-checkbox-wrapper"
>
<span
class="my-checkbox"
>
<input
class="my-checkbox-input"
type="checkbox"
value="Orange"
/>
<span
class="my-checkbox-inner"
/>
</span>
<span>
Orange
</span>
</label>
</div>
`;

15
components/checkbox/__tests__/group.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { mount, render } from 'enzyme';
import Checkbox from '../index';
describe('CheckboxGroup', () => {
@ -51,4 +51,17 @@ describe('CheckboxGroup', () => {
groupWrapper.find('.ant-checkbox-input').at(1).simulate('change');
expect(onChangeGroup).toBeCalledWith(['Apple']);
});
it('passes prefixCls down to checkbox', () => {
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Orange', value: 'Orange' },
];
const wrapper = render(
<Checkbox.Group prefixCls="my-checkbox" options={options} />
);
expect(wrapper).toMatchSnapshot();
});
});

46
components/radio/__tests__/__snapshots__/group.test.js.snap Normal file
View File

@ -0,0 +1,46 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio passes prefixCls down to radio 1`] = `
<div
class="my-radio-group"
>
<label
class="my-radio-wrapper"
>
<span
class="my-radio"
>
<input
class="my-radio-input"
type="radio"
value="Apple"
/>
<span
class="my-radio-inner"
/>
</span>
<span>
Apple
</span>
</label>
<label
class="my-radio-wrapper"
>
<span
class="my-radio"
>
<input
class="my-radio-input"
type="radio"
value="Orange"
/>
<span
class="my-radio-inner"
/>
</span>
<span>
Orange
</span>
</label>
</div>
`;

15
components/radio/__tests__/group.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { shallow, mount, render } from 'enzyme';
import Radio from '../radio';
import RadioGroup from '../group';
@ -112,4 +112,17 @@ describe('Radio', () => {
expect(el.props().name).toEqual(GROUP_NAME);
}));
});
it('passes prefixCls down to radio', () => {
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Orange', value: 'Orange' },
];
const wrapper = render(
<RadioGroup prefixCls="my-radio" options={options} />
);
expect(wrapper).toMatchSnapshot();
});
});

10
components/radio/group.tsx
View File

@ -20,6 +20,7 @@ function getCheckedValue(children: React.ReactNode) {
export default class RadioGroup extends React.Component<RadioGroupProps, RadioGroupState> {
static defaultProps = {
disabled: false,
prefixCls: 'ant-radio',
};
static childContextTypes = {
@ -89,9 +90,10 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
}
render() {
const props = this.props;
const { prefixCls = 'ant-radio-group', className = '', options } = props;
const classString = classNames(prefixCls, {
[`${prefixCls}-${props.size}`]: props.size,
const { prefixCls, className = '', options } = props;
const groupPrefixCls = `${prefixCls}-group`;
const classString = classNames(groupPrefixCls, {
[`${groupPrefixCls}-${props.size}`]: props.size,
}, className);
let children: React.ReactChildren[] | React.ReactElement<any>[] | React.ReactNode = props.children;
@ -103,6 +105,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
return (
<Radio
key={index}
prefixCls={prefixCls}
disabled={this.props.disabled}
value={option}
onChange={this.onRadioChange}
@ -115,6 +118,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
return (
<Radio
key={index}
prefixCls={prefixCls}
disabled={option.disabled || this.props.disabled}
value={option.value}
onChange={this.onRadioChange}