react-component · yiminghe · Apr 17, 2017 · Apr 14, 2017
diff --git a/examples/nested.js b/examples/nested.js
@@ -37,10 +37,10 @@ const popupBorderStyle = {
   padding: 10,
 };
 
-const Test = React.createClass({
-  render() {
-    const innerTrigger = (<div style={popupBorderStyle}>
-      <div ref="container"/>
+const Test = () => {
+  const innerTrigger = (
+    <div style={popupBorderStyle}>
+      <div ref="container" />
       <Trigger
         popupPlacement="bottom"
         action={['click']}
@@ -50,43 +50,45 @@ const Test = React.createClass({
       >
         <span href="#" style={{ margin: 20 }}>clickToShowInnerTrigger</span>
       </Trigger>
-    </div>);
-    return (
+    </div>
+  );
+  return (
+    <div>
       <div>
-        <div>
+        <Trigger
+          popupPlacement="left"
+          action={['click']}
+          builtinPlacements={builtinPlacements}
+          popup={<div style={popupBorderStyle}>i am a click popup</div>}
+        >
+          <span>
           <Trigger
-            popupPlacement="left"
-            action={['click']}
-            builtinPlacements={builtinPlacements}
-            popup={<div style={popupBorderStyle}>i am a click popup</div>}
-          >
-            <span>
-            <Trigger
-              popupPlacement="bottom"
-              action={['hover']}
-              builtinPlacements={builtinPlacements}
-              popup={<div style={popupBorderStyle}>i am a hover popup</div>}
-            >
-              <span href="#" style={{ margin: 20 }}>trigger</span>
-            </Trigger>
-            </span>
-          </Trigger>
-        </div>
-        <div style={{ margin: 50 }}>
-          <Trigger
-            popupPlacement="right"
+            popupPlacement="bottom"
             action={['hover']}
             builtinPlacements={builtinPlacements}
-            popup={innerTrigger}
+            popup={<div style={popupBorderStyle}>i am a hover popup</div>}
           >
             <span href="#" style={{ margin: 20 }}>trigger</span>
           </Trigger>
-        </div>
+          </span>
+        </Trigger>
       </div>
-    );
-  },
-});
+      <div style={{ margin: 50 }}>
+        <Trigger
+          popupPlacement="right"
+          action={['hover']}
+          builtinPlacements={builtinPlacements}
+          popup={innerTrigger}
+        >
+          <span href="#" style={{ margin: 20 }}>trigger</span>
+        </Trigger>
+      </div>
+    </div>
+  );
+};
 
-ReactDOM.render(<div style={{ margin: 200 }}>
-  <Test />
-</div>, document.getElementById('__react-content'));
+ReactDOM.render(
+  <div style={{ margin: 200 }}>
+    <Test />
+  </div>
+, document.getElementById('__react-content'));
diff --git a/examples/simple.js b/examples/simple.js
@@ -51,33 +51,31 @@ function getPopupContainer(trigger) {
   return trigger.parentNode;
 }
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
-      mask: false,
-      maskClosable: false,
-      placement: 'right',
-      trigger: {
-        hover: 1,
-      },
-      offsetX: undefined,
-      offsetY: undefined,
-    };
-  },
+class Test extends React.Component {
+  state = {
+    mask: false,
+    maskClosable: false,
+    placement: 'right',
+    trigger: {
+      hover: 1,
+    },
+    offsetX: undefined,
+    offsetY: undefined,
+  };
 
-  onPlacementChange(e) {
+  onPlacementChange = (e) => {
     this.setState({
       placement: e.target.value,
     });
-  },
+  }
 
-  onTransitionChange(e) {
+  onTransitionChange = (e) => {
     this.setState({
       transitionName: e.target.checked ? e.target.value : '',
     });
-  },
+  }
 
-  onTriggerChange(e) {
+  onTriggerChange = (e) => {
     const trigger = assign({}, this.state.trigger);
     if (e.target.checked) {
       trigger[e.target.value] = 1;
@@ -87,49 +85,49 @@ const Test = React.createClass({
     this.setState({
       trigger,
     });
-  },
+  }
 
-  onOffsetXChange(e) {
+  onOffsetXChange = (e) => {
     const targetValue = e.target.value;
     this.setState({
       offsetX: targetValue || undefined,
     });
-  },
+  }
 
-  onOffsetYChange(e) {
+  onOffsetYChange = (e) => {
     const targetValue = e.target.value;
     this.setState({
       offsetY: targetValue || undefined,
     });
-  },
+  }
 
-  onVisibleChange(visible) {
+  onVisibleChange = (visible) => {
     console.log('tooltip', visible);
-  },
+  }
 
-  onMask(e) {
+  onMask = (e) => {
     this.setState({
       mask: e.target.checked,
     });
-  },
+  }
 
-  onMaskClosable(e) {
+  onMaskClosable = (e) => {
     this.setState({
       maskClosable: e.target.checked,
     });
-  },
+  }
 
-  destroy() {
+  destroy = () => {
     this.setState({
       destroyed: true,
     });
-  },
+  }
 
-  destroyPopupOnHide(e) {
+  destroyPopupOnHide = (e) => {
     this.setState({
       destroyPopupOnHide: e.target.checked,
     });
-  },
+  }
 
   render() {
     const state = this.state;
@@ -270,10 +268,7 @@ const Test = React.createClass({
         </Trigger>
       </div>
     </div>);
-  },
-});
+  }
+}
 
-ReactDOM.render(
-  <div>
-    <Test />
-  </div>, document.getElementById('__react-content'));
+ReactDOM.render(<Test />, document.getElementById('__react-content'));
diff --git a/package.json b/package.json
@@ -46,16 +46,17 @@
     "pre-commit": "1.x",
     "rc-tools": "5.x",
     "react": "15.x",
-    "react-addons-test-utils": "15.x",
     "react-dom": "15.x"
   },
   "pre-commit": [
     "lint"
   ],
   "dependencies": {
     "babel-runtime": "6.x",
+    "create-react-class": "^15.5.2",
+    "prop-types": "^15.5.8",
     "rc-align": "2.x",
-    "rc-util": "4.x",
-    "rc-animate": "2.x"
+    "rc-animate": "2.x",
+    "rc-util": "4.x"
   }
 }
