diff options
Diffstat (limited to 'packages/website/ts/components/ui')
| -rw-r--r-- | packages/website/ts/components/ui/animation.tsx | 42 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | 31 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/filled_image.tsx | 18 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/input.tsx | 49 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/select.tsx | 170 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/simple_loading.tsx | 17 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/text.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/typed_text.tsx | 75 |
9 files changed, 33 insertions, 371 deletions
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx deleted file mode 100644 index 943e3bf28..000000000 --- a/packages/website/ts/components/ui/animation.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { keyframes, styled } from 'ts/style/theme'; - -export type AnimationType = 'easeUpFromBottom'; - -export interface AnimationProps { - type: AnimationType; -} - -const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />; - -const appearFromBottomFrames = keyframes` - from { - position: fixed; - bottom: -500px; - left: 0px; - right: 0px; - } - - to { - position: fixed; - bottom: 0px; - left: 0px; - right: 0px; - } -`; - -const stylesForAnimation: { [K in AnimationType]: string } = { - // Needed for safari - easeUpFromBottom: `position: fixed`, -}; - -const animations: { [K in AnimationType]: string } = { - easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`, -}; - -export const Animation = styled(PlainAnimation)` - animation: ${props => animations[props.type]}; - ${props => stylesForAnimation[props.type]}; -`; - -Animation.displayName = 'Animation'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index ae00851e5..778f59f27 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -28,6 +28,7 @@ export interface ContainerProps { borderBottomRightRadius?: StringOrNum; borderBottom?: StringOrNum; borderColor?: string; + children?: React.ReactNode; maxWidth?: StringOrNum; maxHeight?: StringOrNum; width?: StringOrNum; diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx new file mode 100644 index 000000000..ba141c01e --- /dev/null +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -0,0 +1,31 @@ +import { css, keyframes, styled } from 'ts/style/theme'; + +const appearFromBottomFrames = keyframes` + from { + position: fixed; + bottom: -500px; + left: 0px; + right: 0px; + } + + to { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + } +`; + +const stylesForAnimation = css` + position: fixed; +`; +const animations = css` + animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards; +`; + +export const EaseUpFromBottomAnimation = styled.div` + ${props => animations}; + ${props => stylesForAnimation}; +`; + +EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation'; diff --git a/packages/website/ts/components/ui/filled_image.tsx b/packages/website/ts/components/ui/filled_image.tsx deleted file mode 100644 index 7f58ee5b9..000000000 --- a/packages/website/ts/components/ui/filled_image.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; - -export interface FilledImageProps { - src: string; -} -export const FilledImage = (props: FilledImageProps) => ( - <div - style={{ - width: '100%', - height: '100%', - objectFit: 'cover', - backgroundImage: `url(${props.src})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: 'cover', - }} - /> -); diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx deleted file mode 100644 index d21b9fd0e..000000000 --- a/packages/website/ts/components/ui/input.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -export interface InputProps { - className?: string; - value?: string; - width?: string; - fontSize?: string; - fontColor?: string; - border?: string; - padding?: string; - placeholderColor?: string; - placeholder?: string; - backgroundColor?: string; - onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; -} - -const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => ( - <input className={className} value={value} onChange={onChange} placeholder={placeholder} /> -); - -export const Input = styled(PlainInput)` - font-size: ${props => props.fontSize}; - width: ${props => props.width}; - padding: ${props => props.padding}; - border-radius: 3px; - box-sizing: border-box; - font-family: 'Roboto Mono'; - color: ${props => props.fontColor}; - border: ${props => props.border}; - outline: none; - background-color: ${props => props.backgroundColor}; - &::placeholder { - color: ${props => props.placeholderColor}; - } -`; - -Input.defaultProps = { - width: 'auto', - backgroundColor: colors.white, - fontColor: colors.darkestGrey, - placeholderColor: colors.darkGrey, - fontSize: '12px', - border: 'none', - padding: '0.8em 1.2em', -}; - -Input.displayName = 'Input'; diff --git a/packages/website/ts/components/ui/select.tsx b/packages/website/ts/components/ui/select.tsx deleted file mode 100644 index e4fb50f59..000000000 --- a/packages/website/ts/components/ui/select.tsx +++ /dev/null @@ -1,170 +0,0 @@ -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} - hasBoxShadow={isOpen} - border={border} - backgroundColor={backgroundColor} - padding="0.5em 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"> - <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} - hasBoxShadow={true} - > - {_.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> -); diff --git a/packages/website/ts/components/ui/simple_loading.tsx b/packages/website/ts/components/ui/simple_loading.tsx deleted file mode 100644 index 81744196d..000000000 --- a/packages/website/ts/components/ui/simple_loading.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import CircularProgress from 'material-ui/CircularProgress'; -import * as React from 'react'; - -export interface SimpleLoadingProps { - message: string; -} - -export const SimpleLoading = (props: SimpleLoadingProps) => { - return ( - <div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}> - <div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}> - <CircularProgress /> - <div className="pt3 pb3">{props.message}</div> - </div> - </div> - ); -}; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 87239a021..046442ee5 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -7,6 +7,7 @@ export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' export interface TextProps { className?: string; + children?: any; Tag?: TextTag; fontSize?: string; fontFamily?: string; diff --git a/packages/website/ts/components/ui/typed_text.tsx b/packages/website/ts/components/ui/typed_text.tsx deleted file mode 100644 index 6d38580b9..000000000 --- a/packages/website/ts/components/ui/typed_text.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import * as _ from 'lodash'; -import * as React from 'react'; -import Typist from 'react-typist'; - -import { Text, TextProps } from 'ts/components/ui/text'; - -import 'react-typist/dist/Typist.css'; - -export interface TypedTextProps extends TextProps { - textList: string[]; - shouldRepeat?: boolean; - wordDelayMs?: number; - avgKeystrokeDelayMs?: number; - stdKeystrokeDelay?: number; -} - -export interface TypedTextState { - cycleCount: number; -} - -export class TypedText extends React.Component<TypedTextProps, TypedTextState> { - public static defaultProps = { - shouldRepeat: false, - avgKeystrokeDelayMs: 90, - wordDelayMs: 1000, - }; - public state = { - cycleCount: 0, - }; - public render(): React.ReactNode { - const { - textList, - shouldRepeat, - wordDelayMs, - avgKeystrokeDelayMs, - stdKeystrokeDelay, - // tslint:disable-next-line - ...textProps - } = this.props; - const { cycleCount } = this.state; - if (_.isEmpty(textList)) { - return null; - } - const typistChildren: React.ReactNode[] = []; - _.forEach(textList, text => { - typistChildren.push( - <Text key={`text-${text}-${cycleCount}`} {...textProps}> - {text} - </Text>, - ); - if (wordDelayMs) { - typistChildren.push(<Typist.Delay key={`delay-${text}-${cycleCount}`} ms={wordDelayMs} />); - } - typistChildren.push(<Typist.Backspace key={`backspace-${text}-${cycleCount}`} count={text.length} />); - }); - return ( - <Typist - avgTypingDelay={avgKeystrokeDelayMs} - stdTypingDelay={stdKeystrokeDelay} - className="inline" - key={`typist-key-${cycleCount}`} - onTypingDone={this._onTypingDone.bind(this)} - > - {typistChildren} - </Typist> - ); - } - private _onTypingDone(): void { - if (this.props.shouldRepeat) { - this.setState({ - cycleCount: this.state.cycleCount + 1, - }); - } - } -} |