Merge pull request #1289 from waywardmonkeys/easy-class-conversion

Convert several React.createClass usages to classes.

components/alert/index.jsx

@@ -4,22 +4,21 @@ import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-alert',
-      showIcon: false,
-      onClose() {},
-      type: 'info',
-    };
-  },
-  getInitialState() {
-    return {
+export default class Alert extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-alert',
+    showIcon: false,
+    onClose() {},
+    type: 'info',
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       closing: true,
       closed: false
     };
-  },
-  handleClose(e) {
+  }
+  handleClose = (e) => {
     e.preventDefault();
     let dom = ReactDOM.findDOMNode(this);
     dom.style.height = `${dom.offsetHeight}px`;
@@ -31,13 +30,13 @@ export default React.createClass({
       closing: false
     });
     this.props.onClose.call(this, e);
-  },
-  animationEnd() {
+  }
+  animationEnd = () => {
     this.setState({
       closed: true,
       closing: true
     });
-  },
+  }
   render() {
     let {
       closable, description, type, prefixCls, message, closeText, showIcon
@@ -95,4 +94,4 @@ export default React.createClass({
       </Animate>
     );
   }
-});
+}

components/checkbox/Group.jsx

 import React from 'react';
 import Checkbox from './index';
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      options: [],
-      defaultValue: [],
-      onChange() {},
-    };
-  },
-  propTypes: {
+export default class CheckboxGroup extends React.Component {
+  static defaultProps = {
+    options: [],
+    defaultValue: [],
+    onChange() {},
+  }
+  static propTypes = {
     defaultValue: React.PropTypes.array,
     value: React.PropTypes.array,
     options: React.PropTypes.array.isRequired,
     onChange: React.PropTypes.func,
-  },
-  getInitialState() {
-    const props = this.props;
+  }
+  constructor(props) {
+    super(props);
     let value;
     if ('value' in props) {
       value = props.value;
     } else if ('defaultValue' in props) {
       value = props.defaultValue;
     }
-    return { value };
-  },
+    this.state = { value };
+  }
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({
         value: nextProps.value || [],
       });
     }
-  },
+  }
   getOptions() {
     const { options } = this.props;
     return options.map(option => {
@@ -43,8 +41,8 @@ export default React.createClass({
       }
       return option;
     });
-  },
-  toggleOption(option) {
+  }
+  toggleOption = (option) => {
     const optionIndex = this.state.value.indexOf(option.value);
     const value = [...this.state.value];
     if (optionIndex === - 1) {
@@ -56,7 +54,7 @@ export default React.createClass({
       this.setState({ value });
     }
     this.props.onChange(value);
-  },
+  }
   render() {
     const options = this.getOptions();
     return (
@@ -73,5 +71,5 @@ export default React.createClass({
         }
       </div>
     );
-  },
-});
+  }
+}

components/checkbox/index.jsx

 import RcCheckbox from 'rc-checkbox';
 import React from 'react';
-import Group from './Group';
+import CheckboxGroup from './Group';
 import classNames from 'classnames';
 
 export default class Checkbox extends React.Component {
+  static Group = CheckboxGroup;
+  static defaultProps = {
+    prefixCls: 'ant-checkbox'
+  }
   render() {
     const { prefixCls, style, children, className, ...restProps } = this.props;
     const classString = classNames({
@@ -18,9 +22,3 @@ export default class Checkbox extends React.Component {
     );
   }
 }
-
-Checkbox.defaultProps = {
-  prefixCls: 'ant-checkbox'
-};
-
-Checkbox.Group = Group;

components/layout/col.jsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
 
-const Col = React.createClass({
-  propTypes: {
+export default class Col extends React.Component {
+  static propTypes = {
     span: stringOrNumber,
     order: stringOrNumber,
     offset: stringOrNumber,
@@ -17,7 +17,7 @@ const Col = React.createClass({
     sm: objectOrNumber,
     md: objectOrNumber,
     lg: objectOrNumber,
-  },
+  }
   render() {
     const props = this.props;
     const { span, order, offset, push, pull, className, children, ...others } = props;
@@ -49,7 +49,5 @@ const Col = React.createClass({
     });
 
     return <div {...others} className={classes}>{children}</div>;
-  },
-});
-
-export default Col;
+  }
+}

components/layout/row.jsx

 import React, { Children, cloneElement } from 'react';
 import classNames from 'classnames';
 
-const Row = React.createClass({
-  propTypes: {
+export default class Row extends React.Component {
+  static defaultProps = {
+    gutter: 0,
+  }
+  static propTypes = {
     type: React.PropTypes.string,
     align: React.PropTypes.string,
     justify: React.PropTypes.string,
     className: React.PropTypes.string,
     children: React.PropTypes.node,
     gutter: React.PropTypes.number,
-  },
-  getDefaultProps() {
-    return {
-      gutter: 0,
-    };
-  },
+  }
   render() {
     const { type, justify, align, className, gutter, style, children, ...others } = this.props;
     const classes = classNames({
@@ -41,7 +39,5 @@ const Row = React.createClass({
       });
     });
     return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
-  },
-});
-
-export default Row;
+  }
+}

components/menu/index.jsx

@@ -5,40 +5,43 @@ import animation from '../common/openAnimation';
 function noop() {
 }
 
-const Menu = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-menu',
-      onClick: noop,
-      onOpen: noop,
-      onClose: noop,
-      className: '',
-      theme: 'light',  // or dark
-    };
-  },
-  getInitialState() {
-    return {
+export default class Menu extends React.Component {
+  static Divider = Divider;
+  static Item = Item;
+  static SubMenu = SubMenu;
+  static ItemGroup = ItemGroup;
+  static defaultProps = {
+    prefixCls: 'ant-menu',
+    onClick: noop,
+    onOpen: noop,
+    onClose: noop,
+    className: '',
+    theme: 'light',  // or dark
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       openKeys: []
     };
-  },
-  handleClick(e) {
+  }
+  handleClick = (e) => {
     this.setState({
       openKeys: []
     });
     this.props.onClick(e);
-  },
-  handleOpenKeys(e) {
+  }
+  handleOpenKeys = (e) => {
     this.setState({
       openKeys: e.openKeys
     });
     this.props.onOpen(e);
-  },
-  handleCloseKeys(e) {
+  }
+  handleCloseKeys = (e) => {
     this.setState({
       openKeys: e.openKeys
     });
     this.props.onClose(e);
-  },
+  }
   render() {
     let openAnimation = this.props.openAnimation || this.props.openTransitionName;
     if (!openAnimation) {
@@ -78,11 +81,4 @@ const Menu = React.createClass({
     }
     return <RcMenu {...this.props} {...props} />;
   }
-});
-
-Menu.Divider = Divider;
-Menu.Item = Item;
-Menu.SubMenu = SubMenu;
-Menu.ItemGroup = ItemGroup;
-
-export default Menu;
+}

