Merge pull request #43 from streamich/modal-2

feat: 🎸 don't blur elements with data-modal-ignore attribute

Author: streamich

docs/en/Modal.md

@@ -56,3 +56,5 @@ Accepts all [`<Overlay>`](./Overlay.md) props in addition to:
 - `close()` &mdash; method to calle `onClose` event.
 - `idTitle` &mdash; id to set for aria title element.
 - `idDescription` &mdash; id to set for aria description element.
+
+Root nodes with `data-modal-ignore` attribute will not be dirty mutated (to create blur effect).

src/Modal/__story__/story.tsx

@@ -1,9 +1,11 @@
 import {createElement as h} from 'react';
+import {createPortal} from 'react-dom';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {Modal} from '..';
 import {Toggle} from '../../Toggle';
 import ShowDocs from '../../ShowDocs'
+import {AfterTimeout} from '../../AfterTimeout';
 
 storiesOf('UI/Modal', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Modal.md')}))
@@ -17,9 +19,19 @@ storiesOf('UI/Modal', module)
   .add('Button underneath', () =>
     <div>
       <button onClick={() => alert('CLICKED')}>Click me!</button>
-      <Modal>
-        foobar
-      </Modal>
+      {createPortal(
+        <button onClick={() => alert('CLICKED')}>This should be blurred</button>,
+        document.body
+      )}
+      {createPortal(
+        <button data-modal-ignore="" onClick={() => alert('CLICKED')}>This element should not be blurred</button>,
+        document.body
+      )}
+      <AfterTimeout>
+        <Modal>
+          foobar
+        </Modal>
+      </AfterTimeout>
     </div>
   )
   .add('With inputs', () =>

src/Modal/index.ts

@@ -7,6 +7,8 @@ import {Overlay, IOverlayProps} from '../Overlay';
 let id = 0;
 const ESC = 27;
 
+const ignoreAttribute = 'data-modal-ignore';
+
 export interface IModalProps extends IOverlayProps {
   blur?: number;
   dontLockFocus?: boolean;
@@ -57,6 +59,10 @@ export class Modal extends Component<IModalProps, IModalState> {
       const sibling = siblings[i] as HTMLElement;
       const sib = sibling as any;
 
+      if (sibling.hasAttribute(ignoreAttribute)) {
+        continue;
+      }
+
       if (sibling === this.el) {
         continue;
       }
@@ -101,6 +107,10 @@ export class Modal extends Component<IModalProps, IModalState> {
     for (let i = 0; i < siblings.length; i++) {
       const sibling = siblings[i] as HTMLElement;
 
+      if (sibling.hasAttribute(ignoreAttribute)) {
+        continue;
+      }
+
       if (sibling === el) {
         continue;
       }