From f80768cae0c2fdb71237bbdddecc67aec1c1f67f Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 29 Nov 2018 15:57:35 -0800
Subject: feat: add Select component and use for configurator

---
 packages/website/ts/components/ui/select.tsx | 168 +++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 packages/website/ts/components/ui/select.tsx

(limited to 'packages/website/ts/components/ui/select.tsx')

diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx
new file mode 100644
index 000000000..abf202c67
--- /dev/null
+++ b/packages/website/ts/components/ui/select.tsx
@@ -0,0 +1,168 @@
+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 SelectItemConfig {
+    text: string;
+    onClick?: () => void;
+}
+
+export interface SelectProps {
+    value: string;
+    label?: string;
+    items: SelectItemConfig[];
+    onOpen?: () => void;
+    border?: string;
+    fontSize?: string;
+    iconSize?: number;
+    textColor?: string;
+    labelColor?: string;
+    backgroundColor?: string;
+}
+
+export interface SelectState {
+    isOpen: boolean;
+}
+
+export class Select extends React.Component<SelectProps, SelectState> {
+    public static defaultProps = {
+        items: [] as SelectItemConfig[],
+        textColor: colors.black,
+        backgroundColor: colors.white,
+        fontSize: '16px',
+        iconSize: 25,
+    };
+    public state: SelectState = {
+        isOpen: false,
+    };
+    public render(): React.ReactNode {
+        const { value, label, items, border, textColor, labelColor, backgroundColor, fontSize, iconSize } = this.props;
+        const { isOpen } = this.state;
+        const hasItems = !_.isEmpty(items);
+        const borderRadius = isOpen ? '4px 4px 0px 0px' : '4px';
+        return (
+            <React.Fragment>
+                {isOpen && (
+                    <Overlay
+                        style={{
+                            zIndex: zIndex.overlay,
+                            backgroundColor: 'rgba(255, 255, 255, 0)',
+                        }}
+                        onClick={this._closeDropdown}
+                    />
+                )}
+                <Container position="relative">
+                    <Container
+                        cursor={hasItems ? 'pointer' : undefined}
+                        onClick={this._handleDropdownClick}
+                        borderRadius={borderRadius}
+                        border={border}
+                        backgroundColor={backgroundColor}
+                        padding="0.8em"
+                        width="100%"
+                    >
+                        <Container className="flex justify-between">
+                            <Text fontSize={fontSize} fontColor={textColor}>
+                                {value}
+                            </Text>
+                            <Container>
+                                {label && (
+                                    <Text fontSize={fontSize} fontColor={labelColor}>
+                                        {label}
+                                    </Text>
+                                )}
+                                {hasItems && (
+                                    <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
+                                        <i
+                                            className="zmdi zmdi-chevron-down"
+                                            style={{ fontSize: iconSize, color: colors.darkGrey }}
+                                        />
+                                    </Container>
+                                )}
+                            </Container>
+                        </Container>
+                    </Container>
+                    {isOpen && (
+                        <Container
+                            width="100%"
+                            position="absolute"
+                            onClick={this._closeDropdown}
+                            zIndex={zIndex.aboveOverlay}
+                        >
+                            {_.map(items, (item, index) => (
+                                <SelectItem
+                                    key={item.text}
+                                    {...item}
+                                    isLast={index === items.length - 1}
+                                    backgroundColor={backgroundColor}
+                                    textColor={textColor}
+                                    border={border}
+                                />
+                            ))}
+                        </Container>
+                    )}
+                </Container>
+            </React.Fragment>
+        );
+    }
+    private readonly _handleDropdownClick = (): void => {
+        if (_.isEmpty(this.props.items)) {
+            return;
+        }
+        const isOpen = !this.state.isOpen;
+        this.setState({
+            isOpen,
+        });
+
+        if (isOpen && this.props.onOpen) {
+            this.props.onOpen();
+        }
+    };
+    private readonly _closeDropdown = (): void => {
+        this.setState({
+            isOpen: false,
+        });
+    };
+}
+
+export interface SelectItemProps extends SelectItemConfig {
+    text: string;
+    onClick?: () => void;
+    isLast: boolean;
+    backgroundColor?: string;
+    border?: string;
+    textColor?: string;
+    fontSize?: string;
+}
+
+export const SelectItem: React.StatelessComponent<SelectItemProps> = ({
+    text,
+    onClick,
+    isLast,
+    border,
+    backgroundColor,
+    textColor,
+    fontSize,
+}) => (
+    <Container
+        onClick={onClick}
+        cursor="pointer"
+        backgroundColor={backgroundColor}
+        padding="0.8em"
+        borderTop="0"
+        border={border}
+        shouldDarkenOnHover={true}
+        borderRadius={isLast ? '0px 0px 4px 4px' : undefined}
+        width="100%"
+    >
+        <Text fontSize={fontSize} fontColor={textColor}>
+            {text}
+        </Text>
+    </Container>
+);
-- 
cgit v1.2.3


From e65096ee7af7c6d442b5e106db0a07652cc5e047 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 30 Nov 2018 10:25:36 -0800
Subject: feat: implement multi token select component

---
 packages/website/ts/components/ui/select.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'packages/website/ts/components/ui/select.tsx')

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
-- 
cgit v1.2.3


From cd44dc7beb1697ec76dccba4711b3ce8057ba6e4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 3 Dec 2018 17:37:32 -0800
Subject: polish: make configurator inputs look more like mocks

---
 packages/website/ts/components/ui/select.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/ui/select.tsx')

diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx
index 743b082b0..e4fb50f59 100644
--- a/packages/website/ts/components/ui/select.tsx
+++ b/packages/website/ts/components/ui/select.tsx
@@ -65,7 +65,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                         hasBoxShadow={isOpen}
                         border={border}
                         backgroundColor={backgroundColor}
-                        padding="0.8em"
+                        padding="0.5em 0.8em"
                         width="100%"
                     >
                         <Container className="flex justify-between">
@@ -79,7 +79,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                                     </Text>
                                 )}
                                 {hasItems && (
-                                    <Container marginLeft="5px" display="inline-block" position="relative" bottom="2px">
+                                    <Container marginLeft="5px" display="inline-block">
                                         <i
                                             className="zmdi zmdi-chevron-down"
                                             style={{ fontSize: iconSize, color: colors.darkGrey }}
-- 
cgit v1.2.3