feat: add <Dimmable> renderOverlay()

streamich · Mar 4, 2018 · 1779593 · 1779593
1 parent ddb8ae7
commit 1779593
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/Dimmable/__story__/story.tsx b/src/Dimmable/__story__/story.tsx
@@ -16,7 +16,7 @@ storiesOf('UI/Dimmable', module)
             Inline...
           </div>
         </Dimmable>
-        <div onClick={toggle}>Toggle: {on ? 'on' : 'off'}</div>
+        <button onClick={toggle}>Toggle: {on ? 'on' : 'off'}</button>
       </div>
     }</Toggle>
   )
@@ -30,7 +30,7 @@ storiesOf('UI/Dimmable', module)
             </div>
           </div>
         </Dimmable>
-        <div onClick={toggle}>Toggle: {on ? 'on' : 'off'}</div>
+        <button onClick={toggle}>Toggle: {on ? 'on' : 'off'}</button>
       </div>
     }</Toggle>
   )
@@ -47,7 +47,7 @@ storiesOf('UI/Dimmable', module)
             </div>
           </div>
         </Dimmable>
-        <div onClick={toggle}>Toggle: {on ? 'on' : 'off'}</div>
+        <button onClick={toggle}>Toggle: {on ? 'on' : 'off'}</button>
       </div>
     }</Toggle>
   )
@@ -58,3 +58,10 @@ storiesOf('UI/Dimmable', module)
       </div>
     </Dimmable>
   )
+  .add('renderOverlay', () =>
+    <Dimmable dim renderOverlay={(on) => 'Hello'}>
+      <div style={{width: 500, height: 300, border: '1px solid tomato'}}>
+        Inline...
+      </div>
+    </Dimmable>
+  )
diff --git a/src/Dimmable/index.ts b/src/Dimmable/index.ts
@@ -1,11 +1,12 @@
 import {IDimmableProps} from './index';
 import {Component, Children, cloneElement} from 'react';
-import {h} from '../util';
+import {h, noop} from '../util';
 import {Dimmer, IDimmerProps} from '../Dimmer';
 
 export interface IDimmableProps extends IDimmerProps {
   dim?: boolean;
   blur?: number;
+  renderOverlay?: (dim?: boolean) => React.ReactChild;
 }
 
 export class Dimmable extends Component<IDimmableProps> {
@@ -32,7 +33,7 @@ export class Dimmable extends Component<IDimmableProps> {
 
     return cloneElement(element, {},
       elementChild,
-      h(Dimmer, rest),
+      h(Dimmer, rest, (this.props.renderOverlay || noop)(dim)),
     );
   }
 }
diff --git a/src/Dimmer/__story__/story.tsx b/src/Dimmer/__story__/story.tsx
@@ -49,7 +49,7 @@ storiesOf('UI/Dimmer', module)
             Children...
           </Dimmer>
         </div>
-        <div onClick={toggle}>Toggle: {on ? 'on' : 'off'}</div>
+        <button onClick={toggle}>Toggle: {on ? 'on' : 'off'}</button>
       </div>
     }</Toggle>
   )