Merge d7193a8 into a8b7aa0

reactjs · Feb 27, 2017 · 75c557e · 75c557e
2 parents a8b7aa0 + d7193a8
commit 75c557e
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 .idea/
 _book
 coverage
+npm-debug.log
diff --git a/README.md b/README.md
@@ -120,6 +120,33 @@ You can use this to remove scrolling on the the body while the modal is open.
 }
 ```
 
+### Overriding overlay
+You can override default overlay component providing `overlay` prop to `Modal`.  
+Note that overlay component should be a class (not function) due to internal refs usage.
+
+```js
+import Modal, { ModalOverlay } from 'react-modal';
+
+class MyOverlay extends ModalOverlay {
+  render () {
+    return (
+      <div {...restProps}>
+        {children}
+      </div>
+    );
+  }
+}
+
+<Modal
+  {...modalProps}
+  overlay={<MyOverlay />}
+>
+  {...modalContent}
+<Modal>
+```
+
+See another example in [overlay example](examples/overlay/app.js).
+
 ## Examples
 Inside an app:
 

diff --git a/examples/overlay/app.css b/examples/overlay/app.css
@@ -0,0 +1,31 @@
+.ReactModal__Overlay {
+  -webkit-perspective: 600;
+  perspective: 600;
+  opacity: 0;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+  transition: opacity 150ms ease-out;
+}
+
+.ReactModal__Content {
+  -webkit-transform: scale(0.5) rotateX(-30deg);
+  transform: scale(0.5) rotateX(-30deg);
+}
+
+.ReactModal__Content--after-open {
+  -webkit-transform: scale(1) rotateX(0deg);
+  transform: scale(1) rotateX(0deg);
+  transition: all 150ms ease-in;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content--before-close {
+  -webkit-transform: scale(0.5) rotateX(30deg);
+  transform: scale(0.5) rotateX(30deg);
+  transition: all 150ms ease-in;
+}
diff --git a/examples/overlay/app.js b/examples/overlay/app.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../../lib/index';
+
+const appElement = document.getElementById('example');
+
+Modal.setAppElement('#example');
+
+const MyOverlay = React.createClass({
+  render: function() {
+    const { children, content, ...restProps } = this.props;
+
+    return (
+      <div {...restProps} >
+        {children}
+        <p
+          style={{
+            position: 'absolute',
+            bottom: '5px',
+            right: '20px',
+            margin: '3px'
+          }}
+        >
+          {content}
+        </p>
+      </div>
+    );
+  }
+});
+
+const App = React.createClass({
+  getInitialState: function() {
+    return { modalIsOpen: false };
+  },
+
+  openModal: function() {
+    this.setState({modalIsOpen: true});
+  },
+
+  closeModal: function() {
+    this.setState({modalIsOpen: false});
+  },
+
+  handleModalCloseRequest: function() {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({modalIsOpen: false});
+  },
+
+  handleInputChange: function() {
+    this.setState({foo: 'bar'});
+  },
+
+  render: function() {
+    return (
+      <div>
+        <button onClick={this.openModal}>Open Modal</button>
+        <Modal
+          ref="mymodal"
+          closeTimeoutMS={150}
+          isOpen={this.state.modalIsOpen}
+          onRequestClose={this.handleModalCloseRequest}
+          overlay={
+            <MyOverlay content="Some special content in overlay" />
+          }
+        >
+          <h1>Note overlay text</h1>
+          <button onClick={this.closeModal}>close</button>
+        </Modal>
+      </div>
+    );
+  }
+});
+
+ReactDOM.render(<App/>, appElement);
diff --git a/examples/overlay/index.html b/examples/overlay/index.html
@@ -0,0 +1,14 @@
+<!doctype html public "embarassment">
+<title>Overlay Example</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+<link rel="stylesheet" href="http://instructure-react.github.io/library/shared.css"/>
+<link rel="stylesheet" href="app.css"/>
+<body>
+  <header class="branding padbox">
+    <h1>react-modal</h1>
+    <h2>an accessible React modal dialog component</h2>
+  </header>
+  <div id="example" class="padbox"></div>
+  <a target="_top" href="https://github.com/reactjs/react-modal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
+  <script src="../__build__/shared.js"></script>
+  <script src="../__build__/overlay.js"></script>
diff --git a/lib/components/Modal.js b/lib/components/Modal.js
@@ -31,7 +31,8 @@ export default class Modal extends Component {
     shouldCloseOnOverlayClick: React.PropTypes.bool,
     parentSelector: React.PropTypes.func,
     role: React.PropTypes.string,
-    contentLabel: React.PropTypes.string.isRequired
+    contentLabel: React.PropTypes.string.isRequired,
+    overlay: React.PropTypes.element
   };
   /* eslint-enable react/no-unused-prop-types */
 
@@ -41,7 +42,8 @@ export default class Modal extends Component {
     ariaHideApp: true,
     closeTimeoutMS: 0,
     shouldCloseOnOverlayClick: true,
-    parentSelector () { return document.body; }
+    parentSelector () { return document.body; },
+    overlay: null
   };
 
   static defaultStyles = {

diff --git a/lib/components/ModalOverlay.js b/lib/components/ModalOverlay.js
@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class ModalOverlay extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.objectOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ),
+    onMouseDown: PropTypes.func,
+    onMouseUp: PropTypes.func,
+    children: PropTypes.element
+  };
+
+  static defaultProps = {
+    style: {},
+  };
+
+  render () {
+    const { children, ...restProps } = this.props;
+
+    return (
+      <div {...restProps}>
+        {children}
+      </div>
+    );
+  }
+}
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import Assign from 'lodash.assign';
+import ModalOverlay from './ModalOverlay';
+
 import scopeTab from '../helpers/scopeTab';
 import {
   returnFocus,
@@ -42,14 +44,15 @@ export default class ModalPortal extends Component {
     }),
     role: PropTypes.string,
     children: PropTypes.node,
-    contentLabel: PropTypes.string
+    contentLabel: PropTypes.string,
+    overlay: PropTypes.element
   };
 
   static defaultProps = {
     style: {
       overlay: {},
       content: {}
-    }
+    },
   };
 
   constructor () {
@@ -204,30 +207,50 @@ export default class ModalPortal extends Component {
     const contentStyles = (this.props.className) ? {} : this.props.defaultStyles.content;
     const overlayStyles = (this.props.overlayClassName) ? {} : this.props.defaultStyles.overlay;
 
+    const overlayProps = {
+      ref: (c) => { this.overlay = c; },
+      className: this.buildClassName('overlay', this.props.overlayClassName),
+      style: Assign({}, overlayStyles, this.props.style.overlay || {}),
+      onClick: this.handleOverlayOnClick,
+      onMouseDown: this.handleOverlayMouseDown,
+      onMouseUp: this.handleOverlayMouseUp,
+    };
+
     // Disabling this rule is okay, since we know what is going on here, that being said
     // longterm we should probably do this better.
     /* eslint-disable jsx-a11y/no-static-element-interactions */
-    return this.shouldBeClosed() ? <div /> : (
+    const overlayContent = (
       <div
-        ref={(c) => { this.overlay = c; }}
-        className={this.buildClassName('overlay', this.props.overlayClassName)}
-        style={Assign({}, overlayStyles, this.props.style.overlay || {})}
-        onClick={this.handleOverlayOnClick}
+        ref={(c) => { this.content = c; }}
+        style={Assign({}, contentStyles, this.props.style.content || {})}
+        className={this.buildClassName('content', this.props.className)}
+        tabIndex={-1}
+        onKeyDown={this.handleKeyDown}
+        onClick={this.handleContentOnClick}
+        role={this.props.role}
+        aria-label={this.props.contentLabel}
       >
-        <div
-          ref={(c) => { this.content = c; }}
-          style={Assign({}, contentStyles, this.props.style.content || {})}
-          className={this.buildClassName('content', this.props.className)}
-          tabIndex={-1}
-          onKeyDown={this.handleKeyDown}
-          onClick={this.handleContentOnClick}
-          role={this.props.role}
-          aria-label={this.props.contentLabel}
-        >
-          {this.props.children}
-        </div>
+        {this.props.children}
       </div>
     );
     /* eslint-enable jsx-a11y/no-static-element-interactions */
+
+    if (this.shouldBeClosed()) {
+      return <div />;
+    }
+
+    if (this.props.overlay && typeof this.props.overlay === 'object') {
+      return React.cloneElement(
+        this.props.overlay,
+        overlayProps,
+        overlayContent
+      );
+    }
+
+    return (
+      <ModalOverlay {...overlayProps}>
+        {overlayContent}
+      </ModalOverlay>
+    );
   }
 }
diff --git a/lib/index.js b/lib/index.js
@@ -1,3 +1,5 @@
 import Modal from './components/Modal';
+import ModalOverlay from './components/ModalOverlay';
 
 export default Modal;
+export { ModalOverlay };
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -11,6 +11,7 @@ import sinon from 'sinon';
 import expect from 'expect';
 import ReactDOM from 'react-dom';
 import Modal from '../lib/components/Modal';
+import ModalOverlay from '../lib/components/ModalOverlay';
 import * as ariaAppHider from '../lib/helpers/ariaAppHider';
 import { renderModal, unmountModal, emptyDOM } from './helper';
 
@@ -182,7 +183,8 @@ describe('Modal', () => {
 
   it('supports overlayClassName', () => {
     const modal = renderModal({ isOpen: true, overlayClassName: 'myOverlayClass' });
-    expect(modal.portal.overlay.className.indexOf('myOverlayClass')).toNotEqual(-1);
+    expect(modal.portal.overlay.props.className.indexOf('myOverlayClass')).toNotEqual(-1);
+    unmountModal();
   });
 
   it('overrides the default styles when a custom classname is used', () => {
@@ -192,7 +194,7 @@ describe('Modal', () => {
 
   it('overrides the default styles when a custom overlayClassName is used', () => {
     const modal = renderModal({ isOpen: true, overlayClassName: 'myOverlayClass' });
-    expect(modal.portal.overlay.style.backgroundColor).toEqual('');
+    expect(modal.portal.overlay.props.style.backgroundColor).toNotExist();
   });
 
   it('supports adding style to the modal contents', () => {
@@ -207,12 +209,12 @@ describe('Modal', () => {
 
   it('supports adding style on the modal overlay', () => {
     const modal = renderModal({ isOpen: true, style: { overlay: { width: '75px' } } });
-    expect(modal.portal.overlay.style.width).toEqual('75px');
+    expect(modal.portal.overlay.props.style.width).toEqual('75px');
   });
 
   it('supports overriding style on the modal overlay', () => {
     const modal = renderModal({ isOpen: true, style: { overlay: { position: 'static' } } });
-    expect(modal.portal.overlay.style.position).toEqual('static');
+    expect(modal.portal.overlay.props.style.position).toEqual('static');
   });
 
   it('supports overriding the default styles', () => {
@@ -225,6 +227,25 @@ describe('Modal', () => {
     Modal.defaultStyles.content.position = previousStyle;
   });
 
+  it('supports overriding overlay component', () => {
+    class MyOverlay extends ModalOverlay {
+      render () {
+        const { children, text, ...restProps } = this.props;
+
+        return (
+          <div {...restProps}>
+            {children}
+            <p>{text}</p>
+          </div>
+        );
+      }
+    }
+
+    const text = 'Extra text in overlay';
+    const modal = renderModal({ isOpen: true, overlay: <MyOverlay text={text} /> });
+    expect(modal.portal.overlay.props.text).toEqual(text);
+  });
+
   it('adds class to body when open', () => {
     renderModal({ isOpen: false });
     expect(document.body.className.indexOf('ReactModal__Body--open') !== -1).toEqual(false);