Merge pull request #365 from guanpu/checkbox/rtl

[Checkbox]: RTL feature
alibaba-fusion · Feb 21, 2019 · dcf3eda · dcf3eda
2 parents 912bc65 + 313f1ac
commit dcf3eda
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 16 deletions.
diff --git 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(
     <div>
         <h6>Different status without label:</h6>
-        Unchecked：<Checkbox />&nbsp;
-        DefaultChecked：<Checkbox defaultChecked />&nbsp;
-        Indeterminate：<Checkbox defaultIndeterminate />&nbsp;
-        Disabled：<Checkbox disabled />&nbsp;
-        Checked-Disabled：<Checkbox disabled checked />&nbsp;
-        Checked：<Checkbox checked />&nbsp;
+        <Checkbox >Unchecked</Checkbox>
+        <Checkbox defaultChecked >DefaultChecked</Checkbox>
+        <Checkbox defaultIndeterminate >Indeterminate</Checkbox>
+        <Checkbox disabled >Disabled</Checkbox>;
+        <Checkbox disabled checked >Checked-Disabled</Checkbox>
+        <Checkbox checked >Checked</Checkbox>
         <h6>Using with label</h6>
         <Checkbox>Banana</Checkbox>&nbsp;
         <Checkbox id="apple" /><label htmlFor="apple" className="next-checkbox-label">Apple</label>&nbsp;
@@ -32,6 +32,5 @@ ReactDOM.render((
             <span className="next-checkbox-label">Pear</span>
         </label>&nbsp;
         <Checkbox label="Banana" />
-    </div>
-), mountNode);
+    </div>, mountNode);
 ````
diff --git 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 {
                     <Checkbox key={index}
                         value={option.value}
                         checked={checked}
+                        rtl={rtl}
                         disabled={disabled || option.disabled}
                         label={option.label}
                     />
@@ -177,7 +183,7 @@ class CheckboxGroup extends Component {
             disabled
         });
 
-        return <span {...others} className={cls} style={style}>{children}</span>;
+        return <span dir={rtl ? 'rtl' : undefined} {...others} className={cls} style={style}>{children}</span>;
     }
 }
 

diff --git 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
@@ -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
@@ -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
@@ -39,6 +39,15 @@ describe('Checkbox.Group', () => {
             const wrapper = mount(<CheckboxGroup value={['pear']} dataSource={list} />);
             assert(wrapper.find('.next-checkbox-group').children().length === 3);
         });
+
+        it('should support null child', ()=>{
+            const wrapper = mount(<CheckboxGroup>
+                <Checkbox>1</Checkbox>
+                <Checkbox>2</Checkbox>
+                {null}
+            </CheckboxGroup>);
+            assert(wrapper.find('.next-checkbox-group').children().length === 2);
+        });
     });
 
     describe('[render] uncontrol', () => {