diff --git a/src/LazyRenderBox.js b/src/LazyRenderBox.js
@@ -1,15 +1,16 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
-const LazyRenderBox = React.createClass({
-  propTypes: {
+class LazyRenderBox extends Component {
+  static propTypes = {
     children: PropTypes.any,
     className: PropTypes.string,
     visible: PropTypes.bool,
     hiddenClassName: PropTypes.string,
-  },
+  };
   shouldComponentUpdate(nextProps) {
     return nextProps.hiddenClassName || nextProps.visible;
-  },
+  }
   render() {
     const { hiddenClassName, visible, ...props } = this.props;
 
@@ -21,7 +22,7 @@ const LazyRenderBox = React.createClass({
     }
 
     return React.Children.only(props.children);
-  },
-});
+  }
+}
 
 export default LazyRenderBox;
diff --git a/src/Popup.jsx b/src/Popup.jsx
@@ -1,12 +1,13 @@
-import React, { PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Align from 'rc-align';
 import Animate from 'rc-animate';
 import PopupInner from './PopupInner';
 import LazyRenderBox from './LazyRenderBox';
 
-const Popup = React.createClass({
-  propTypes: {
+class Popup extends Component {
+  static propTypes = {
     visible: PropTypes.bool,
     style: PropTypes.object,
     getClassNameFromAlign: PropTypes.func,
@@ -18,13 +19,13 @@ const Popup = React.createClass({
     className: PropTypes.string,
     prefixCls: PropTypes.string,
     onMouseLeave: PropTypes.func,
-  },
+  };
 
   componentDidMount() {
     this.rootNode = this.getPopupDomNode();
-  },
+  }
 
-  onAlign(popupDomNode, align) {
+  onAlign = (popupDomNode, align) => {
     const props = this.props;
     const alignClassName = props.getClassNameFromAlign(props.align);
     const currentAlignClassName = props.getClassNameFromAlign(align);
@@ -33,15 +34,15 @@ const Popup = React.createClass({
       popupDomNode.className = this.getClassName(currentAlignClassName);
     }
     props.onAlign(popupDomNode, align);
-  },
+  }
 
   getPopupDomNode() {
     return ReactDOM.findDOMNode(this.refs.popup);
-  },
+  }
 
-  getTarget() {
+  getTarget = () => {
     return this.props.getRootDomNode();
-  },
+  }
 
   getMaskTransitionName() {
     const props = this.props;
@@ -51,7 +52,7 @@ const Popup = React.createClass({
       transitionName = `${props.prefixCls}-${animation}`;
     }
     return transitionName;
-  },
+  }
 
   getTransitionName() {
     const props = this.props;
@@ -60,11 +61,11 @@ const Popup = React.createClass({
       transitionName = `${props.prefixCls}-${props.animation}`;
     }
     return transitionName;
-  },
+  }
 
   getClassName(currentAlignClassName) {
     return `${this.props.prefixCls} ${this.props.className} ${currentAlignClassName}`;
-  },
+  }
 
   getPopupElement() {
     const props = this.props;
@@ -137,7 +138,7 @@ const Popup = React.createClass({
         </PopupInner>
       </Align>
     </Animate>);
-  },
+  }
 
   getZIndexStyle() {
     const style = {};
@@ -146,7 +147,7 @@ const Popup = React.createClass({
       style.zIndex = props.zIndex;
     }
     return style;
-  },
+  }
 
   getMaskElement() {
     const props = this.props;
@@ -177,17 +178,20 @@ const Popup = React.createClass({
       }
     }
     return maskElement;
-  },
-  saveAlign(align) {
+  }
+
+  saveAlign = (align) => {
     this.alignInstance = align;
-  },
+  }
 
   render() {
-    return (<div>
-      {this.getMaskElement()}
-      {this.getPopupElement()}
-    </div>);
-  },
-});
+    return (
+      <div>
+        {this.getMaskElement()}
+        {this.getPopupElement()}
+      </div>
+    );
+  }
+}
 
 export default Popup;