feat: add blur to <Dimmable>

MailOnline · Mar 4, 2018 · e64f3bc · e64f3bc
1 parent 1779593
commit e64f3bc
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/src/Dimmable/__story__/story.tsx b/src/Dimmable/__story__/story.tsx
@@ -25,7 +25,7 @@ storiesOf('UI/Dimmable', module)
       <div>
         <Dimmable dim={on}>
           <div style={{width: 500, height: 300, border: '1px solid tomato'}}>
-            <div>
+            <div style={{filter: 'grayscale(100%)'}}>
               Single child node...
             </div>
           </div>
@@ -65,3 +65,10 @@ storiesOf('UI/Dimmable', module)
       </div>
     </Dimmable>
   )
+  .add('Set color', () =>
+    <Dimmable color='rgba(255, 255, 255, .3)' 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
@@ -15,25 +15,54 @@ export class Dimmable extends Component<IDimmableProps> {
   };
 
   render () {
-    const {children, dim, ...rest} = this.props;
+    const {children, dim, blur, renderOverlay, ...rest} = this.props;
     const element = Children.only(children);
     const elementChildren = Children.toArray(element.props.children);
-    let elementChild: React.ReactChild;
+    let child: React.ReactChild;
     const dimmerProps: IDimmerProps = rest;
 
     dimmerProps.hidden = !dim;
 
-    const elementChildrenProps = {};
+    let childProps = null;
+
+    if (dim) {
+      childProps = {
+        style: {
+          pointerEvents: 'none'
+        }
+      };
+
+      if (blur) {
+        childProps.style = {
+          filter: `blur(${blur}px)`
+        };
+      }
+    }
 
     if ((elementChildren.length === 1) && (typeof elementChildren[0] === 'object')) {
-      elementChild = elementChildren[0];
+      child = elementChildren[0] as React.ReactElement<any>;
+
+      if (childProps) {
+        if (child.props.style) {
+          childProps.style = {
+            ...child.props.style,
+            ...childProps.style
+          };
+
+          if (childProps.style.filter && child.props.style.filter) {
+            childProps.style.filter += ' ' + child.props.style.filter;
+          }
+        }
+
+        child = cloneElement(child, childProps);
+      }
     } else {
-      elementChild = h('div', elementChildrenProps, ...elementChildren);
+      child = h('div', childProps, ...elementChildren);
     }
 
     return cloneElement(element, {},
-      elementChild,
-      h(Dimmer, rest, (this.props.renderOverlay || noop)(dim)),
+      child,
+      h(Dimmer, rest, (renderOverlay || noop)(dim)),
     );
   }
 }