feat: improve <Dimmer> component

MailOnline · Mar 3, 2018 · 915238e · 915238e
1 parent b3e1817
commit 915238e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 44 deletions.
diff --git a/src/Dimmer/__story__/story.tsx b/src/Dimmer/__story__/story.tsx
@@ -3,14 +3,53 @@ import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
 import {Dimmer} from '..';
+import {Toggle} from '../../Toggle';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('UI/Dimmer', module)
   // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmer.md')}))
   .add('Example', () =>
     <div style={{width: 500, height: 300, border: '1px solid tomato', position: 'absolute'}}>
+      Inline...
       <Dimmer>
         Children...
       </Dimmer>
     </div>
   )
+  .add('Multiple sibling nodes', () =>
+    <div style={{width: 500, height: 300, border: '1px solid tomato', position: 'absolute'}}>
+      <div>
+        Sibling 1
+      </div>
+      <div>
+        Sibling 2
+      </div>
+      <Dimmer>
+        Children...
+      </Dimmer>
+      <div>
+        Sibling 3
+      </div>
+    </div>
+  )
+  .add('hidden=', () =>
+    <div style={{width: 500, height: 300, border: '1px solid tomato', position: 'absolute'}}>
+      Inline...
+      <Dimmer hidden>
+        Children...
+      </Dimmer>
+    </div>
+  )
+  .add('Toggle', () =>
+    <Toggle>{({on, toggle}) =>
+      <div>
+        <div style={{width: 500, height: 300, border: '1px solid tomato', position: 'absolute'}}>
+          Inline...
+          <Dimmer hidden={!on}>
+            Children...
+          </Dimmer>
+        </div>
+        <div onClick={toggle}>Toggle: {on ? 'on' : 'off'}</div>
+      </div>
+    }</Toggle>
+  )
diff --git a/src/Dimmer/index.tsx b/src/Dimmer/index.tsx
@@ -3,43 +3,23 @@ import {h} from '../util';
 import {render} from 'react-universal-interface';
 
 export interface IDimmerProps {
-  blur?: number;
   color?: string;
   hidden?: boolean;
 }
 
-export interface IDimmerState {
-}
-
-export class Dimmer extends Component<IDimmerProps, IDimmerState> {
+export class Dimmer extends Component<IDimmerProps, {}> {
   static defaultProps = {
-    blur: 5,
     color: 'rgba(0,0,0,0.5)',
   };
 
   el: HTMLElement = null;
 
-  state: IDimmerState = {
-
-  };
-
   ref = (el) => {
     this.el = el;
   };
 
   componentDidMount () {
     const parent = this.el.parentElement;
-
-    this.applyDOMChanges();
-  }
-
-  componentWillUnmount () {
-    this.removeDOMChanges();
-  }
-
-  applyDOMChanges () {
-    const parent = this.el.parentElement;
-    const siblings = Array.from(document.body.children);
     const position = parent.style.getPropertyValue('position');
 
     if (process.env.NODE_ENV !== 'production') {
@@ -55,34 +35,31 @@ export class Dimmer extends Component<IDimmerProps, IDimmerState> {
     if (position !== 'relative') {
       parent.style.setProperty('position', 'relative', 'important');
     }
-
-    for (let i = 0; i < siblings.length; i++) {
-      const sibling = siblings[i];
-
-      if (sibling === this.el) {
-        continue;
-      }
-
-
-    }
-  }
-
-  removeDOMChanges () {
-
   }
 
   render () {
+    let style: any = {
+      background: this.props.color,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      zIndex: 2147483647, // Max z-index.
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      transition: 'opacity .3s',
+    };
+
+    if (this.props.hidden) {
+      style.opacity = 0;
+      style.pointerEvents = 'none';
+    }
+
     return h('div', {
       ref: this.ref,
-      style: {
-        background: this.props.color,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: 2147483647, // Max z-index.
-      }
+      style,
     },
       render(this.props, this.state)
     );