Merge pull request #26 from ldabiralai/master

Update to es6 class syntax and prop-types

.travis.yml

@@ -7,7 +7,7 @@ notifications:
   - yiminghe@gmail.com
 
 node_js:
-- 4.0.0
+- 6.0.0
 
 before_install:
 - |
@@ -34,4 +34,4 @@ env:
 
 matrix:
   allow_failures:
-  - env: "TEST_TYPE=saucelabs"
+  - env: "TEST_TYPE=saucelabs"

examples/multiple.js

@@ -2,33 +2,32 @@
 import Dropdown from 'rc-dropdown';
 import Menu, { Item as MenuItem, Divider } from 'rc-menu';
 import 'rc-dropdown/assets/index.less';
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 
-const Test = React.createClass({
-  getInitialState() {
-    this.selected = [];
-    return {
-      visible: false,
-    };
-  },
+class Test extends Component {
+  state = {
+    visible: false,
+  };
 
-  onVisibleChange(visible) {
+  onVisibleChange = (visible) => {
     this.setState({
       visible,
     });
-  },
+  }
+
+  selected = [];
 
-  saveSelected({ selectedKeys }) {
+  saveSelected = ({ selectedKeys }) => {
     this.selected = selectedKeys;
-  },
+  }
 
-  confirm() {
+  confirm = () => {
     console.log(this.selected);
     this.setState({
       visible: false,
     });
-  },
+  }
 
   render() {
     const menu = (
@@ -67,8 +66,8 @@ const Test = React.createClass({
         <button>open</button>
       </Dropdown>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<div style={{ margin: 20 }}>
   <Test/>

package.json

@@ -55,6 +55,7 @@
     "lint"
   ],
   "dependencies": {
+    "prop-types": "^15.5.8",
     "rc-trigger": "1.x"
   }
 }

src/Dropdown.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Trigger from 'rc-trigger';
 import placements from './placements';
@@ -13,8 +14,8 @@ import placements from './placements';
  </DropDown>
 */
 
-const Dropdown = React.createClass({
-  propTypes: {
+class Dropdown extends Component {
+  static propTypes = {
     minOverlayWidthMatchTrigger: PropTypes.bool,
     onVisibleChange: PropTypes.func,
     prefixCls: PropTypes.string,
@@ -29,45 +30,46 @@ const Dropdown = React.createClass({
     showAction: PropTypes.array,
     hideAction: PropTypes.array,
     getPopupContainer: PropTypes.func,
-  },
+    visible: PropTypes.bool,
+    defaultVisible: PropTypes.bool,
+  };
 
-  getDefaultProps() {
-    return {
-      minOverlayWidthMatchTrigger: true,
-      prefixCls: 'rc-dropdown',
-      trigger: ['hover'],
-      showAction: [],
-      hideAction: [],
-      overlayClassName: '',
-      overlayStyle: {},
-      defaultVisible: false,
-      onVisibleChange() {
-      },
-      placement: 'bottomLeft',
-    };
-  },
+  static defaultProps = {
+    minOverlayWidthMatchTrigger: true,
+    prefixCls: 'rc-dropdown',
+    trigger: ['hover'],
+    showAction: [],
+    hideAction: [],
+    overlayClassName: '',
+    overlayStyle: {},
+    defaultVisible: false,
+    onVisibleChange() {
+    },
+    placement: 'bottomLeft',
+  }
 
-  getInitialState() {
-    const props = this.props;
+  constructor(props) {
+    super(props);
     if ('visible' in props) {
-      return {
+      this.state = {
         visible: props.visible,
       };
+    } else {
+      this.state = {
+        visible: props.defaultVisible,
+      };
     }
-    return {
-      visible: props.defaultVisible,
-    };
-  },
+  }
 
   componentWillReceiveProps({ visible }) {
     if (visible !== undefined) {
       this.setState({
         visible,
       });
     }
-  },
+  }
 
-  onClick(e) {
+  onClick = (e) => {
     const props = this.props;
     const overlayProps = props.overlay.props;
     // do no call onVisibleChange, if you need click to hide, use onClick and control visible
@@ -79,39 +81,39 @@ const Dropdown = React.createClass({
     if (overlayProps.onClick) {
       overlayProps.onClick(e);
     }
-  },
+  }
 
-  onVisibleChange(visible) {
+  onVisibleChange = (visible) => {
     const props = this.props;
     if (!('visible' in props)) {
       this.setState({
         visible,
       });
     }
     props.onVisibleChange(visible);
-  },
+  }
 
   getMenuElement() {
     const props = this.props;
     return React.cloneElement(props.overlay, {
       prefixCls: `${props.prefixCls}-menu`,
       onClick: this.onClick,
     });
-  },
+  }
 
   getPopupDomNode() {
     return this.refs.trigger.getPopupDomNode();
-  },
+  }
 
-  afterVisibleChange(visible) {
+  afterVisibleChange = (visible) => {
     if (visible && this.props.minOverlayWidthMatchTrigger) {
       const overlayNode = this.getPopupDomNode();
       const rootNode = ReactDOM.findDOMNode(this);
       if (rootNode.offsetWidth > overlayNode.offsetWidth) {
         overlayNode.style.width = `${rootNode.offsetWidth}px`;
       }
     }
-  },
+  }
 
   render() {
     const {
@@ -142,7 +144,7 @@ const Dropdown = React.createClass({
       onPopupVisibleChange={this.onVisibleChange}
       getPopupContainer={getPopupContainer}
     >{children}</Trigger>);
-  },
-});
+  }
+}
 
 export default Dropdown;