Merge pull request #370 from benjycui/feature-button

feat: add support for `htmlType`

components/button/button-group.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
+import rcUtil from 'rc-util';
 
 const prefix = 'ant-btn-group-';
 
 export default class ButtonGroup extends React.Component {
   render() {
     const {size, className, ...others} = this.props;
+    const classes = rcUtil.classSet({
+      'ant-btn-group': true,
+      [prefix + size]: size,
+      [className]: className
+    });
 
-    let classSet = ['ant-btn-group'];
-    if (size) {
-      classSet.push(prefix + size);
-    }
-    if (className) {
-      classSet.push(className);
-    }
-
-    return <div {...others} className={classSet.join(' ')} />;
+    return <div {...others} className={classes} />;
   }
 }
 ButtonGroup.propTypes = {

components/button/button.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import rcUtil from 'rc-util';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -7,11 +8,6 @@ function isString(str) {
 }
 
 const prefix = 'ant-btn-';
-function updateClassWithProp(classSet, prop) {
-  if (prop) {
-    classSet.push(prefix + prop);
-  }
-}
 
 // Insert one space between two chinese characters automatically.
 function insertSpace(child) {
@@ -30,22 +26,20 @@ function insertSpace(child) {
 export default class Button extends React.Component {
   render() {
     const props = this.props;
-    const {type, shape, size, onClick, className, children, ...others} = props;
+    const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
 
-    let classSet = ['ant-btn'];
-    updateClassWithProp(classSet, type);
-    updateClassWithProp(classSet, shape);
-    updateClassWithProp(classSet, size);
-    if ('loading' in props && props.loading !== false) {
-      classSet.push(prefix + 'loading');
-    }
-    if (className) {
-      classSet.push(className);
-    }
+    const classes = rcUtil.classSet({
+      'ant-btn': true,
+      [prefix + type]: type,
+      [prefix + shape]: shape,
+      [prefix + size]: size,
+      [prefix + 'loading']: ('loading' in props && props.loading !== false),
+      [className]: className
+    });
 
     const kids = React.Children.map(children, insertSpace);
 
-    return <button {...others} type="button" className={classSet.join(' ')} onClick={onClick}>
+    return <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
       {kids}
     </button>;
   }

components/button/index.md

@@ -22,9 +22,10 @@
 属性 | 说明 | 类型 | 默认值
 -----|-----|-----|------
 type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
+htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button`
 shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
 size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined
 loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
 onClick | `click` 事件的 handler | Function | `function() {}`
 
-- `<Button>Hello world!</Button>` 最终会被渲染为 `<button type="button">Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`
+- `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`