aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r--packages/website/ts/components/ui/check_mark.tsx31
-rw-r--r--packages/website/ts/components/ui/container.tsx42
-rw-r--r--packages/website/ts/components/ui/input.tsx10
-rw-r--r--packages/website/ts/components/ui/multi_select.tsx66
-rw-r--r--packages/website/ts/components/ui/select.tsx170
5 files changed, 315 insertions, 4 deletions
diff --git a/packages/website/ts/components/ui/check_mark.tsx b/packages/website/ts/components/ui/check_mark.tsx
new file mode 100644
index 000000000..86e427c8b
--- /dev/null
+++ b/packages/website/ts/components/ui/check_mark.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import { colors } from '@0x/react-shared';
+
+export interface CheckMarkProps {
+ color?: string;
+ isChecked?: boolean;
+}
+
+export const CheckMark: React.StatelessComponent<CheckMarkProps> = ({ color, isChecked }) => (
+ <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <circle
+ cx="8.5"
+ cy="8.5"
+ r="8.5"
+ fill={isChecked ? color : 'white'}
+ stroke={isChecked ? undefined : '#CCCCCC'}
+ />
+ <path
+ d="M2.5 4.5L1.79289 5.20711L2.5 5.91421L3.20711 5.20711L2.5 4.5ZM-0.707107 2.70711L1.79289 5.20711L3.20711 3.79289L0.707107 1.29289L-0.707107 2.70711ZM3.20711 5.20711L7.70711 0.707107L6.29289 -0.707107L1.79289 3.79289L3.20711 5.20711Z"
+ transform="translate(5 6.5)"
+ fill="white"
+ />
+ </svg>
+);
+
+CheckMark.displayName = 'Check';
+
+CheckMark.defaultProps = {
+ color: colors.mediumBlue,
+};
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 7eab2a50f..ae00851e5 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,11 +1,15 @@
import { TextAlignProperty } from 'csstype';
+import { darken } from 'polished';
import * as React from 'react';
+import { styled } from 'ts/style/theme';
+
type StringOrNum = string | number;
export type ContainerTag = 'div' | 'span';
export interface ContainerProps {
+ margin?: string;
marginTop?: StringOrNum;
marginBottom?: StringOrNum;
marginRight?: StringOrNum;
@@ -17,10 +21,13 @@ export interface ContainerProps {
paddingLeft?: StringOrNum;
backgroundColor?: string;
background?: string;
+ border?: string;
+ borderTop?: string;
borderRadius?: StringOrNum;
borderBottomLeftRadius?: StringOrNum;
borderBottomRightRadius?: StringOrNum;
borderBottom?: StringOrNum;
+ borderColor?: string;
maxWidth?: StringOrNum;
maxHeight?: StringOrNum;
width?: StringOrNum;
@@ -37,15 +44,32 @@ export interface ContainerProps {
right?: string;
bottom?: string;
zIndex?: number;
+ float?: 'right' | 'left';
Tag?: ContainerTag;
cursor?: string;
id?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+ overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible';
+ shouldDarkenOnHover?: boolean;
+ hasBoxShadow?: boolean;
+ shouldAddBoxShadowOnHover?: boolean;
}
-export const Container: React.StatelessComponent<ContainerProps> = props => {
- const { children, className, Tag, isHidden, id, onClick, ...style } = props;
+export const PlainContainer: React.StatelessComponent<ContainerProps> = props => {
+ const {
+ children,
+ className,
+ Tag,
+ isHidden,
+ id,
+ onClick,
+ shouldDarkenOnHover,
+ shouldAddBoxShadowOnHover,
+ hasBoxShadow,
+ // tslint:disable-next-line:trailing-comma
+ ...style
+ } = props;
const visibility = isHidden ? 'hidden' : undefined;
return (
<Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
@@ -54,6 +78,20 @@ export const Container: React.StatelessComponent<ContainerProps> = props => {
);
};
+const BOX_SHADOW = '0px 3px 10px rgba(0, 0, 0, 0.3)';
+
+export const Container = styled(PlainContainer)`
+ box-sizing: border-box;
+ ${props => (props.hasBoxShadow ? `box-shadow: ${BOX_SHADOW}` : '')};
+ &:hover {
+ ${props =>
+ props.shouldDarkenOnHover
+ ? `background-color: ${props.backgroundColor ? darken(0.05, props.backgroundColor) : 'none'} !important`
+ : ''};
+ ${props => (props.shouldAddBoxShadowOnHover ? `box-shadow: ${BOX_SHADOW}` : '')};
+ }
+`;
+
Container.defaultProps = {
Tag: 'div',
};
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx
index e5f4f6c70..d21b9fd0e 100644
--- a/packages/website/ts/components/ui/input.tsx
+++ b/packages/website/ts/components/ui/input.tsx
@@ -8,6 +8,8 @@ export interface InputProps {
width?: string;
fontSize?: string;
fontColor?: string;
+ border?: string;
+ padding?: string;
placeholderColor?: string;
placeholder?: string;
backgroundColor?: string;
@@ -21,11 +23,13 @@ const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, pl
export const Input = styled(PlainInput)`
font-size: ${props => props.fontSize};
width: ${props => props.width};
- padding: 0.8em 1.2em;
+ padding: ${props => props.padding};
border-radius: 3px;
+ box-sizing: border-box;
font-family: 'Roboto Mono';
color: ${props => props.fontColor};
- border: none;
+ border: ${props => props.border};
+ outline: none;
background-color: ${props => props.backgroundColor};
&::placeholder {
color: ${props => props.placeholderColor};
@@ -38,6 +42,8 @@ Input.defaultProps = {
fontColor: colors.darkestGrey,
placeholderColor: colors.darkGrey,
fontSize: '12px',
+ border: 'none',
+ padding: '0.8em 1.2em',
};
Input.displayName = 'Input';
diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx
new file mode 100644
index 000000000..2cf44cae1
--- /dev/null
+++ b/packages/website/ts/components/ui/multi_select.tsx
@@ -0,0 +1,66 @@
+import { colors } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Container } from './container';
+
+export interface MultiSelectItemConfig {
+ value: string;
+ renderItemContent: (isSelected: boolean) => React.ReactNode;
+ onClick?: () => void;
+}
+
+export interface MultiSelectProps {
+ selectedValues?: string[];
+ items: MultiSelectItemConfig[];
+ backgroundColor?: string;
+ height?: string;
+}
+
+export class MultiSelect extends React.Component<MultiSelectProps> {
+ public static defaultProps = {
+ backgroundColor: colors.white,
+ };
+ public render(): React.ReactNode {
+ const { items, backgroundColor, selectedValues, height } = this.props;
+ return (
+ <Container
+ backgroundColor={backgroundColor}
+ borderRadius="4px"
+ width="100%"
+ height={height}
+ overflowY="scroll"
+ >
+ {_.map(items, item => (
+ <MultiSelectItem
+ key={item.value}
+ renderItemContent={item.renderItemContent}
+ backgroundColor={backgroundColor}
+ onClick={item.onClick}
+ isSelected={_.isUndefined(selectedValues) || _.includes(selectedValues, item.value)}
+ />
+ ))}
+ </Container>
+ );
+ }
+}
+
+export interface MultiSelectItemProps {
+ renderItemContent: (isSelected: boolean) => React.ReactNode;
+ isSelected?: boolean;
+ onClick?: () => void;
+ backgroundColor?: string;
+}
+
+export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({
+ renderItemContent,
+ isSelected,
+ onClick,
+ backgroundColor,
+}) => (
+ <Container cursor="pointer" shouldDarkenOnHover={true} onClick={onClick} backgroundColor={backgroundColor}>
+ <Container borderBottom={`1px solid ${colors.lightestGrey}`} margin="0px 15px" padding="10px 0px">
+ {renderItemContent(isSelected)}
+ </Container>
+ </Container>
+);
diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx
new file mode 100644
index 000000000..e4fb50f59
--- /dev/null
+++ b/packages/website/ts/components/ui/select.tsx
@@ -0,0 +1,170 @@
+import { colors } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { zIndex } from 'ts/style/z_index';
+
+import { Container } from './container';
+import { Overlay } from './overlay';
+import { Text } from './text';
+
+export interface SelectItemConfig {
+ text: string;
+ onClick?: () => void;
+}
+
+export interface SelectProps {
+ value: string;
+ label?: string;
+ items: SelectItemConfig[];
+ onOpen?: () => void;
+ border?: string;
+ fontSize?: string;
+ iconSize?: number;
+ textColor?: string;
+ labelColor?: string;
+ backgroundColor?: string;
+}
+
+export interface SelectState {
+ isOpen: boolean;
+}
+
+export class Select extends React.Component<SelectProps, SelectState> {
+ public static defaultProps = {
+ items: [] as SelectItemConfig[],
+ textColor: colors.black,
+ backgroundColor: colors.white,
+ fontSize: '16px',
+ iconSize: 25,
+ };
+ public state: SelectState = {
+ isOpen: false,
+ };
+ public render(): React.ReactNode {
+ const { value, label, items, border, textColor, labelColor, backgroundColor, fontSize, iconSize } = this.props;
+ const { isOpen } = this.state;
+ const hasItems = !_.isEmpty(items);
+ const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
+ return (
+ <React.Fragment>
+ {isOpen && (
+ <Overlay
+ style={{
+ zIndex: zIndex.overlay,
+ backgroundColor: 'rgba(255, 255, 255, 0)',
+ }}
+ onClick={this._closeDropdown}
+ />
+ )}
+ <Container position="relative">
+ <Container
+ cursor={hasItems ? 'pointer' : undefined}
+ onClick={this._handleDropdownClick}
+ borderRadius={borderRadius}
+ hasBoxShadow={isOpen}
+ border={border}
+ backgroundColor={backgroundColor}
+ padding="0.5em 0.8em"
+ width="100%"
+ >
+ <Container className="flex justify-between">
+ <Text fontSize={fontSize} fontColor={textColor}>
+ {value}
+ </Text>
+ <Container>
+ {label && (
+ <Text fontSize={fontSize} fontColor={labelColor}>
+ {label}
+ </Text>
+ )}
+ {hasItems && (
+ <Container marginLeft="5px" display="inline-block">
+ <i
+ className="zmdi zmdi-chevron-down"
+ style={{ fontSize: iconSize, color: colors.darkGrey }}
+ />
+ </Container>
+ )}
+ </Container>
+ </Container>
+ </Container>
+ {isOpen && (
+ <Container
+ width="100%"
+ position="absolute"
+ onClick={this._closeDropdown}
+ zIndex={zIndex.aboveOverlay}
+ hasBoxShadow={true}
+ >
+ {_.map(items, (item, index) => (
+ <SelectItem
+ key={item.text}
+ {...item}
+ isLast={index === items.length - 1}
+ backgroundColor={backgroundColor}
+ textColor={textColor}
+ border={border}
+ />
+ ))}
+ </Container>
+ )}
+ </Container>
+ </React.Fragment>
+ );
+ }
+ private readonly _handleDropdownClick = (): void => {
+ if (_.isEmpty(this.props.items)) {
+ return;
+ }
+ const isOpen = !this.state.isOpen;
+ this.setState({
+ isOpen,
+ });
+
+ if (isOpen && this.props.onOpen) {
+ this.props.onOpen();
+ }
+ };
+ private readonly _closeDropdown = (): void => {
+ this.setState({
+ isOpen: false,
+ });
+ };
+}
+
+export interface SelectItemProps extends SelectItemConfig {
+ text: string;
+ onClick?: () => void;
+ isLast: boolean;
+ backgroundColor?: string;
+ border?: string;
+ textColor?: string;
+ fontSize?: string;
+}
+
+export const SelectItem: React.StatelessComponent<SelectItemProps> = ({
+ text,
+ onClick,
+ isLast,
+ border,
+ backgroundColor,
+ textColor,
+ fontSize,
+}) => (
+ <Container
+ onClick={onClick}
+ cursor="pointer"
+ backgroundColor={backgroundColor}
+ padding="0.8em"
+ borderTop="0"
+ border={border}
+ shouldDarkenOnHover={true}
+ borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
+ width="100%"
+ >
+ <Text fontSize={fontSize} fontColor={textColor}>
+ {text}
+ </Text>
+ </Container>
+);
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-05 23:27:45 +0800