Merge pull request #1295 from waywardmonkeys/more-class-conversion

Convert more createClass over to extending Component.

components/affix/index.jsx

@@ -32,19 +32,20 @@ function getOffset(element) {
   };
 }
 
-const Affix = React.createClass({
-  propTypes: {
+export default class Affix extends React.Component {
+  static propTypes = {
     offsetTop: React.PropTypes.number,
     offsetBottom: React.PropTypes.number,
-  },
+  }
 
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props);
+    this.state = {
       affixStyle: null,
     };
-  },
+  }
 
-  handleScroll() {
+  handleScroll = () => {
     let { offsetTop, offsetBottom } = this.props;
     const scrollTop = getScroll(window, true);
     const elemOffset = getOffset(ReactDOM.findDOMNode(this));
@@ -90,12 +91,12 @@ const Affix = React.createClass({
         affixStyle: null,
       });
     }
-  },
+  }
 
   componentDidMount() {
     this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
     this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
-  },
+  }
 
   componentWillUnmount() {
     if (this.scrollEvent) {
@@ -104,7 +105,7 @@ const Affix = React.createClass({
     if (this.resizeEvent) {
       this.resizeEvent.remove();
     }
-  },
+  }
 
   render() {
     const className = classNames({
@@ -119,8 +120,5 @@ const Affix = React.createClass({
         </div>
       </div>
     );
-  },
-
-});
-
-export default Affix;
+  }
+}

components/modal/Modal.jsx

@@ -8,25 +8,19 @@ function noop() {}
 let mousePosition;
 let mousePositionEventBinded;
 
-const Modal = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-modal',
-      onOk: noop,
-      onCancel: noop,
-      width: 520,
-      transitionName: 'zoom',
-      maskAnimation: 'fade',
-      confirmLoading: false,
-      visible: false,
-    };
-  },
-
-  contextTypes: {
-    antLocale: React.PropTypes.object,
-  },
+export default class Modal extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-modal',
+    onOk: noop,
+    onCancel: noop,
+    width: 520,
+    transitionName: 'zoom',
+    maskAnimation: 'fade',
+    confirmLoading: false,
+    visible: false,
+  }
 
-  propTypes: {
+  static propTypes = {
     prefixCls: PropTypes.string,
     onOk: PropTypes.func,
     onCancel: PropTypes.func,
@@ -39,15 +33,19 @@ const Modal = React.createClass({
     footer: PropTypes.node,
     title: PropTypes.node,
     closable: PropTypes.bool,
-  },
+  }
 
-  handleCancel(e) {
+  static contextTypes = {
+    antLocale: React.PropTypes.object,
+  }
+
+  handleCancel = (e) => {
     this.props.onCancel(e);
-  },
+  }
 
-  handleOk() {
+  handleOk = () => {
     this.props.onOk();
-  },
+  }
 
   componentDidMount() {
     if (mousePositionEventBinded) {
@@ -65,7 +63,7 @@ const Modal = React.createClass({
       setTimeout(() => mousePosition = null, 20);
     });
     mousePositionEventBinded = true;
-  },
+  }
 
   render() {
     let props = this.props;
@@ -97,6 +95,4 @@ const Modal = React.createClass({
         visible={props.visible} mousePosition={mousePosition} />
     );
   }
-});
-
-export default Modal;
+}

components/popconfirm/index.jsx

@@ -22,48 +22,55 @@ const transitionNames = {
   rightBottom: 'zoom-left',
 };
 
-export default React.createClass({
-  getInitialState() {
-    return {
+export default class Popconfirm extends React.Component {
+  static defaultProps = {
+    transitionName: '',
+    placement: 'top',
+    trigger: 'click',
+    overlayStyle: {},
+    onConfirm: noop,
+    onCancel: noop,
+    onVisibleChange() {},
+  }
+
+  static contextTypes = {
+    antLocale: React.PropTypes.object,
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
       visible: false
     };
-  },
-  getDefaultProps() {
-    return {
-      transitionName: '',
-      placement: 'top',
-      trigger: 'click',
-      overlayStyle: {},
-      onConfirm: noop,
-      onCancel: noop,
-      onVisibleChange() {},
-    };
-  },
-  contextTypes: {
-    antLocale: React.PropTypes.object,
-  },
+  }
+
   componentWillReceiveProps(nextProps) {
     if ('visible' in nextProps) {
       this.setState({ visible: nextProps.visible });
     }
-  },
-  confirm() {
+  }
+
+  confirm = () => {
     this.setVisible(false);
     this.props.onConfirm.call(this);
-  },
-  cancel() {
+  }
+
+  cancel = () => {
     this.setVisible(false);
     this.props.onCancel.call(this);
-  },
-  onVisibleChange(visible) {
+  }
+
+  onVisibleChange = (visible) => {
     this.setVisible(visible);
-  },
+  }
+
   setVisible(visible) {
     if (!('visible' in this.props)) {
       this.setState({ visible });
     }
     this.props.onVisibleChange(visible);
-  },
+  }
+
   render() {
     const { title, placement, overlayStyle, trigger, ...restProps } = this.props;
     let { okText, cancelText } = this.props;
@@ -103,4 +110,4 @@ export default React.createClass({
       </Tooltip>
     );
   }
-});
+}

