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.jsx → components/affix/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+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.jsx → components/badge/ScrollNumber.tsx

@@ -1,6 +1,7 @@
-import React, { createElement } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, {createElement} from 'react';
+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 = {
-      ...this.props,
+    const props = assign({}, this.props, {
       className: `${this.props.prefixCls} ${this.props.className}`,
-    };
+    });
     return createElement(
       this.props.component,
       props,

components/breadcrumb/BreadcrumbItem.jsx → 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.jsx → 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.jsx → 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.jsx → 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 };
-    result.lang = { ...locale.lang, ...props.locale.lang };
+    const result = assign({}, locale, props.locale);
+    result.lang = assign({}, locale.lang,props.locale.lang);
     return result;
   }
 

components/card/index.jsx → 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,
-        title, loading, bordered = true, ...other } = props;
+  const [{
+    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.jsx → 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.jsx → 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,
-            className, style, allowClear, ...otherProps } = props;
+    const [{prefixCls, children, placeholder, size, disabled,
+      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.jsx → 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.jsx → 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.jsx → components/date-picker/createPicker.tsx

@@ -3,33 +3,34 @@ 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 {
-    constructor(props) {
-      super(props);
+  // use class typescript error
+  const CalenderWrapper = React.createClass({
 
-      this.state = {
+    getInitialState() {
+      return {
         value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
       };
-    }
+    },
 
     componentWillReceiveProps(nextProps) {
       if ('value' in nextProps) {
         this.setState({
           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,22 +90,24 @@ export default function createPicker(TheCalendar) {
             {
               ({ value }) => {
                 return (
-                  <span>
+                <span>
                     <input
                       disabled={props.disabled}
                       readOnly
                       value={value ? props.getFormatter().format(value) : ''}
                       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.js → 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 };
-locale.lang = {
+const locale = assign({}, GregorianCalendarLocale);
+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.js → 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';
-
-const locale = { ...GregorianCalendarLocale };
-locale.lang = {
+import assign from 'object-assign';
+const locale = assign({}, GregorianCalendarLocale);
+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