clean state

react-component · Jul 19, 2016 · 322d4b6 · 322d4b6
1 parent 0bd721f
commit 322d4b6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-dialog",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "description": "dialog ui component for react",
   "keywords": [
     "react",

diff --git a/src/Dialog.jsx b/src/Dialog.jsx
@@ -57,6 +57,11 @@ function offset(el) {
 
 const Dialog = React.createClass({
   propTypes: {
+    className: PropTypes.string,
+    keyboard: PropTypes.bool,
+    style: PropTypes.object,
+    mask: PropTypes.bool,
+    children: PropTypes.any,
     onAfterClose: PropTypes.func,
     onClose: PropTypes.func,
     closable: PropTypes.bool,
@@ -71,6 +76,13 @@ const Dialog = React.createClass({
   getDefaultProps() {
     return {
       onAfterClose: noop,
+      className: '',
+      mask: true,
+      visible: false,
+      keyboard: true,
+      closable: true,
+      maskClosable: true,
+      prefixCls: 'rc-dialog',
       onClose: noop,
     };
   },

diff --git a/src/DialogWrap.jsx b/src/DialogWrap.jsx
@@ -2,110 +2,51 @@ import React, { PropTypes } from 'react';
 import Dialog from './Dialog';
 import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';
 
-function noop() {
-}
-
-function pick(obj, fields) {
-  const ret = {};
-  fields.forEach((f) => {
-    if (obj[f] !== undefined) {
-      ret[f] = obj[f];
-    }
-  });
-  return ret;
-}
-
 const DialogWrap = React.createClass({
   propTypes: {
-    className: PropTypes.string,
-    keyboard: PropTypes.bool,
-    wrapStyle: PropTypes.object,
-    style: PropTypes.object,
-    mask: PropTypes.bool,
-    children: PropTypes.any,
-    closable: PropTypes.bool,
-    maskClosable: PropTypes.bool,
-    prefixCls: PropTypes.string,
     visible: PropTypes.bool,
-    onClose: PropTypes.func,
   },
   mixins: [
     getContainerRenderMixin({
       isVisible(instance) {
-        return instance.state.visible;
+        return instance.props.visible;
       },
       autoDestroy: false,
       getComponent(instance, extra) {
-        const props = instance.props;
-        const dialogProps = pick(props, [
-          'className', 'closable', 'maskClosable',
-          'title', 'footer', 'mask', 'keyboard',
-          'animation', 'transitionName',
-          'maskAnimation', 'maskTransitionName', 'mousePosition',
-          'prefixCls', 'style', 'width', 'wrapStyle',
-          'height', 'zIndex', 'bodyStyle', 'wrapClassName',
-        ]);
         return (
           <Dialog
-            {...dialogProps}
-            onClose={instance.onClose}
-            visible={instance.state.visible}
+            {...instance.props}
             {...extra}
             key="dialog"
-          >
-            {props.children}
-          </Dialog>
+          />
         );
       },
     }),
   ],
 
   getDefaultProps() {
     return {
-      className: '',
-      mask: true,
-      keyboard: true,
-      closable: true,
-      maskClosable: true,
-      prefixCls: 'rc-dialog',
-      onClose: noop,
+      visible: false,
     };
   },
 
-  getInitialState() {
-    return {
-      visible: this.props.visible,
-    };
-  },
-
-  componentWillReceiveProps({ visible }) {
-    if (visible !== undefined) {
-      this.setState({
-        visible,
-      });
-    }
-  },
-
-  shouldComponentUpdate(_, nextState) {
-    return !!(this.state.visible || nextState.visible);
+  shouldComponentUpdate({ visible }) {
+    return !!(this.props.visible || visible);
   },
 
   componentWillUnmount() {
-    if (this.state.visible) {
+    if (this.props.visible) {
       this.renderComponent({
         onAfterClose: this.removeContainer,
-        onClose: noop,
+        onClose() {
+        },
         visible: false,
       });
     } else {
       this.removeContainer();
     }
   },
 
-  onClose(e) {
-    this.props.onClose(e);
-  },
-
   getElement(part) {
     return this._component.getElement(part);
   },

diff --git a/tests/index.js b/tests/index.js
@@ -20,6 +20,24 @@ describe('dialog', () => {
 
   let callback1;
 
+  const DialogWrap = React.createClass({
+    getInitialState() {
+      return {
+        visible: false,
+        maskClosable: true,
+      };
+    },
+    render() {
+      return (
+        <Dialog
+          {...this.props}
+          visible={this.state.visible}
+          maskClosable={this.state.maskClosable}
+        />
+      );
+    },
+  });
+
   beforeEach(() => {
     function onClose() {
       callback1 = 1;
@@ -30,13 +48,13 @@ describe('dialog', () => {
 
     callback1 = 0;
     dialog = ReactDOM.render((
-      <Dialog
+      <DialogWrap
         style={{ width: 600 }}
         title={title}
         onClose={onClose}
       >
         <p>第一个dialog</p>
-      </Dialog>), container);
+      </DialogWrap>), container);
   });
 
   afterEach(() => {
@@ -149,9 +167,9 @@ describe('dialog', () => {
   });
 
   it('renderToBody', () => {
-    const d = ReactDOM.render(<Dialog>
+    const d = ReactDOM.render(<DialogWrap>
       <p className="renderToBody">1</p>
-    </Dialog>, container);
+    </DialogWrap>, container);
     expect($('.renderToBody').length).to.be(0);
     expect($('.rc-dialog-wrap').length).to.be(0);
     d.setState({