components/radio/group.jsx

@@ -15,17 +15,15 @@ function getCheckedValue(children) {
   return matched ? { value } : undefined;
 }
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio-group',
-      disabled: false,
-      onChange() {
-      },
-    };
-  },
-  getInitialState() {
-    let props = this.props;
+export default class RadioGroup extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-radio-group',
+    disabled: false,
+    onChange() {
+    },
+  }
+  constructor(props) {
+    super(props);
     let value;
     if ('value' in props) {
       value = props.value;
@@ -35,10 +33,10 @@ export default React.createClass({
       const checkedValue = getCheckedValue(props.children);
       value = checkedValue && checkedValue.value;
     }
-    return {
+    this.state = {
       value,
     };
-  },
+  }
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {
       this.setState({
@@ -52,15 +50,15 @@ export default React.createClass({
         });
       }
     }
-  },
-  onRadioChange(ev) {
+  }
+  onRadioChange = (ev) => {
     if (!('value' in this.props)) {
       this.setState({
         value: ev.target.value,
       });
     }
     this.props.onChange(ev);
-  },
+  }
   render() {
     const props = this.props;
     const children = React.Children.map(props.children, (radio) => {
@@ -84,5 +82,5 @@ export default React.createClass({
       [`${props.prefixCls}-${props.size}`]: props.size,
     });
     return <div className={classString} style={props.style}>{children}</div>;
-  },
-});
+  }
+}

components/radio/radio.jsx

@@ -2,12 +2,10 @@ import RcRadio from 'rc-radio';
 import React from 'react';
 import classNames from 'classnames';
 
-const Radio = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio'
-    };
-  },
+export default class Radio extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-radio'
+  }
   render() {
     const { prefixCls, children, checked, disabled, className, style } = this.props;
     const classString = classNames({
@@ -23,6 +21,4 @@ const Radio = React.createClass({
       </label>
     );
   }
-});
-
-export default Radio;
+}

components/radio/radioButton.jsx

 import React from 'react';
 import Radio from './radio';
 
-const RadioButton = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-radio-button',
-    };
-  },
+export default class RadioButton extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-radio-button',
+  }
   render() {
     return (
       <Radio {...this.props} />
     );
   }
-});
-
-export default RadioButton;
+}

components/tooltip/index.jsx

 import React from 'react';
-import Tooltip from 'rc-tooltip';
+import RcTooltip from 'rc-tooltip';
 import getPlacements from '../popover/placements';
 
 const placements = getPlacements({
   verticalArrowShift: 8,
 });
 
-export default React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-tooltip',
-      placement: 'top',
-      mouseEnterDelay: 0.1,
-      mouseLeaveDelay: 0.1
-    };
-  },
-  getInitialState() {
-    return {
+export default class Tooltip extends React.Component {
+  static defaultProps = {
+    prefixCls: 'ant-tooltip',
+    placement: 'top',
+    mouseEnterDelay: 0.1,
+    mouseLeaveDelay: 0.1
+  }
+  constructor(props) {
+    super(props);
+    this.state = {
       visible: false
     };
-  },
-  onVisibleChange(visible) {
+  }
+  onVisibleChange = (visible) => {
     this.setState({ visible });
-  },
+  }
   render() {
     let transitionName = ({
       top: 'zoom-down',
@@ -46,14 +45,14 @@ export default React.createClass({
     }
 
     return (
-      <Tooltip transitionName={transitionName}
+      <RcTooltip transitionName={transitionName}
         builtinPlacements={placements}
         overlay={this.props.title}
         visible={visible}
         onVisibleChange={this.onVisibleChange}
         {...this.props}>
         {this.props.children}
-      </Tooltip>
+      </RcTooltip>
     );
   }
-});
+}