Small fixes

goalifyplus · Sep 9, 2017 · 921e71e · 921e71e
1 parent 3494d23
commit 921e71e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/packages/react-toolbox-core/src/components/Dialog/Dialog.tsx b/packages/react-toolbox-core/src/components/Dialog/Dialog.tsx
@@ -6,10 +6,7 @@ import { OverlayProps } from '../Overlay';
 export interface DialogFactoryArgs {
   Overlay: ComponentClass<OverlayProps>;
   WrapperNode: ComponentClass<WrapperNodeProps>;
-  passthrough: PassTroughFunction<
-    DialogProps,
-    'Overlay' | 'ContainerNode' | 'BackdropNode'
-  >;
+  passthrough: PassTroughFunction<DialogProps, 'Overlay' | 'WrapperNode'>;
 }
 
 export interface DialogProps {
@@ -37,7 +34,12 @@ export default function dialogFactory({
           active={active}
           onClick={onOverlayClick}
         >
-          <WrapperNode active={active}>{children}</WrapperNode>
+          <WrapperNode
+            {...passProps(this.props, 'WrapperNode', this)}
+            active={active}
+          >
+            {children}
+          </WrapperNode>
         </Overlay>
       );
     }

diff --git a/packages/react-toolbox-sc/src/Dialog/Dialog.js b/packages/react-toolbox-sc/src/Dialog/Dialog.js
@@ -1,6 +1,8 @@
+import { path } from 'ramda';
 import styled, { css } from 'styled-components';
 import dialogFactory from 'react-toolbox-core/lib/components/Dialog';
 import withActiveMount from 'react-toolbox-core/lib/hoc/withActiveMount';
+import withOverride from '../utils/withOverride';
 import Overlay from '../Overlay';
 
 export const SIZES = {
@@ -11,11 +13,20 @@ export const SIZES = {
 };
 
 const Dialog = dialogFactory({
-  passthrough: ['overrides'],
+  passthrough: function(props, nodeName) {
+    switch (nodeName) {
+      case 'Overlay':
+        return { overrides: props.overrides };
+      case 'WrapperNode': {
+        return { overrides: props.overrides, size: props.size };
+      }
+    }
+  },
   Overlay: styled(Overlay)`
     align-items: center;
     display: flex;
     justify-content: center;
+    ${withOverride('Overlay')};
   `,
   WrapperNode: styled.div`
     background-color: rgb(255, 255, 255);
@@ -31,6 +42,7 @@ const Dialog = dialogFactory({
 
     ${getActiveStyle};
     ${getSizeStyle};
+    ${withOverride('WrapperNode')};
   `,
 });
 
@@ -49,11 +61,11 @@ function getSizeStyle(props) {
       return css`
         width: 30vw;
 
-        @media screen and (max - width: 720px) {
+        @media screen and (max-width: 720px) {
           width: 50vw;
         }
 
-        @media screen and (max - width: 600px) {
+        @media screen and (max-width: 600px) {
           width: 75vw;
         }
       `;

diff --git a/packages/react-toolbox-sc/src/Overlay/Overlay.js b/packages/react-toolbox-sc/src/Overlay/Overlay.js
@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { withHandlers } from 'recompose';
 import overlayFactory from 'react-toolbox-core/lib/components/Overlay';
 import { addPortal, removePortal } from './bodyLocker';
+import withOverride from '../utils/withOverride';
 import Portal from '../Portal';
 
 const addPortalHandlers = withHandlers({
@@ -34,18 +35,15 @@ const Overlay = overlayFactory({
     width: 100%;
     z-index: -1;
 
-    ${props =>
-      props.active &&
-      css`
-        opacity: 0.6;
-        pointer-events: all;
-      `};
+    ${getActiveStyle};
+    ${withOverride('BackdropNode')};
   `,
   ContainerNode: styled.div`
     min-height: 100%;
     position: absolute;
     top: 0;
     width: 100%;
+    ${withOverride('ContainerNode')};
   `,
   Portal: addPortalHandlers(styled(Portal)`
     align-content: center;
@@ -60,7 +58,17 @@ const Overlay = overlayFactory({
     top: 0;
     width: 100vw;
     z-index: 200;
+    ${withOverride('Portal')};
   `),
 });
 
+function getActiveStyle(props) {
+  if (props.active) {
+    return css`
+      opacity: 0.6;
+      pointer-events: all;
+    `;
+  }
+}
+
 export default Overlay;
diff --git a/packages/react-toolbox-showcase/app/styled-components/DialogExamples.js b/packages/react-toolbox-showcase/app/styled-components/DialogExamples.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { css } from 'styled-components';
 import Button from 'react-toolbox-sc/lib/Button';
 import Dialog, { DialogActions, DialogBody } from 'react-toolbox-sc/lib/Dialog';
 
@@ -18,7 +19,7 @@ class DialogExamples extends Component {
       <section>
         <h5>Dialog</h5>
         <Button onClick={this.handleToggle}>Show it</Button>
-        <Dialog active={this.state.active}>
+        <Dialog active={this.state.active} size="small">
           <DialogBody>
             <h1>Use Google's location service?</h1>
             <p>