chore: refactor/remove mixin

examples/keyPath.js

@@ -3,14 +3,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
-import createReactClass from 'create-react-class';
 
 import 'rc-menu/assets/index.less';
 
-const Test = createReactClass({
+class Test extends React.Component {
   onClick(info) {
     console.log('click ', info);
-  },
+  }
 
   getMenu() {
     return (
@@ -33,14 +32,14 @@ const Test = createReactClass({
         <MenuItem key="3">item3</MenuItem>
       </Menu>
     );
-  },
+  }
 
   render() {
     return (<div>
       <div style={{ width: 400 }}>{this.getMenu()}</div>
     </div>);
-  },
-});
+  }
+}
 
 
 ReactDOM.render(<Test />, document.getElementById('__react-content'));

examples/openKeys.js

@@ -3,27 +3,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
-import createReactClass from 'create-react-class';
 
 import 'rc-menu/assets/index.less';
 
-const Test = createReactClass({
-  getInitialState() {
-    return {
-      openKeys: [],
-    };
-  },
+class Test extends React.Component {
+  state = {
+    openKeys: [],
+  };
 
   onClick(info) {
     console.log('click ', info);
-  },
+  }
 
-  onOpenChange(openKeys) {
+  onOpenChange = (openKeys) => {
     console.log('onOpenChange', openKeys);
     this.setState({
       openKeys,
     });
-  },
+  }
+
   getMenu() {
     return (
       <Menu
@@ -43,14 +41,13 @@ const Test = createReactClass({
         <MenuItem key="3">item3</MenuItem>
       </Menu>
     );
-  },
+  }
 
   render() {
     return (<div>
       <div style={{ width: 400 }}>{this.getMenu()}</div>
     </div>);
-  },
-});
-
+  }
+}
 
 ReactDOM.render(<Test />, document.getElementById('__react-content'));

examples/selectedKeys.js

@@ -3,38 +3,35 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
-import createReactClass from 'create-react-class';
 
 import 'rc-menu/assets/index.less';
 
-const Test = createReactClass({
-  getInitialState() {
-    return {
-      destroyed: false,
-      selectedKeys: [],
-      openKeys: [],
-    };
-  },
+class Test extends React.Component {
+  state = {
+    destroyed: false,
+    selectedKeys: [],
+    openKeys: [],
+  };
 
-  onSelect(info) {
+  onSelect = (info) => {
     console.log('selected ', info);
     this.setState({
       selectedKeys: info.selectedKeys,
     });
-  },
+  };
 
   onDeselect(info) {
     console.log('deselect ', info);
-  },
+  }
 
-  onOpenChange(openKeys) {
+  onOpenChange = (openKeys) => {
     console.log('onOpenChange ', openKeys);
     this.setState({
       openKeys,
     });
-  },
+  };
 
-  onCheck(e) {
+  onCheck = (e) => {
     const value = e.target.value;
     if (e.target.checked) {
       this.setState({
@@ -50,9 +47,9 @@ const Test = createReactClass({
         selectedKeys,
       });
     }
-  },
+  };
 
-  onOpenCheck(e) {
+  onOpenCheck = (e) => {
     const value = e.target.value;
     if (e.target.checked) {
       this.setState({
@@ -68,7 +65,7 @@ const Test = createReactClass({
         openKeys,
       });
     }
-  },
+  };
 
   getMenu() {
     return (
@@ -91,13 +88,13 @@ const Test = createReactClass({
         <MenuItem key="3">item3</MenuItem>
       </Menu>
     );
-  },
+  }
 
   destroy() {
     this.setState({
       destroyed: true,
     });
-  },
+  }
 
   render() {
     if (this.state.destroyed) {
@@ -141,8 +138,7 @@ const Test = createReactClass({
 
       <div style={{ width: 400 }}>{this.getMenu()}</div>
     </div>);
-  },
-});
-
+  }
+}
 
 ReactDOM.render(<Test />, document.getElementById('__react-content'));

package.json

@@ -75,9 +75,8 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "classnames": "2.x",
-    "create-react-class": "^15.5.2",
     "dom-scroll-into-view": "1.x",
-    "mini-store": "^1.0.2",
+    "mini-store": "^1.1.0",
     "prop-types": "^15.5.6",
     "rc-animate": "2.x",
     "rc-trigger": "^2.3.0",

src/DOMWrap.jsx

@@ -1,22 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 
-const DOMWrap = createReactClass({
-  displayName: 'DOMWrap',
-
-  propTypes: {
+export default class DOMWrap extends React.Component {
+  static propTypes = {
     tag: PropTypes.string,
     hiddenClassName: PropTypes.string,
     visible: PropTypes.bool,
-  },
+  };
 
-  getDefaultProps() {
-    return {
-      tag: 'div',
-      className: '',
-    };
-  },
+  static defaultProps = {
+    tag: 'div',
+    className: '',
+  };
 
   render() {
     const props = { ...this.props };
@@ -28,7 +23,5 @@ const DOMWrap = createReactClass({
     delete props.hiddenClassName;
     delete props.visible;
     return <Tag {...props} />;
-  },
-});
-
-export default DOMWrap;
+  }
+}

src/Divider.jsx

@@ -1,24 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 
-const Divider = createReactClass({
-  displayName: 'Divider',
-
-  propTypes: {
+export default class Divider extends React.Component {
+  static propTypes = {
     className: PropTypes.string,
     rootPrefixCls: PropTypes.string,
-  },
+  };
 
-  getDefaultProps() {
+  static defaultProps = {
     // To fix keyboard UX.
-    return { disabled: true };
-  },
+    disabled: true,
+  };
 
   render() {
     const { className = '', rootPrefixCls } = this.props;
     return <li className={`${className} ${rootPrefixCls}-item-divider`}/>;
-  },
-});
-
-export default Divider;
+  }
+}