From e65096ee7af7c6d442b5e106db0a07652cc5e047 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 30 Nov 2018 10:25:36 -0800 Subject: feat: implement multi token select component --- packages/website/ts/components/ui/check_mark.tsx | 31 ++++++ packages/website/ts/components/ui/container.tsx | 6 ++ packages/website/ts/components/ui/multi_select.tsx | 38 +++---- packages/website/ts/components/ui/select.tsx | 2 + packages/website/ts/pages/instant/action_link.tsx | 7 +- .../website/ts/pages/instant/config_generator.tsx | 109 +++++++++++++++++---- packages/website/ts/pages/instant/configurator.tsx | 3 +- packages/website/ts/pages/instant/features.tsx | 6 +- 8 files changed, 156 insertions(+), 46 deletions(-) create mode 100644 packages/website/ts/components/ui/check_mark.tsx (limited to 'packages/website/ts') diff --git a/packages/website/ts/components/ui/check_mark.tsx b/packages/website/ts/components/ui/check_mark.tsx new file mode 100644 index 000000000..86e427c8b --- /dev/null +++ b/packages/website/ts/components/ui/check_mark.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; + +import { colors } from '@0x/react-shared'; + +export interface CheckMarkProps { + color?: string; + isChecked?: boolean; +} + +export const CheckMark: React.StatelessComponent = ({ color, isChecked }) => ( + + + + +); + +CheckMark.displayName = 'Check'; + +CheckMark.defaultProps = { + color: colors.mediumBlue, +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index cd0ed9986..4b76ce8be 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -9,6 +9,7 @@ type StringOrNum = string | number; export type ContainerTag = 'div' | 'span'; export interface ContainerProps { + margin?: string; marginTop?: StringOrNum; marginBottom?: StringOrNum; marginRight?: StringOrNum; @@ -48,7 +49,9 @@ export interface ContainerProps { id?: string; onClick?: (event: React.MouseEvent) => void; overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; + overflowY?: 'scroll' | 'hidden' | 'auto' | 'visible'; shouldDarkenOnHover?: boolean; + hasBoxShadow?: boolean; shouldAddBoxShadowOnHover?: boolean; } @@ -62,6 +65,7 @@ export const PlainContainer: React.StatelessComponent = props => onClick, shouldDarkenOnHover, shouldAddBoxShadowOnHover, + hasBoxShadow, // tslint:disable-next-line:trailing-comma ...style } = props; @@ -74,6 +78,8 @@ export const PlainContainer: React.StatelessComponent = props => }; export const Container = styled(PlainContainer)` + box-sizing: border-box; + ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; &:hover { ${props => props.shouldDarkenOnHover 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 { 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 ( - + {_.map(items, item => ( ))} @@ -44,19 +46,21 @@ export class MultiSelect extends React.Component { } export interface MultiSelectItemProps { - displayText: React.ReactNode; + renderItemContent: (isSelected: boolean) => React.ReactNode; isSelected?: boolean; onClick?: () => void; + backgroundColor?: string; } export const MultiSelectItem: React.StatelessComponent = ({ - displayText, + renderItemContent, isSelected, onClick, + backgroundColor, }) => ( - - - {displayText} + + + {renderItemContent(isSelected)} ); 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 { 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 { position="absolute" onClick={this._closeDropdown} zIndex={zIndex.aboveOverlay} + hasBoxShadow={true} > {_.map(items, (item, index) => ( { public render(): React.ReactNode { const { displayText, fontSize, color, className } = this.props; return ( - + {displayText} diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx index cd215bc61..d1ea66557 100644 --- a/packages/website/ts/pages/instant/config_generator.tsx +++ b/packages/website/ts/pages/instant/config_generator.tsx @@ -5,6 +5,7 @@ import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; +import { CheckMark } from 'ts/components/ui/check_mark'; import { Container } from 'ts/components/ui/container'; import { MultiSelect } from 'ts/components/ui/multi_select'; import { Select, SelectItemConfig } from 'ts/components/ui/select'; @@ -54,42 +55,79 @@ export class ConfigGenerator extends React.Component {