refactor: to ES6 class style

components/date-picker/createPicker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import moment from 'moment';
 import PropTypes from 'prop-types';
+import moment from 'moment';
 import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
@@ -17,20 +17,19 @@ export interface PickerProps {
 
 export default function createPicker(TheCalendar) {
   // use class typescript error
-  const CalenderWrapper = React.createClass<any, any>({
-    contextTypes: {
+  return class CalenderWrapper extends React.Component<any, any> {
+    static contextTypes = {
       antLocale: PropTypes.object,
-    },
-    getDefaultProps() {
-      return {
-        prefixCls: 'ant-calendar',
-        allowClear: true,
-        showToday: true,
-      };
-    },
+    };
 
-    getInitialState() {
-      const props = this.props;
+    static defaultProps = {
+      prefixCls: 'ant-calendar',
+      allowClear: true,
+      showToday: true,
+    };
+
+    constructor(props) {
+      super(props);
       const value = props.value || props.defaultValue;
       if (value && !moment.isMoment(value)) {
         throw new Error(
@@ -38,10 +37,10 @@ export default function createPicker(TheCalendar) {
           'a moment object after `antd@2.0`, see: http://u.ant.design/date-picker-value',
         );
       }
-      return {
+      this.state = {
         value,
       };
-    },
+    }
 
     componentWillReceiveProps(nextProps: PickerProps) {
       if ('value' in nextProps) {
@@ -49,21 +48,21 @@ export default function createPicker(TheCalendar) {
           value: nextProps.value,
         });
       }
-    },
+    }
 
-    clearSelection(e) {
+    clearSelection = (e) => {
       e.preventDefault();
       e.stopPropagation();
       this.handleChange(null);
-    },
+    }
 
-    handleChange(value) {
+    handleChange = (value) => {
       const props = this.props;
       if (!('value' in props)) {
         this.setState({ value });
       }
       props.onChange(value, (value && value.format(props.format)) || '');
-    },
+    }
 
     render() {
       const { value } = this.state;
@@ -159,8 +158,6 @@ export default function createPicker(TheCalendar) {
           </RcDatePicker>
         </span>
       );
-    },
-  });
-
-  return CalenderWrapper;
+    }
+  };
 }

components/date-picker/wrapPicker.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 import TimePickerPanel from 'rc-time-picker/lib/Panel';
 import classNames from 'classnames';
 import warning from '../_util/warning';
@@ -20,33 +20,31 @@ function getColumns({ showHour, showMinute, showSecond }) {
   return column;
 }
 
-export default function wrapPicker(Picker, defaultFormat?) {
-  const PickerWrapper = React.createClass({
-    contextTypes: {
+export default function wrapPicker(Picker, defaultFormat?: string): any {
+  return class PickerWrapper extends React.Component<any, any> {
+    static contextTypes = {
       antLocale: PropTypes.object,
-    },
+    };
 
-    getDefaultProps() {
-      return {
-        format: defaultFormat || 'YYYY-MM-DD',
-        transitionName: 'slide-up',
-        popupStyle: {},
-        onChange() {
-        },
-        onOk() {
-        },
-        onOpenChange() {
-        },
-        locale: {},
-        align: {
-          offset: [0, -9],
-        },
-        prefixCls: 'ant-calendar',
-        inputPrefixCls: 'ant-input',
-      };
-    },
+    static defaultProps = {
+      format: defaultFormat || 'YYYY-MM-DD',
+      transitionName: 'slide-up',
+      popupStyle: {},
+      onChange() {
+      },
+      onOk() {
+      },
+      onOpenChange() {
+      },
+      locale: {},
+      align: {
+        offset: [0, -9],
+      },
+      prefixCls: 'ant-calendar',
+      inputPrefixCls: 'ant-input',
+    };
 
-    handleOpenChange(open) {
+    handleOpenChange = (open) => {
       const { onOpenChange, toggleOpen } = this.props;
       onOpenChange(open);
 
@@ -58,7 +56,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
         );
         toggleOpen({ open });
       }
-    },
+    }
 
     render() {
       const props = this.props;
@@ -111,7 +109,6 @@ export default function wrapPicker(Picker, defaultFormat?) {
           onOpenChange={this.handleOpenChange}
         />
       );
-    },
-  });
-  return PickerWrapper;
+    }
+  };
 }