feat: improve <Overlay>

streamich · Feb 13, 2018 · 67186ca · 67186ca
1 parent 6b3bfbe
commit 67186ca
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/Overlay/__story__/story.tsx b/src/Overlay/__story__/story.tsx
@@ -5,7 +5,7 @@ import {linkTo} from '@storybook/addon-links';
 import {Overlay} from '..';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
-storiesOf('Other/Overlay', module)
+storiesOf('UI/Overlay', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Overlay.md')}))
   .add('Basic example', () =>
     <div>
@@ -64,3 +64,10 @@ storiesOf('Other/Overlay', module)
       </Overlay>
     </div>
   )
+  .add('No animation', () =>
+    <div>
+      <Overlay time={0}>
+        foobar
+      </Overlay>
+    </div>
+  )
diff --git a/src/Overlay/index.ts b/src/Overlay/index.ts
@@ -4,14 +4,16 @@ import {h} from '../util';
 
 export interface IOverlayProps {
   color?: string;
+  time?: number;
 }
 
 export interface IOverlayState {
 }
 
 export class Overlay extends Component<IOverlayProps, IOverlayState> {
   static defaultProps = {
-    color: 'rgba(0,0,0,0.5)'
+    color: 'rgba(0,0,0,0.5)',
+    time: 300,
   };
 
   onElement = (el) => {
@@ -26,7 +28,7 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
     style.right = 0;
     style.bottom = 0;
     style.background = this.props.color;
-    style.transition = '0.3s opacity';
+    style.transition = this.props.time + 'ms opacity';
     style.opacity = 0;
 
     style.display = 'flex';