diff --git a/docs/checkbox/demo/basic.md b/docs/checkbox/demo/basic.md
index a9413415b9..9fce7fd1a2 100644
--- a/docs/checkbox/demo/basic.md
+++ b/docs/checkbox/demo/basic.md
@@ -15,15 +15,15 @@ Basic components rendered using `Checkbox`.
````jsx
import { Checkbox } from '@alifd/next';
-ReactDOM.render((
+ReactDOM.render(
Different status without label:
- Unchecked:
- DefaultChecked:
- Indeterminate:
- Disabled:
- Checked-Disabled:
- Checked:
+ Unchecked
+ DefaultChecked
+ Indeterminate
+ Disabled;
+ Checked-Disabled
+ Checked
Using with label
Banana
@@ -32,6 +32,5 @@ ReactDOM.render((
Pear
-
-), mountNode);
+ , mountNode);
````
diff --git a/src/checkbox/checkbox-group.jsx b/src/checkbox/checkbox-group.jsx
index 0c85553347..939a35a623 100644
--- a/src/checkbox/checkbox-group.jsx
+++ b/src/checkbox/checkbox-group.jsx
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import ConfigProvider from '../config-provider';
@@ -108,7 +108,7 @@ class CheckboxGroup extends Component {
componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
- let {value} = nextProps;
+ let { value } = nextProps;
if (!Array.isArray(value)) {
if (value === null || value === undefined) {
value = [];
@@ -123,7 +123,7 @@ class CheckboxGroup extends Component {
}
onChange(currentValue, e) {
- const {value} = this.state;
+ const { value } = this.state;
const index = value.indexOf(currentValue);
const valTemp = [...value];
@@ -134,19 +134,24 @@ class CheckboxGroup extends Component {
}
if (!('value' in this.props)) {
- this.setState({value: valTemp});
+ this.setState({ value: valTemp });
}
this.props.onChange(valTemp, e);
}
render() {
- const { className, style, prefix, disabled, itemDirection } = this.props;
+ const { className, style, prefix, disabled, itemDirection, rtl } = this.props;
const others = pickOthers(CheckboxGroup.propTypes, this.props);
// 如果内嵌标签跟dataSource同时存在,以内嵌标签为主
let children;
if (this.props.children) {
- children = this.props.children;
+ children = React.Children.map(this.props.children, (child) => {
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+ return React.cloneElement(child, child.props.rtl === undefined ? { rtl } : null);
+ });
} else {
children = this.props.dataSource.map((item, index) => {
let option = item;
@@ -163,6 +168,7 @@ class CheckboxGroup extends Component {
@@ -177,7 +183,7 @@ class CheckboxGroup extends Component {
disabled
});
- return {children};
+ return {children};
}
}
diff --git a/src/checkbox/checkbox.jsx b/src/checkbox/checkbox.jsx
index 59606633d1..dd8ead4d52 100644
--- a/src/checkbox/checkbox.jsx
+++ b/src/checkbox/checkbox.jsx
@@ -219,6 +219,7 @@ class Checkbox extends UIState {
{...othersData}
className={cls}
style={style}
+ dir={rtl ? 'rtl' : undefined}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
diff --git a/src/checkbox/main.scss b/src/checkbox/main.scss
index f8efdf156c..7a547d6cd5 100644
--- a/src/checkbox/main.scss
+++ b/src/checkbox/main.scss
@@ -2,6 +2,7 @@
@import '../core/index-noreset';
@import 'scss/variable';
+@import './rtl.scss';
/* stylelint-disable max-nesting-depth */
@@ -153,6 +154,7 @@
#{$checkbox-prefix}-wrapper {
display: block;
margin-left: 0;
+ margin-right: 0;
margin-bottom: 8px;
}
}
diff --git a/src/checkbox/rtl.scss b/src/checkbox/rtl.scss
new file mode 100644
index 0000000000..5fc69b4570
--- /dev/null
+++ b/src/checkbox/rtl.scss
@@ -0,0 +1,12 @@
+#{$checkbox-prefix}-wrapper[dir="rtl"] {
+ margin-right: 8px;
+ margin-left: 0;
+ &:first-child {
+ margin-right: 0;
+ }
+
+ > #{$checkbox-prefix}-label {
+ margin-right: $checkbox-margin-left;
+ margin-left: 0;
+ }
+}
diff --git a/test/checkbox/group-spec.js b/test/checkbox/group-spec.js
index b17cf4382e..f87a882720 100644
--- a/test/checkbox/group-spec.js
+++ b/test/checkbox/group-spec.js
@@ -39,6 +39,15 @@ describe('Checkbox.Group', () => {
const wrapper = mount();
assert(wrapper.find('.next-checkbox-group').children().length === 3);
});
+
+ it('should support null child', ()=>{
+ const wrapper = mount(
+ 1
+ 2
+ {null}
+ );
+ assert(wrapper.find('.next-checkbox-group').children().length === 2);
+ });
});
describe('[render] uncontrol', () => {