feat: add blur() effect for <Modal>

This allows to do frosted glass effect
MailOnline · Mar 3, 2018 · a048424 · a048424
1 parent a2e8a8b
commit a048424
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/Modal/__story__/story.tsx b/src/Modal/__story__/story.tsx
@@ -58,7 +58,7 @@ storiesOf('UI/Modal', module)
       <Toggle>{({on, toggle}) =>
         <div>
           <button onClick={toggle}>Open dialog</button>
-          {on && <Modal color='tomato' onClick={toggle} onEsc={toggle}>
+          {on && <Modal color='rgba(0,0,0,.3)' onClick={toggle} onEsc={toggle}>
             <div
               style={{
                 width: 300,

diff --git a/src/Modal/index.ts b/src/Modal/index.ts
@@ -9,6 +9,7 @@ let id = 0;
 const ESC = 27;
 
 export interface IModalProps extends IOverlayProps {
+  blur?: number;
   dontLockFocus?: boolean;
   onEsc?: (event: KeyboardEvent) => void;
   onClose?: () => void;
@@ -21,6 +22,10 @@ export interface IModalState {
 }
 
 export class Modal extends Component<IModalProps, IModalState> {
+  static defaultProps = {
+    blur:  5
+  };
+
   id: number;
   el: HTMLElement = null;
   activeEl: Element; // Previous active element;
@@ -67,8 +72,9 @@ export class Modal extends Component<IModalProps, IModalState> {
       const lock = sib.__libreact_lock;
 
       sib.inert = lock.inert;
-      sibling.style.setProperty('pointer-events', lock.pointerEvents),
-      sibling.style.setProperty('user-select', lock.userSelect),
+      sibling.style.setProperty('pointer-events', lock.pointerEvents);
+      sibling.style.setProperty('user-select', lock.userSelect);
+      sibling.style.setProperty('filter', lock.filter || 'none');
 
       sibling.removeAttribute('aria-hidden');
       delete sib.__libreact_lock;
@@ -108,17 +114,25 @@ export class Modal extends Component<IModalProps, IModalState> {
       }
 
       const sib = sibling as any;
+      let filter = sibling.style.getPropertyValue('filter');
+
+      if (filter === 'none') {
+        filter = '';
+      }
 
       sib.__libreact_lock = {
         owner: this,
         inert: sib.inert,
         pointerEvents: sibling.style.getPropertyValue('pointer-events'),
         userSelect: sibling.style.getPropertyValue('user-select'),
+        filter
       };
 
       sib.inert = true;
       sibling.style.setProperty('pointer-events', 'none');
       sibling.style.setProperty('user-select', 'none');
+      console.log('F', 'filter', (filter ? filter + ',' : '') + `blur(${this.props.blur}px)`);
+      sibling.style.setProperty('filter', (filter ? filter + ',' : '') + `blur(${this.props.blur}px)`);
       sibling.setAttribute('aria-hidden', 'true');
     }
 

diff --git a/src/Overlay/__story__/story.tsx b/src/Overlay/__story__/story.tsx
@@ -9,6 +9,7 @@ storiesOf('UI/Overlay', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Overlay.md')}))
   .add('Basic example', () =>
     <div>
+      <div style={{width: 100, height: 100, background: 'tomato'}} />
       <Overlay>
         foobar
       </Overlay>

diff --git a/src/Overlay/index.ts b/src/Overlay/index.ts
@@ -40,7 +40,6 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
     style.background = this.props.color;
     style.transition = this.props.time + 'ms opacity';
     style.opacity = 0;
-
     style.display = 'flex';
     style.alignItems = 'center';
     style.justifyContent = 'center';