feat: refactor out overlay component and use it to implement click-outside

2 files changed, 64 insertions, 62 deletions

diff --git a/packages/instant/src/components/ui/dropdown.tsx b/packages/instant/src/components/ui/dropdown.tsx
index 2bc552ab4..c69e89c0e 100644
--- a/packages/instant/src/components/ui/dropdown.tsx
+++ b/packages/instant/src/components/ui/dropdown.tsx
@@ -1,12 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { ColorOption } from '../../style/theme';
+import { ColorOption, completelyTransparent } from '../../style/theme';
 import { zIndex } from '../../style/z_index';
 
 import { Container } from './container';
 import { Flex } from './flex';
 import { Icon } from './icon';
+import { Overlay } from './overlay';
 import { Text } from './text';
 
 export interface DropdownItemConfig {
@@ -27,12 +28,12 @@ export interface DropdownState {
 export class Dropdown extends React.Component<DropdownProps, DropdownState> {
     public static defaultProps = {
         items: [
-            {
-                text: 'Item 1',
-            },
-            {
-                text: 'Item 2',
-            },
+            // {
+            //     text: 'Item 1',
+            // },
+            // {
+            //     text: 'Item 2',
+            // },
         ],
     };
     public state: DropdownState = {
@@ -44,48 +45,57 @@ export class Dropdown extends React.Component<DropdownProps, DropdownState> {
         const hasItems = !_.isEmpty(items);
         const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
         return (
-            <Container position="relative">
-                <Container
-                    cursor={hasItems ? 'pointer' : undefined}
-                    onClick={this._handleDropdownClick}
-                    hasBoxShadow={true}
-                    borderRadius={borderRadius}
-                    border="1px solid"
-                    borderColor={ColorOption.feintGrey}
-                    padding="0.8em"
-                    borderBottom="1px solid"
-                >
-                    <Flex justify="space-between">
-                        <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}>
-                            {value}
-                        </Text>
-                        <Container>
-                            <Text fontSize="16px" lineHeight="17px" fontColor={ColorOption.lightGrey}>
-                                {label}
-                            </Text>
-                            {hasItems && (
-                                <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
-                                    <Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} />
-                                </Container>
-                            )}
-                        </Container>
-                    </Flex>
-                </Container>
+            <React.Fragment>
                 {isOpen && (
-                    <Container
-                        width="100%"
-                        position="absolute"
+                    <Overlay
+                        zIndex={zIndex.dropdownItems - 1}
+                        backgroundColor={completelyTransparent}
                         onClick={this._closeDropdown}
-                        backgroundColor={ColorOption.white}
+                    />
+                )}
+                <Container position="relative">
+                    <Container
+                        cursor={hasItems ? 'pointer' : undefined}
+                        onClick={this._handleDropdownClick}
                         hasBoxShadow={true}
-                        zIndex={zIndex.dropdownItems}
+                        borderRadius={borderRadius}
+                        border="1px solid"
+                        borderColor={ColorOption.feintGrey}
+                        padding="0.8em"
+                        borderBottom="1px solid"
                     >
-                        {_.map(items, (item, index) => (
-                            <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
-                        ))}
+                        <Flex justify="space-between">
+                            <Text fontSize="16px" lineHeight="19px" fontColor={ColorOption.darkGrey}>
+                                {value}
+                            </Text>
+                            <Container>
+                                <Text fontSize="16px" lineHeight="17px" fontColor={ColorOption.lightGrey}>
+                                    {label}
+                                </Text>
+                                {hasItems && (
+                                    <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
+                                        <Icon padding="3px" icon="chevron" width={12} stroke={ColorOption.grey} />
+                                    </Container>
+                                )}
+                            </Container>
+                        </Flex>
                     </Container>
-                )}
-            </Container>
+                    {isOpen && (
+                        <Container
+                            width="100%"
+                            position="absolute"
+                            onClick={this._closeDropdown}
+                            backgroundColor={ColorOption.white}
+                            hasBoxShadow={true}
+                            zIndex={zIndex.dropdownItems}
+                        >
+                            {_.map(items, (item, index) => (
+                                <DropdownItem key={item.text} {...item} isLast={index === items.length - 1} />
+                            ))}
+                        </Container>
+                    )}
+                </Container>
+            </React.Fragment>
         );
     }
     private readonly _handleDropdownClick = (): void => {
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index f1706c874..64090a6b3 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -1,38 +1,30 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { ColorOption, overlayBlack, styled } from '../../style/theme';
-
-import { Container } from './container';
-import { Flex } from './flex';
-import { Icon } from './icon';
+import { overlayBlack, styled } from '../../style/theme';
+import { zIndex } from '../../style/z_index';
 
 export interface OverlayProps {
-    className?: string;
-    onClose?: () => void;
     zIndex?: number;
+    backgroundColor?: string;
 }
 
-const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => (
-    <Flex height="100vh" className={className}>
-        <Container position="absolute" top="0px" right="0px">
-            <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" />
-        </Container>
-        <div>{children}</div>
-    </Flex>
-);
-export const Overlay = styled(PlainOverlay)`
+export const Overlay =
+    styled.div <
+    OverlayProps >
+    `
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: ${props => props.zIndex}
-    background-color: ${overlayBlack};
+    background-color: ${props => props.backgroundColor};
 `;
 
 Overlay.defaultProps = {
-    zIndex: 100,
+    zIndex: zIndex.overlayDefault,
+    backgroundColor: overlayBlack,
 };
 
 Overlay.displayName = 'Overlay';