aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-11-30 09:21:53 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-11-30 09:21:53 +0800
commit7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4 (patch)
treea5aa90d2d3e45889d08a1f1261492e15e546794f /packages/website/ts/components
parentf80768cae0c2fdb71237bbdddecc67aec1c1f67f (diff)
downloaddexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.tar
dexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.tar.gz
dexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.tar.bz2
dexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.tar.lz
dexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.tar.xz
dexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.tar.zst
dexon-sol-tools-7fe27e903b9c66b6b0ac18be5ae1ae565f206cf4.zip
feat: add MultiSelect component skeleton
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/ui/multi_select.tsx57
1 files changed, 57 insertions, 0 deletions
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..329e76bd5
--- /dev/null
+++ b/packages/website/ts/components/ui/multi_select.tsx
@@ -0,0 +1,57 @@
+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: string;
+ onClick?: () => void;
+}
+
+export interface MultiSelectProps {
+ selectedValues: string[];
+ items: MultiSelectItemConfig[];
+ backgroundColor?: string;
+ textColor?: string;
+}
+
+export class MultiSelect extends React.Component<MultiSelectProps> {
+ public static defaultProps = {
+ backgroundColor: colors.white,
+ textColor: colors.darkGrey,
+ };
+ public render(): React.ReactNode {
+ const { items, backgroundColor } = this.props;
+ return (
+ <Container backgroundColor={backgroundColor} borderRadius="4px">
+ {_.map(items, item => (
+ <MultiSelectItem key={item.value} displayText={item.displayText} onClick={item.onClick} />
+ ))}
+ </Container>
+ );
+ }
+}
+
+export interface MultiSelectItemProps {
+ displayText: string;
+ isSelected?: boolean;
+ onClick?: () => void;
+}
+
+export const MultiSelectItem: React.StatelessComponent<MultiSelectItemProps> = ({
+ displayText,
+ isSelected,
+ onClick,
+}) => (
+ <Container shouldDarkenOnHover={true} onClick={onClick}>
+ <Container borderBottom="1px solid black" padding="0px 15px">
+ {displayText}
+ </Container>
+ </Container>
+);