components/progress/index.jsx

@@ -10,24 +10,24 @@ const statusColorMap = {
   success: '#87d068'
 };
 
-let Line = React.createClass({
-  propTypes: {
+class Line extends React.Component {
+  static defaultProps = {
+    percent: 0,
+    strokeWidth: 10,
+    status: 'normal', // exception active
+    showInfo: true,
+    trailColor: '#f3f3f3'
+  }
+
+  static propTypes = {
     status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
     showInfo: React.PropTypes.bool,
     percent: React.PropTypes.number,
     strokeWidth: React.PropTypes.number,
     trailColor: React.PropTypes.string,
     format: React.PropTypes.func,
-  },
-  getDefaultProps() {
-    return {
-      percent: 0,
-      strokeWidth: 10,
-      status: 'normal', // exception active
-      showInfo: true,
-      trailColor: '#f3f3f3'
-    };
-  },
+  }
+
   render() {
     let props = { ...this.props };
 
@@ -77,26 +77,26 @@ let Line = React.createClass({
       </div>
     );
   }
-});
+}
 
-let Circle = React.createClass({
-  propTypes: {
+class Circle extends React.Component {
+  static defaultProps = {
+    width: 132,
+    percent: 0,
+    strokeWidth: 6,
+    status: 'normal', // exception
+    trailColor: '#f3f3f3',
+  }
+
+  static propTypes = {
     status: React.PropTypes.oneOf(['normal', 'exception', 'success']),
     percent: React.PropTypes.number,
     strokeWidth: React.PropTypes.number,
     width: React.PropTypes.number,
     trailColor: React.PropTypes.string,
     format: React.PropTypes.func,
-  },
-  getDefaultProps() {
-    return {
-      width: 132,
-      percent: 0,
-      strokeWidth: 6,
-      status: 'normal', // exception
-      trailColor: '#f3f3f3',
-    };
-  },
+  }
+
   render() {
     let props = { ...this.props };
 
@@ -141,7 +141,7 @@ let Circle = React.createClass({
       </div>
     );
   }
-});
+}
 
 export default {
   Line,

components/time-picker/index.jsx

@@ -5,34 +5,32 @@ import defaultLocale from './locale/zh_CN';
 import classNames from 'classnames';
 import GregorianCalendar from 'gregorian-calendar';
 
-const TimePicker = React.createClass({
-  getDefaultProps() {
-    return {
-      format: 'HH:mm:ss',
-      prefixCls: 'ant-time-picker',
-      onChange() {
-      },
-      locale: {},
-      align: {
-        offset: [0, -2],
-      },
-      disabled: false,
-      disabledHours: undefined,
-      disabledMinutes: undefined,
-      disabledSeconds: undefined,
-      hideDisabledOptions: false,
-      placement: 'bottomLeft',
-      transitionName: 'slide-up',
-    };
-  },
+export default class TimePicker extends React.Component {
+  static defaultProps = {
+    format: 'HH:mm:ss',
+    prefixCls: 'ant-time-picker',
+    onChange() {
+    },
+    locale: {},
+    align: {
+      offset: [0, -2],
+    },
+    disabled: false,
+    disabledHours: undefined,
+    disabledMinutes: undefined,
+    disabledSeconds: undefined,
+    hideDisabledOptions: false,
+    placement: 'bottomLeft',
+    transitionName: 'slide-up',
+  }
 
-  contextTypes: {
+  static contextTypes = {
     antLocale: React.PropTypes.object,
-  },
+  }
 
   getFormatter() {
     return new DateTimeFormat(this.props.format);
-  },
+  }
 
   /**
    * 获得输入框的 className
@@ -45,7 +43,7 @@ const TimePicker = React.createClass({
       sizeClass = ' ant-input-sm';
     }
     return sizeClass;
-  },
+  }
 
   /**
    * 获得输入框的默认值
@@ -64,14 +62,14 @@ const TimePicker = React.createClass({
       }
     }
     return value;
-  },
+  }
 
-  handleChange(value) {
+  handleChange = (value) => {
     this.props.onChange(
       value ? new Date(value.getTime()) : null,
       value ? this.getFormatter().format(value) : '',
     );
-  },
+  }
 
   getLocale() {
     let locale = defaultLocale;
@@ -80,7 +78,7 @@ const TimePicker = React.createClass({
     }
     // 统一合并为完整的 Locale
     return { ...locale, ...this.props.locale };
-  },
+  }
 
   render() {
     const locale = this.getLocale();
@@ -116,7 +114,4 @@ const TimePicker = React.createClass({
       />
     );
   }
-
-});
-
-export default TimePicker;
+}

components/upload/index.jsx

@@ -52,15 +52,39 @@ function genPercentAdd() {
   };
 }
 
-const Upload = React.createClass({
-  getInitialState() {
-    return {
+class UploadDragger extends React.Component {
+  render() {
+    return <Upload {...this.props} type="drag" style={{ height: this.props.height }} />;
+  }
+}
+
+export default class Upload extends React.Component {
+  static Dragger = UploadDragger;
+
+  static defaultProps = {
+    type: 'select',
+    // do not set
+    // name: '',
+    multiple: false,
+    action: '',
+    data: {},
+    accept: '',
+    onChange: noop,
+    beforeUpload: T,
+    showUploadList: true,
+    listType: 'text', // or pictrue
+    className: '',
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
       fileList: this.props.fileList || this.props.defaultFileList || [],
       dragState: 'drop'
     };
-  },
+  }
 
-  onStart(file) {
+  onStart = (file) => {
     if (this.recentUploadStatus === false) return;
 
     let targetItem;
@@ -85,7 +109,7 @@ const Upload = React.createClass({
     if (!window.FormData) {
       this.autoUpdateProgress(0, targetItem);
     }
-  },
+  }
 
   autoUpdateProgress(percent, file) {
     const getPercent = genPercentAdd();
@@ -96,7 +120,7 @@ const Upload = React.createClass({
         percent: curPercent
       }, file);
     }, 200);
-  },
+  }
 
   removeFile(file) {
     let fileList = this.state.fileList;
@@ -107,9 +131,9 @@ const Upload = React.createClass({
       return fileList;
     }
     return null;
-  },
+  }
 
-  onSuccess(response, file) {
+  onSuccess = (response, file) => {
     this.clearProgressTimer();
     try {
       if (typeof response === 'string') {
@@ -127,9 +151,9 @@ const Upload = React.createClass({
         fileList
       });
     }
-  },
+  }
 
-  onProgress(e, file) {
+  onProgress = (e, file) => {
     let fileList = this.state.fileList;
     let targetItem = getFileItem(file, fileList);
     if (!targetItem) return;
@@ -139,9 +163,9 @@ const Upload = React.createClass({
       file: targetItem,
       fileList: this.state.fileList
     });
-  },
+  }
 
-  onError(error, response, file) {
+  onError = (error, response, file) => {
     this.clearProgressTimer();
     let fileList = this.state.fileList;
     let targetItem = getFileItem(file, fileList);
@@ -149,12 +173,12 @@ const Upload = React.createClass({
     targetItem.response = response;
     targetItem.status = 'error';
     this.handleRemove(targetItem);
-  },
+  }
 
   beforeUpload(file) {
     this.recentUploadStatus = this.props.beforeUpload(file);
     return this.recentUploadStatus;
-  },
+  }
 
   handleRemove(file) {
     let fileList = this.removeFile(file);
@@ -164,38 +188,21 @@ const Upload = React.createClass({
         fileList,
       });
     }
-  },
+  }
 
-  handleManualRemove(file) {
+  handleManualRemove = (file) => {
     /*eslint-disable */
     file.status = 'removed';
     /*eslint-enable */
     this.handleRemove(file);
-  },
+  }
 
-  onChange(info) {
+  onChange = (info) => {
     this.setState({
       fileList: info.fileList
     });
     this.props.onChange(info);
-  },
-
-  getDefaultProps() {
-    return {
-      type: 'select',
-      // do not set
-      // name: '',
-      multiple: false,
-      action: '',
-      data: {},
-      accept: '',
-      onChange: noop,
-      beforeUpload: T,
-      showUploadList: true,
-      listType: 'text', // or pictrue
-      className: '',
-    };
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     if ('fileList' in nextProps) {
@@ -203,17 +210,17 @@ const Upload = React.createClass({
         fileList: nextProps.fileList || [],
       });
     }
-  },
+  }
 
-  onFileDrop(e) {
+  onFileDrop = (e) => {
     this.setState({
       dragState: e.type
     });
-  },
+  }
 
   clearProgressTimer() {
     clearInterval(this.progressTimer);
-  },
+  }
 
   render() {
     let type = this.props.type || 'select';
@@ -283,12 +290,4 @@ const Upload = React.createClass({
       );
     }
   }
-});
-
-Upload.Dragger = React.createClass({
-  render() {
-    return <Upload {...this.props} type="drag" style={{ height: this.props.height }} />;
-  }
-});
-
-export default Upload;
+}

components/upload/uploadList.jsx

@@ -14,20 +14,20 @@ const previewFile = function (file, callback) {
   reader.readAsDataURL(file);
 };
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      listType: 'text',  // or picture
-      items: [],
-      progressAttr: {
-        strokeWidth: 3,
-        showInfo: false
-      }
-    };
-  },
+export default class UploadList extends React.Component {
+  static defaultProps = {
+    listType: 'text',  // or picture
+    items: [],
+    progressAttr: {
+      strokeWidth: 3,
+      showInfo: false
+    }
+  };
+
   handleClose(file) {
     this.props.onRemove(file);
-  },
+  }
+
   componentDidUpdate() {
     if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') {
       return;
@@ -50,7 +50,8 @@ export default React.createClass({
         this.forceUpdate();
       });
     });
-  },
+  }
+
   render() {
     let list = this.props.items.map(file => {
       let progress;
@@ -115,4 +116,4 @@ export default React.createClass({
       </div>
     );
   }
-});
+}