add Notification portal

robyth · May 6, 2016 · 0f680f8 · 0f680f8
1 parent 84c682e
commit 0f680f8
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/docs/notification/api.md b/docs/notification/api.md
@@ -46,6 +46,12 @@
 
 通知栏是否可见，使用时 `visible` 为 `true` 打开通知，否则关闭。
 
+##### `static`
+
+> PropType: `bool`
+
+是否渲染为静态的通知栏。
+
 ##### `onDismiss`
 
 > PropType: `func`

diff --git a/kitchen-sink/pages/NotificationExample.js b/kitchen-sink/pages/NotificationExample.js
@@ -75,14 +75,14 @@ const NotificationExample = React.createClass({
         </Notification>
 
         <Group
-          header="样式展示"
+          header="静态通知栏样式展示"
         >
-          <Notification visible>这是一个通知 :)</Notification>
-          <Notification visible amStyle="primary">这是一个通知 :)</Notification>
-          <Notification visible amStyle="secondary">这是一个通知 :)</Notification>
-          <Notification visible amStyle="success">这是一个通知 :)</Notification>
-          <Notification visible amStyle="warning">这是一个通知 :)</Notification>
-          <Notification visible amStyle="alert">这是一个通知 :)</Notification>
+          <Notification visible static>这是一个通知 :)</Notification>
+          <Notification visible static amStyle="primary">这是一个通知 :)</Notification>
+          <Notification visible static amStyle="secondary">这是一个通知 :)</Notification>
+          <Notification visible static amStyle="success">这是一个通知 :)</Notification>
+          <Notification visible static amStyle="warning">这是一个通知 :)</Notification>
+          <Notification visible static amStyle="alert">这是一个通知 :)</Notification>
         </Group>
       </Container>
     );

diff --git a/src/js/Notification.js b/src/js/Notification.js
@@ -1,6 +1,10 @@
 import React from 'react';
-import classNames from 'classnames';
+import ReactDOM, {
+  unmountComponentAtNode,
+  unstable_renderSubtreeIntoContainer as renderSubtreeIntoContainer
+} from 'react-dom';
 import CSSTransitionGroup from 'react-addons-css-transition-group';
+import classNames from 'classnames';
 import ClassNameMixin from './mixins/ClassNameMixin';
 import Icon from './Icon';
 
@@ -87,4 +91,57 @@ const Notification = React.createClass({
   }
 });
 
-export default Notification;
+// const bodyElement = canUseDOM ? document.body : {appendChild: () => {}};
+const body = document.body;
+
+const NotificationPortal = React.createClass({
+  propTypes: {
+    visible: React.PropTypes.bool.isRequired,
+  },
+
+  getDefaultProps() {
+    return {
+      visible: false,
+    };
+  },
+
+  componentDidMount() {
+    if (!this.isStatic()) {
+      this.node = document.createElement('div');
+      this.node.className = '__notification-portal';
+      body.appendChild(this.node);
+      this.renderModal(this.props);
+    }
+  },
+
+  componentWillReceiveProps(nextProps) {
+    if (!this.isStatic()) {
+      this.renderModal(nextProps);
+    }
+  },
+
+  componentWillUnmount() {
+    if (!this.isStatic()) {
+      unmountComponentAtNode(this.node);
+      body.removeChild(this.node);
+    }
+  },
+
+  isStatic() {
+    return this.props.static;
+  },
+
+  renderModal(props) {
+    this.portal = renderSubtreeIntoContainer(
+      this,
+      <Notification {...props} />,
+      this.node
+    );
+  },
+
+  render() {
+    return this.isStatic() ? <Notification {...this.props} /> : null;
+  }
+});
+
+export default NotificationPortal;