aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/ui/dropdown.tsx98
-rw-r--r--packages/instant/src/components/ui/overlay.tsx28
-rw-r--r--packages/instant/src/components/zero_ex_instant_overlay.tsx21
-rw-r--r--packages/instant/src/style/theme.ts1
-rw-r--r--packages/instant/src/style/z_index.ts9
5 files changed, 89 insertions, 68 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';
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index 3461600e1..d2b41d27f 100644
--- a/packages/instant/src/components/zero_ex_instant_overlay.tsx
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -1,5 +1,10 @@
import * as React from 'react';
+import { ColorOption, overlayBlack, styled } from '../style/theme';
+
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Icon } from './ui/icon';
import { Overlay } from './ui/overlay';
import { ZeroExInstantContainer } from './zero_ex_instant_container';
import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider';
@@ -13,8 +18,20 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
const { onClose, zIndex, ...rest } = props;
return (
<ZeroExInstantProvider {...rest}>
- <Overlay onClose={onClose} zIndex={zIndex}>
- <ZeroExInstantContainer />
+ <Overlay zIndex={zIndex}>
+ <Flex height="100vh">
+ <Container position="absolute" top="0px" right="0px">
+ <Icon
+ height={18}
+ width={18}
+ color={ColorOption.white}
+ icon="closeX"
+ onClick={onClose}
+ padding="2em 2em"
+ />
+ </Container>
+ <ZeroExInstantContainer />
+ </Flex>
</Overlay>
</ZeroExInstantProvider>
);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d10c9b72c..7917164a1 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -32,5 +32,6 @@ export const theme: Theme = {
export const transparentWhite = 'rgba(255,255,255,0.3)';
export const overlayBlack = 'rgba(0, 0, 0, 0.6)';
+export const completelyTransparent = 'rga(0, 0, 0, 0)';
export { styled, css, keyframes, withTheme, ThemeProvider };
diff --git a/packages/instant/src/style/z_index.ts b/packages/instant/src/style/z_index.ts
index 95e6cd912..0eedcaf29 100644
--- a/packages/instant/src/style/z_index.ts
+++ b/packages/instant/src/style/z_index.ts
@@ -1,6 +1,7 @@
export const zIndex = {
- errorPopup: 1,
- mainContainer: 2,
- dropdownItems: 3,
- panel: 4,
+ errorPopup: 10,
+ mainContainer: 20,
+ dropdownItems: 30,
+ panel: 40,
+ overlayDefault: 100,
};
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-16 15:41:24 +0800