diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-01 02:25:36 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-06 18:56:11 +0800 |
commit | a849af8a48ac9346ff0da92b4c643cd66dfd855b (patch) | |
tree | 02f092902ee793d828fdae219d8ac76f9002f1fe /packages/website/ts/components/ui/multi_select.tsx | |
parent | cc235aac3866c44a7b27bb0343390224a02b8c55 (diff) | |
download | dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.tar dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.tar.gz dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.tar.bz2 dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.tar.lz dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.tar.xz dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.tar.zst dexon-sol-tools-a849af8a48ac9346ff0da92b4c643cd66dfd855b.zip |
feat: implement multi token select component
Diffstat (limited to 'packages/website/ts/components/ui/multi_select.tsx')
-rw-r--r-- | packages/website/ts/components/ui/multi_select.tsx | 38 |
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> ); |