diff options
Diffstat (limited to 'packages/website/ts/components/ui/multi_select.tsx')
-rw-r--r-- | packages/website/ts/components/ui/multi_select.tsx | 66 |
1 files changed, 0 insertions, 66 deletions
diff --git a/packages/website/ts/components/ui/multi_select.tsx b/packages/website/ts/components/ui/multi_select.tsx deleted file mode 100644 index 2cf44cae1..000000000 --- a/packages/website/ts/components/ui/multi_select.tsx +++ /dev/null @@ -1,66 +0,0 @@ -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> -); |