aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/multi_select.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui/multi_select.tsx')
-rw-r--r--packages/website/ts/components/ui/multi_select.tsx38
1 files changed, 21 insertions, 17 deletions
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>
);