refactor to typescript

.gitignore

@@ -27,3 +27,5 @@ dist
 elasticsearch-*
 config/base.yaml
 typings
+components/**/*.js
+components/**/*.jsx

components/_util/splitObject.tsx

@@ -0,0 +1,12 @@
+export default function splitObject(obj, parts) {
+  let left = {};
+  let right = {};
+  Object.keys(obj).forEach((k)=> {
+    if (parts.indexOf(k) !== -1) {
+      left[k] = obj[k];
+    } else {
+      right = obj[k];
+    }
+  });
+  return [left, right];
+}

components/affix/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import warning from 'warning';
@@ -33,7 +33,17 @@ function getOffset(element) {
   };
 }
 
-export default class Affix extends React.Component {
+// Affix
+export interface AffixProps {
+  /**
+   * 距离窗口顶部达到指定偏移量后触发
+   */
+  offsetTop?:number,
+  offsetBottom?:number,
+  style?:React.CSSProperties
+}
+
+export default class Affix extends React.Component<AffixProps, any> {
   static propTypes = {
     offsetTop: React.PropTypes.number,
     offsetBottom: React.PropTypes.number,

components/badge/ScrollNumber.tsx

@@ -1,6 +1,7 @@
-import React, { createElement } from 'react';
+import React, {createElement} from 'react';
-import { findDOMNode } from 'react-dom';
+import {findDOMNode} from 'react-dom';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
+import assign from 'object-assign';
 
 function getNumberArray(num) {
   return num ?
@@ -15,7 +16,8 @@ export default class ScrollNumber extends React.Component {
     prefixCls: 'ant-scroll-number',
     count: null,
     component: 'sup',
-    onAnimated() {},
+    onAnimated() {
+    },
     height: 18,
   }
 
@@ -122,10 +124,9 @@ export default class ScrollNumber extends React.Component {
   }
 
   render() {
-    const props = {
+    const props = assign({}, this.props, {
-      ...this.props,
       className: `${this.props.prefixCls} ${this.props.className}`,
-    };
+    });
     return createElement(
       this.props.component,
       props,

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import splitObject from '../_util/splitObject';
 
 export default class BreadcrumbItem extends React.Component {
   static defaultProps = {
@@ -16,7 +17,7 @@ export default class BreadcrumbItem extends React.Component {
   }
 
   render() {
-    const { prefixCls, separator, children, ...restProps } = this.props;
+    const [{prefixCls, separator, children},restProps] = splitObject(this.props, ['prefixCls', 'separator', 'children']);
     let link;
     if ('href' in this.props) {
       link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;

components/button/button-group.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
+import splitObject from '../_util/splitObject';
 
 const prefix = 'ant-btn-group-';
 
 export default function ButtonGroup(props) {
-  const { size, className, ...others } = props;
+  const [{size, className},others] = splitObject(props, ['size', 'className']);
 
   // large => lg
   // small => sm

components/button/button.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
-
+import splitObject from '../_util/splitObject';
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 function isString(str) {
@@ -76,7 +76,8 @@ export default class Button extends React.Component {
 
   render() {
     const props = this.props;
-    const { type, shape, size, className, htmlType, children, icon, loading, prefixCls, ...others } = props;
+    const [{type, shape, size, className, htmlType, children, icon, loading, prefixCls}, others] = splitObject(props,
+      ['type', 'shape','size', 'className','htmlType', 'children','icon','loading','prefixCls']);
 
     // large => lg
     // small => sm

components/calendar/index.tsx

@@ -4,6 +4,7 @@ import defaultLocale from './locale/zh_CN';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
 import { PREFIX_CLS } from './Constants';
 import Header from './Header';
+import assign from 'object-assign';
 
 function noop() { return null; }
 
@@ -69,8 +70,8 @@ export default class Calendar extends React.Component {
       locale = context.antLocale.Calendar;
     }
     // 统一合并为完整的 Locale
-    const result = { ...locale, ...props.locale };
+    const result = assign({}, locale, props.locale);
-    result.lang = { ...locale.lang, ...props.locale.lang };
+    result.lang = assign({}, locale.lang,props.locale.lang);
     return result;
   }
 

components/card/index.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 export default props => {
-  let { prefixCls = 'ant-card', className, children, extra, bodyStyle,
+  const [{
-        title, loading, bordered = true, ...other } = props;
+    prefixCls = 'ant-card', className, extra, bodyStyle,
+    title, loading, bordered = true
+  }, others] = splitObject(props,
+    ['prefixCls', 'className', 'children', 'extra', 'bodyStyle', 'title', 'loading', 'bordered']);
+  let children = props.children;
   const classString = classNames({
     [prefixCls]: true,
     [className]: !!className,
@@ -30,7 +34,7 @@ export default props => {
   ) : null;
 
   return (
-    <div {...other} className={classString}>
+    <div {...others} className={classString}>
       {head}
       {extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
       <div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>

components/carousel/index.tsx

@@ -1,5 +1,6 @@
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
+import assign from 'object-assign';
 if (typeof window !== 'undefined') {
   const matchMediaPolyfill = function matchMediaPolyfill() {
     return {
@@ -23,7 +24,7 @@ export default class Carousel extends React.Component {
   }
 
   render() {
-    let props = { ...this.props };
+    let props = assign({}, this.props);
 
     if (props.effect === 'fade') {
       props.fade = true;

components/cascader/index.tsx

@@ -4,6 +4,7 @@ import Input from '../input';
 import Icon from '../icon';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
+import splitObject from '../_util/splitObject';
 
 export default class Cascader extends React.Component {
   static defaultProps = {
@@ -71,8 +72,10 @@ export default class Cascader extends React.Component {
 
   render() {
     const props = this.props;
-    const { prefixCls, children, placeholder, size, disabled,
+    const [{prefixCls, children, placeholder, size, disabled,
-            className, style, allowClear, ...otherProps } = props;
+      className, style, allowClear}, others] = splitObject(props,
+      ['prefixCls', 'children','placeholder', 'size','disabled', 'className','style','allowClear']);
+    
     const sizeCls = classNames({
       'ant-input-lg': size === 'large',
       'ant-input-sm': size === 'small',
@@ -93,7 +96,7 @@ export default class Cascader extends React.Component {
     });
 
     // Fix bug of https://github.com/facebook/react/pull/5004
-    delete otherProps.onChange;
+    delete others.onChange;
 
     return (
       <RcCascader {...props}
@@ -107,7 +110,7 @@ export default class Cascader extends React.Component {
             style={style}
             className={pickerCls}
           >
-            <Input {...otherProps}
+            <Input {...others}
               placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
               className={`${prefixCls}-input ant-input ${sizeCls}`}
               value={null}

components/checkbox/Group.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Checkbox from './index';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-
+import assign from 'object-assign';
 export default class CheckboxGroup extends React.Component {
   static defaultProps = {
     options: [],

components/checkbox/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import CheckboxGroup from './Group';
 import classNames from 'classnames';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-
+import splitObject from '../_util/splitObject';
 export default class Checkbox extends React.Component {
   static Group = CheckboxGroup;
   static defaultProps = {
@@ -13,7 +13,7 @@ export default class Checkbox extends React.Component {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
   render() {
-    const { prefixCls, style, children, className, ...restProps } = this.props;
+    const [{ prefixCls, style, children, className },restProps] = splitObject(this.props, ['prefixCls', 'style', 'children', 'className']);
     const classString = classNames({
       [className]: !!className,
       [`${prefixCls}-wrapper`]: true,

components/date-picker/createPicker.tsx

@@ -3,16 +3,17 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
+import assign from 'object-assign';
 
 export default function createPicker(TheCalendar) {
-  return class CalenderWrapper extends React.Component {
+  // use class typescript error
-    constructor(props) {
+  const CalenderWrapper = React.createClass({
-      super(props);
 
-      this.state = {
+    getInitialState() {
+      return {
         value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
       };
-    }
+    },
 
     componentWillReceiveProps(nextProps) {
       if ('value' in nextProps) {
@@ -20,16 +21,16 @@ export default function createPicker(TheCalendar) {
           value: nextProps.parseDateFromValue(nextProps.value),
         });
       }
-    }
+    },
 
-    handleChange = (value) => {
+    handleChange(value) {
       const props = this.props;
       if (!('value' in props)) {
-        this.setState({ value });
+        this.setState({value});
       }
       const timeValue = value ? new Date(value.getTime()) : null;
       props.onChange(timeValue, value ? props.getFormatter().format(value) : '');
-    }
+    },
 
     render() {
       const props = this.props;
@@ -71,7 +72,7 @@ export default function createPicker(TheCalendar) {
       }
 
       return (
-        <span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
+        <span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
           <RcDatePicker
             transitionName={props.transitionName}
             disabled={props.disabled}
@@ -89,7 +90,7 @@ export default function createPicker(TheCalendar) {
             {
               ({ value }) => {
                 return (
-                  <span>
+                <span>
                     <input
                       disabled={props.disabled}
                       readOnly
@@ -97,14 +98,16 @@ export default function createPicker(TheCalendar) {
                       placeholder={placeholder}
                       className={props.pickerInputClass}
                     />
-                    <span className="ant-calendar-picker-icon" />
+                    <span className="ant-calendar-picker-icon"/>
                   </span>
-                );
+                  );
+                }
               }
-            }
           </RcDatePicker>
         </span>
       );
-    }
+    },
-  };
+  });
+  
+  return CalenderWrapper;
 }

components/date-picker/locale/en_US.tsx

@@ -1,16 +1,15 @@
 import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
 import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 import TimePickerLocale from '../../time-picker/locale/en_US';
-
+import assign from 'object-assign';
 // 统一合并为完整的 Locale
-const locale = { ...GregorianCalendarLocale };
+const locale = assign({}, GregorianCalendarLocale);
-locale.lang = {
+locale.lang = assign({
   placeholder: 'Select date',
   rangePlaceholder: ['Start date', 'End date'],
-  ...CalendarLocale,
+},CalendarLocale);
-};
 
-locale.timePickerLocale = { ...TimePickerLocale };
+locale.timePickerLocale = assign({}, TimePickerLocale);
 
 // All settings at:
 // https://github.com/ant-design/ant-design/issues/424

components/date-picker/locale/ru_RU.tsx

@@ -5,15 +5,14 @@
 import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU';
 import CalendarLocale from 'rc-calendar/lib/locale/ru_RU';
 import TimePickerLocale from '../../time-picker/locale/ru_RU';
-
+import assign from 'object-assign';
-const locale = { ...GregorianCalendarLocale };
+const locale = assign({}, GregorianCalendarLocale);
-locale.lang = {
+locale.lang = assign({
   placeholder: 'Выберите дату',
   rangePlaceholder: ['Начальная дата', 'Конечная дата'],
-  ...CalendarLocale,
+},CalendarLocale);
-};
 
-locale.timePickerLocale = { ...TimePickerLocale };
+locale.timePickerLocale = assign({}, TimePickerLocale);
 
 // All settings at:
 // https://github.com/ant-design/ant-design/issues/424

components/date-picker/locale/zh_CN.tsx

@@ -1,16 +1,15 @@
 import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import TimePickerLocale from '../../time-picker/locale/zh_CN';
-
+import assign from 'object-assign';
 // 统一合并为完整的 Locale
-const locale = { ...GregorianCalendarLocale };
+const locale = assign({}, GregorianCalendarLocale);
-locale.lang = {
+locale.lang = assign({
   placeholder: '请选择日期',
   rangePlaceholder: ['开始日期', '结束日期'],
-  ...CalendarLocale,
+}, CalendarLocale);
-};
 
-locale.timePickerLocale = { ...TimePickerLocale };
+locale.timePickerLocale = assign({}, TimePickerLocale);
 
 // should add whitespace between char in Button
 locale.lang.ok = '确 定';

components/date-picker/wrapPicker.tsx

@@ -1,28 +1,33 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import TimePicker from 'rc-time-picker';
 import DateTimeFormat from 'gregorian-calendar-format';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
 import defaultLocale from './locale/zh_CN';
-
+import assign from 'object-assign';
 export default function wrapPicker(Picker, defaultFormat) {
-  return class PickerWrapper extends React.Component {
+  const PickerWrapper = React.createClass({
-    static defaultProps = {
+    getDefaultProps() {
-      format: defaultFormat || 'yyyy-MM-dd',
+      return {
-      transitionName: 'slide-up',
+        format: defaultFormat || 'yyyy-MM-dd',
-      popupStyle: {},
+        transitionName: 'slide-up',
-      onChange() {},
+        popupStyle: {},
-      onOk() {},
+        onChange() {
-      toggleOpen() {},
+        },
-      locale: {},
+        onOk() {
-      align: {
+        },
-        offset: [0, -9],
+        toggleOpen() {
-      },
+        },
-    }
+        locale: {},
+        align: {
+          offset: [0, -9],
+        },
+      };
+    },
 
-    static contextTypes = {
+    contextTypes: {
       antLocale: PropTypes.object,
-    }
+    },
 
     getLocale() {
       const props = this.props;
@@ -32,21 +37,21 @@ export default function wrapPicker(Picker, defaultFormat) {
         locale = context.antLocale.DatePicker;
       }
       // 统一合并为完整的 Locale
-      const result = { ...locale, ...props.locale };
+      const result = assign({}, locale, props.locale);
-      result.lang = { ...locale.lang, ...props.locale.lang };
+      result.lang = assign({}, locale.lang, props.locale.lang);
       return result;
-    }
+    },
 
-    getFormatter = () => {
+    getFormatter() {
       const format = this.props.format;
       const formatter = new DateTimeFormat(format, this.getLocale().lang.format);
       return formatter;
-    }
+    },
 
-    parseDateFromValue = (value) => {
+    parseDateFromValue(value) {
       if (value) {
         if (typeof value === 'string') {
-          return this.getFormatter().parse(value, { locale: this.getLocale() });
+          return this.getFormatter().parse(value, {locale: this.getLocale()});
         } else if (value instanceof Date) {
           let date = new GregorianCalendar(this.getLocale());
           date.setTime(+value);
@@ -54,11 +59,11 @@ export default function wrapPicker(Picker, defaultFormat) {
         }
       }
       return value;
-    }
+    },
 
-    toggleOpen = ({ open }) => {
+    toggleOpen ({open}) {
-      this.props.toggleOpen({ open });
+      this.props.toggleOpen({open});
-    }
+    },
 
     render() {
       const props = this.props;
@@ -103,6 +108,7 @@ export default function wrapPicker(Picker, defaultFormat) {
           parseDateFromValue={this.parseDateFromValue}
         />
       );
-    }
+    },
-  };
+  });
+  return PickerWrapper;
 }

components/dropdown/dropdown-button.tsx

@@ -4,7 +4,7 @@ import Icon from '../icon';
 import Dropdown from './dropdown';
 const ButtonGroup = Button.Group;
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 export default class DropdownButton extends React.Component {
   static defaultProps = {
     align: {
@@ -20,7 +20,8 @@ export default class DropdownButton extends React.Component {
   }
 
   render() {
-    const { type, overlay, trigger, align, children, className, onClick, ...restProps } = this.props;
+    const [{ type, overlay, trigger, align, children, className, onClick },restProps] = splitObject(this.props, 
+      ['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick']);
     const cls = classNames({
       'ant-dropdown-button': true,
       className: !!className,

components/dropdown/dropdown.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import RcDropdown from 'rc-dropdown';
+import splitObject from '../_util/splitObject';
 
 export default class Dropdown extends React.Component {
   static defaultProps = {
@@ -10,12 +11,14 @@ export default class Dropdown extends React.Component {
   }
 
   render() {
-    const { overlay, ...otherProps } = this.props;
+    const [{overlay}, others] = splitObject(this.props,
+      ['overlay']);
+    
     const menu = React.cloneElement(overlay, {
       openTransitionName: 'zoom-big',
     });
     return (
-      <RcDropdown {...otherProps} overlay={menu} />
+      <RcDropdown {...others} overlay={menu} />
     );
   }
 }

components/form/ValueMixin.tsx

@@ -1,3 +1,4 @@
+import assign from 'object-assign';
 const ValueMixin = {
   setValue(field, e) {
     let v = e;
@@ -13,10 +14,7 @@ const ValueMixin = {
     const newFormData = {};
     newFormData[field] = v;
     this.setState({
-      formData: {
+      formData: assign({}, this.state.formData, newFormData),
-        ...this.state.formData,
-        ...newFormData,
-      },
     });
   },
 };

components/form/index.tsx

@@ -2,13 +2,12 @@ import Form from './Form';
 import FormItem from './FormItem';
 import ValueMixin from './ValueMixin';
 import createDOMForm from 'rc-form/lib/createDOMForm';
-
+import assign from 'object-assign';
 Form.create = (o = {}) => {
-  const options = {
+  const options = assign({}, o, {
-    ...o,
     fieldNameProp: 'id',
     fieldMetaProp: '__meta',
-  };
+  });
 
   return createDOMForm(options);
 };

components/icon/index.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default props => {
-  let { type, className = '', ...other } = props;
-  className += ` anticon anticon-${type}`;
-  return <i className={className} {...other} />;
-};

components/icon/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import splitObject from '../_util/splitObject';
+
+export default props => {
+  const [{type, className = ''}, others] = splitObject(props,
+    ['type','className']);
+  
+  let className2 = `${className} anticon anticon-${type}`;
+  return <i className={className2} {...others} />;
+};

components/index.tsx

@@ -0,0 +1,2 @@
+import Affix from './affix';
+export { Affix };

components/input-number/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import RcInputNumber from 'rc-input-number';
+import splitObject from '../_util/splitObject';
 
 export default class InputNumber extends React.Component {
   static defaultProps = {
@@ -9,13 +10,14 @@ export default class InputNumber extends React.Component {
   }
 
   render() {
-    const { className, size, ...other } = this.props;
+    const [{className, size}, others] = splitObject(this.props,
+      ['size','className']);
     const inputNumberClass = classNames({
       [`${this.props.prefixCls}-lg`]: size === 'large',
       [`${this.props.prefixCls}-sm`]: size === 'small',
       [className]: !!className,
     });
 
-    return <RcInputNumber className={inputNumberClass} {...other} />;
+    return <RcInputNumber className={inputNumberClass} {...others} />;
   }
 }

components/input/Input.tsx

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import calculateNodeHeight from './calculateNodeHeight';
-
+import assign from 'object-assign';
 function fixControlledValue(value) {
   if (typeof value === 'undefined' || value === null) {
     return '';
@@ -131,7 +131,7 @@ export default class Input extends Component {
   }
 
   renderInput() {
-    const props = { ...this.props };
+    const props = assign({}, this.props);
     const prefixCls = props.prefixCls;
     if (!props.type) {
       return props.children;
@@ -156,10 +156,7 @@ export default class Input extends Component {
         return (
           <textarea
             {...props}
-            style={{
+            style={assign({}, props.style, this.state.textareaStyles)}
-              ...props.style,
-              ...this.state.textareaStyles,
-            }}
             className={inputClassName}
             onKeyDown={this.handleKeyDown}
             onChange={this.handleTextareaChange}

components/layout/col.tsx

@@ -1,11 +1,12 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
-
+import assign from 'object-assign';
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
-
+import splitObject from '../_util/splitObject';
 export default function Col(props) {
-  const { span, order, offset, push, pull, className, children, ...others } = props;
+  const [{span, order, offset, push, pull, className, children}, others] = splitObject(props, 
+    ['span', 'order','offset', 'push','pull', 'className','children']);
   let sizeClassObj = {};
   ['xs', 'sm', 'md', 'lg'].forEach(size => {
     let sizeProps = {};
@@ -14,24 +15,22 @@ export default function Col(props) {
     } else if (typeof props[size] === 'object') {
       sizeProps = props[size] || {};
     }
-    sizeClassObj = {
+    sizeClassObj = assign({}, sizeClassObj, {
-      ...sizeClassObj,
       [`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
       [`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
       [`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
       [`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
       [`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
-    };
+    });
   });
-  const classes = classNames({
+  const classes = classNames(assign({}, {
     [`ant-col-${span}`]: span !== undefined,
     [`ant-col-order-${order}`]: order,
     [`ant-col-offset-${offset}`]: offset,
     [`ant-col-push-${push}`]: push,
     [`ant-col-pull-${pull}`]: pull,
     [className]: !!className,
-    ...sizeClassObj,
+  },sizeClassObj));
-  });
 
   return <div {...others} className={classes}>{children}</div>;
 }

components/layout/row.tsx

@@ -1,6 +1,7 @@
 import React, { Children, cloneElement } from 'react';
 import classNames from 'classnames';
-
+import assign from 'object-assign';
+import splitObject from '../_util/splitObject';
 export default class Row extends React.Component {
   static defaultProps = {
     gutter: 0,
@@ -14,7 +15,8 @@ export default class Row extends React.Component {
     gutter: React.PropTypes.number,
   }
   render() {
-    const { type, justify, align, className, gutter, style, children, ...others } = this.props;
+    const [{type, justify, align, className, gutter, style, children}, others] = splitObject(this.props,
+      ['type', 'justify','align', 'className','gutter', 'style','children']);
     const classes = classNames({
       'ant-row': !type,
       [`ant-row-${type}`]: type,
@@ -22,20 +24,18 @@ export default class Row extends React.Component {
       [`ant-row-${type}-${align}`]: align,
       [className]: className,
     });
-    const rowStyle = gutter > 0 ? {
+    const rowStyle = gutter > 0 ? assign({}, {
       marginLeft: gutter / -2,
       marginRight: gutter / -2,
-      ...style,
+    },style) : style;
-    } : style;
     const cols = Children.map(children, col => {
       if (!col) return null;
 
       return cloneElement(col, {
-        style: gutter > 0 ? {
+        style: gutter > 0 ? assign({}, {
           paddingLeft: gutter / 2,
           paddingRight: gutter / 2,
-          ...col.props.style,
+        }, col.props.style) : col.props.style,
-        } : col.props.style,
       });
     });
     return <div {...others} className={classes} style={rowStyle}>{cols}</div>;

components/modal/confirm.tsx

@@ -5,9 +5,9 @@ import Icon from '../icon';
 import Button from '../button';
 import classNames from 'classnames';
 import { getConfirmLocale } from './locale';
-
+import assign from 'object-assign';
 export default function confirm(config) {
-  const props = { ...config };
+  const props = assign({}, config);
   let div = document.createElement('div');
   document.body.appendChild(div);
 

components/modal/index.tsx

@@ -1,52 +1,47 @@
 import Modal from './Modal';
 import confirm from './confirm';
-
+import assign from 'object-assign';
 Modal.info = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'info',
     iconType: 'info-circle',
     okCancel: false,
-    ...props,
+  }, props);
-  };
   return confirm(config);
 };
 
 Modal.success = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'success',
     iconType: 'check-circle',
     okCancel: false,
-    ...props,
+  }, props);
-  };
   return confirm(config);
 };
 
 Modal.error = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'error',
     iconType: 'cross-circle',
     okCancel: false,
-    ...props,
+  }, props);
-  };
   return confirm(config);
 };
 
 Modal.warning = Modal.warn = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'warning',
     iconType: 'exclamation-circle',
     okCancel: false,
-    ...props,
+  }, props);
-  };
   return confirm(config);
 };
 
 Modal.confirm = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'confirm',
     okCancel: true,
-    ...props,
+  }, props);
-  };
   return confirm(config);
 };
 

components/modal/locale.tsx

@@ -1,16 +1,18 @@
+import assign from 'object-assign';
+
 const defaultLocale = {
   okText: '确定',
   cancelText: '取消',
   justOkText: '知道了',
 };
 
-let runtimeLocale = { ...defaultLocale };
+let runtimeLocale = assign({}, defaultLocale);
 
 export function changeConfirmLocale(newLocale) {
   if (newLocale) {
-    runtimeLocale = { ...runtimeLocale, ...newLocale };
+    runtimeLocale = assign({}, runtimeLocale, newLocale);
   } else {
-    runtimeLocale = { ...defaultLocale };
+    runtimeLocale = assign({}, defaultLocale);
   }
 }
 

components/notification/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Notification from 'rc-notification';
 import Icon from '../icon';
-
+import assign from 'object-assign';
 let defaultTop = 24;
 let notificationInstance;
 let defaultDuration = 4.5;
@@ -91,7 +91,7 @@ const api = {
 };
 
 ['success', 'info', 'warning', 'error'].forEach((type) => {
-  api[type] = (args) => api.open({ ...args, icon: type });
+  api[type] = (args) => api.open(assign({}, args,{ icon: type }));
 });
 
 api.warn = api.warning;

components/popconfirm/index.tsx

@@ -3,7 +3,7 @@ import Tooltip from '../tooltip';
 import Icon from '../icon';
 import Button from '../button';
 import getPlacements from '../popover/placements';
-
+import splitObject from '../_util/splitObject';
 const placements = getPlacements();
 const prefixCls = 'ant-popover';
 const noop = () => {};
@@ -58,7 +58,8 @@ export default class Popconfirm extends React.Component {
   }
 
   render() {
-    const { title, placement, overlayStyle, trigger, ...restProps } = this.props;
+    const [{ title, placement, overlayStyle, trigger },restProps] = splitObject(this.props,
+      ['title', 'placement', 'overlayStyle', 'trigger']);
     let { okText, cancelText } = this.props;
     if (this.context.antLocale && this.context.antLocale.Popconfirm) {
       okText = okText || this.context.antLocale.Popconfirm.okText;

components/progress/progress.tsx

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import Icon from '../icon';
 import { Circle } from 'rc-progress';
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 const statusColorMap = {
   normal: '#2db7f5',
   exception: '#ff5500',
@@ -30,8 +30,12 @@ export default class Line extends React.Component {
   }
 
   render() {
-    const { prefixCls, status, format, percent, trailColor,
+    const [{
-      type, strokeWidth, width, className, showInfo, ...restProps } = this.props;
+      prefixCls, status, format, percent, trailColor,
+      type, strokeWidth, width, className, showInfo
+    },restProps] = splitObject(this.props,
+      ['prefixCls', 'status', 'format', 'percent', 'trailColor', 'type', 'strokeWidth', 'width',
+        'className', 'showInfo']);
     const progressStatus = (parseInt(percent, 10) >= 100 && !('status' in this.props))
       ? 'success' : (status || 'normal');
     let progressInfo;