aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-12-01 02:25:36 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-12-01 02:25:36 +0800
commite65096ee7af7c6d442b5e106db0a07652cc5e047 (patch)
treee43fba0c7aab2154e9c7d21817aa014088c71334 /packages/website/ts/components
parentf1354632a1a2915159f6d662f90b68fe8c3bab38 (diff)
downloaddexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.tar
dexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.tar.gz
dexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.tar.bz2
dexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.tar.lz
dexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.tar.xz
dexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.tar.zst
dexon-sol-tools-e65096ee7af7c6d442b5e106db0a07652cc5e047.zip
feat: implement multi token select component
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/ui/check_mark.tsx31
-rw-r--r--packages/website/ts/components/ui/container.tsx6
-rw-r--r--packages/website/ts/components/ui/multi_select.tsx38
-rw-r--r--packages/website/ts/components/ui/select.tsx2
4 files changed, 60 insertions, 17 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 cd0ed9986..4b76ce8be 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -9,6 +9,7 @@ type StringOrNum = string | number;
export type ContainerTag = 'div' | 'span';
export interface ContainerProps {
+ margin?: string;
marginTop?: StringOrNum;
marginBottom?: StringOrNum;
marginRight?: StringOrNum;
@@ -48,7 +49,9 @@ export interface ContainerProps {
id?: string;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
+ overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible';
shouldDarkenOnHover?: boolean;
+ hasBoxShadow?: boolean;
shouldAddBoxShadowOnHover?: boolean;
}
@@ -62,6 +65,7 @@ export const PlainContainer: React.StatelessComponent<ContainerProps> = props =>
onClick,
shouldDarkenOnHover,
shouldAddBoxShadowOnHover,
+ hasBoxShadow,
// tslint:disable-next-line:trailing-comma
...style
} = props;
@@ -74,6 +78,8 @@ export const PlainContainer: React.StatelessComponent<ContainerProps> = props =>
};
export const Container = styled(PlainContainer)`
+ box-sizing: border-box;
+ ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
&:hover {
${props =>
props.shouldDarkenOnHover
diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx
index bf80443af..2cf44cae1 100644
--- a/packages/website/ts/components/ui/multi_select.tsx
+++ b/packages/website/ts/components/ui/multi_select.tsx
@@ -2,40 +2,42 @@ 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 MultiSelectItemConfig {
value: string;
- displayText: React.ReactNode;
+ renderItemContent: (isSelected: boolean) => React.ReactNode;
onClick?: () => void;
}
export interface MultiSelectProps {
- selectedValues: string[];
+ selectedValues?: string[];
items: MultiSelectItemConfig[];
backgroundColor?: string;
- textColor?: string;
+ height?: string;
}
export class MultiSelect extends React.Component<MultiSelectProps> {
public static defaultProps = {
backgroundColor: colors.white,
- textColor: colors.darkGrey,
};
public render(): React.ReactNode {
- const { items, backgroundColor, selectedValues } = this.props;
+ const { items, backgroundColor, selectedValues, height } = this.props;
return (
- <Container backgroundColor={backgroundColor} borderRadius="4px">
+ <Container
+ backgroundColor={backgroundColor}
+ borderRadius="4px"
+ width="100%"
+ height={height}
+ overflowY="scroll"
+ >
{_.map(items, item => (
<MultiSelectItem
key={item.value}
- displayText={item.displayText}
+ renderItemContent={item.renderItemContent}
+ backgroundColor={backgroundColor}
onClick={item.onClick}
- isSelected={_.includes(selectedValues, item.value)}
+ isSelected={_.isUndefined(selectedValues) || _.includes(selectedValues, item.value)}
/>
))}
</Container>
@@ -44,19 +46,21 @@ export class MultiSelect extends React.Component<MultiSelectProps> {
}
export interface MultiSelectItemProps {
- displayText: React.ReactNode;
+ renderItemContent: (isSelected: boolean) => React.ReactNode;
isSelected?: boolean;
onClick?: () => void;
+ backgroundColor?: string;
}
export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({
- displayText,
+ renderItemContent,
isSelected,
onClick,
+ backgroundColor,
}) => (
- <Container shouldDarkenOnHover={true} onClick={onClick}>
- <Container borderBottom="1px solid black" padding="0px 15px">
- {displayText}
+ <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
index abf202c67..743b082b0 100644
--- a/packages/website/ts/components/ui/select.tsx
+++ b/packages/website/ts/components/ui/select.tsx
@@ -62,6 +62,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
cursor={hasItems ? 'pointer' : undefined}
onClick={this._handleDropdownClick}
borderRadius={borderRadius}
+ hasBoxShadow={isOpen}
border={border}
backgroundColor={backgroundColor}
padding="0.8em"
@@ -94,6 +95,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
position="absolute"
onClick={this._closeDropdown}
zIndex={zIndex.aboveOverlay}
+ hasBoxShadow={true}
>
{_.map(items, (item, index) => (
<SelectItem