Merge pull request #155 from bojoyzhou/master

support name props for Radio and custom tagName for Radio.Group
alibaba-fusion · Jan 8, 2019 · 8b133e1 · 8b133e1
2 parents 35e1a9a + 3a80fe7
commit 8b133e1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 3 deletions.
diff --git a/src/radio/radio-group.jsx b/src/radio/radio-group.jsx
@@ -39,6 +39,10 @@ class RadioGroup extends Component {
          * radio group的默认值
          */
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+        /**
+         * 设置标签类型
+         */
+        component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
         /**
          * 选中值改变时的事件
          * @param {String/Number} value 选中项的值
@@ -85,6 +89,7 @@ class RadioGroup extends Component {
         onChange: () => {
         },
         prefix: 'next-',
+        component: 'div',
         itemDirection: 'hoz',
     }
 
@@ -140,7 +145,7 @@ class RadioGroup extends Component {
     }
 
     render() {
-        const { rtl, className, shape, size, style, prefix, itemDirection } = this.props;
+        const { rtl, className, shape, size, style, prefix, itemDirection, component } = this.props;
         const others = pickOthers(Object.keys(RadioGroup.propTypes), this.props);
         const disabled = this.props.disabled;
 
@@ -184,7 +189,8 @@ class RadioGroup extends Component {
             disabled
         });
 
-        return <div {...others} aria-disabled={disabled} role="radiogroup" className={cls} style={style}>{children}</div>;
+        const TagName = component;
+        return <TagName {...others} aria-disabled={disabled} role="radiogroup" className={cls} style={style}>{children}</TagName>;
     }
 }
 

diff --git a/src/radio/radio.jsx b/src/radio/radio.jsx
@@ -152,7 +152,7 @@ class Radio extends UIState {
 
     render() {
         /* eslint-disable no-unused-vars */
-        const { id, className, children, style, label, onMouseEnter, onMouseLeave, tabIndex, rtl,
+        const { id, className, children, style, label, onMouseEnter, onMouseLeave, tabIndex, rtl, name,
             ...otherProps } = this.props;
         const checked = !!this.state.checked;
         const disabled = this.disabled;
@@ -165,6 +165,7 @@ class Radio extends UIState {
 
         let input = (<input
             {...obj.pickOthers(othersData, others)}
+            name={name}
             id={id}
             disabled={disabled}
             checked={checked}

diff --git a/test/radio/group-spec.js b/test/radio/group-spec.js
@@ -150,6 +150,64 @@ describe('Radio.Group', () => {
                 assert(Math.abs(container.querySelector('.next-radio-wrapper').getBoundingClientRect().height - 40) < 0.0001);
             });
         });
+
+        describe('default tagName', () => {
+            let wrapper;
+            const container = document.createElement('div');
+            container.style.visibility = 'hidden';
+            document.body.appendChild(container);
+            before((done) => {
+                ReactDOM.render(
+                    <RadioGroup shape="button" size="large" defaultValue={'apple'} dataSource={list} />,
+                    container,
+                    function init() {
+                        done();
+                    }
+                );
+            });
+            it('should be div', () => {
+                assert(container.querySelector('div.next-radio-group'));
+            });
+        });
+
+        describe('customer tagName(String)', () => {
+            let wrapper;
+            const container = document.createElement('div');
+            container.style.visibility = 'hidden';
+            document.body.appendChild(container);
+            before((done) => {
+                ReactDOM.render(
+                    <RadioGroup component="footer" shape="button" size="large" defaultValue={'apple'} dataSource={list} />,
+                    container,
+                    function init() {
+                        done();
+                    }
+                );
+            });
+            it('should be footer', () => {
+                assert(container.querySelector('footer.next-radio-group'));
+            });
+        });
+
+        describe('customer tagName(Func)', () => {
+            let wrapper;
+            const container = document.createElement('div');
+            container.style.visibility = 'hidden';
+            document.body.appendChild(container);
+            const Footer = props => <div className="special-name" />
+            before((done) => {
+                ReactDOM.render(
+                    <RadioGroup component={Footer} shape="button" size="large" defaultValue={'apple'} dataSource={list} />,
+                    container,
+                    function init() {
+                        done();
+                    }
+                );
+            });
+            it('should be special-name', () => {
+                assert(container.querySelector('.special-name'));
+            });
+        });
     });
 
     describe('[events] simulate change', () => {

diff --git a/test/radio/index-spec.js b/test/radio/index-spec.js
@@ -32,6 +32,10 @@ describe('Radio', () => {
             const wrapper = mount(<Radio className="custom-name" />);
             assert(wrapper.find('.next-radio-wrapper.custom-name').length === 1);
         });
+        it('should support name', () => {
+            const wrapper = mount(<Radio name="customer" />);
+            assert(wrapper.find('input[name="customer"]').length === 1);
+        });
     });
 
     describe('behavior', () => {