From 0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 12 Oct 2018 15:35:20 -0700 Subject: feat(instant): add sliding error --- .../animations/slide_up_and_down_animation.tsx | 100 +++++++++++++++++++++ packages/instant/src/components/sliding_error.tsx | 36 ++++++++ packages/instant/src/components/ui/text.tsx | 4 + .../src/components/zero_ex_instant_container.tsx | 14 +-- packages/instant/src/style/theme.ts | 4 + 5 files changed, 152 insertions(+), 6 deletions(-) create mode 100644 packages/instant/src/components/animations/slide_up_and_down_animation.tsx create mode 100644 packages/instant/src/components/sliding_error.tsx (limited to 'packages') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx new file mode 100644 index 000000000..958684021 --- /dev/null +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -0,0 +1,100 @@ +import * as React from 'react'; + +import { keyframes, styled } from '../../style/theme'; + +const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` + from { + position: relative; + top: ${fromY} + } + + to { + position: relative; + top: ${toY} + } +`; + +export interface SlideAnimationProps { + keyframes: string; + animationType: string; + animationDirection?: string; +} +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` + animation-name: ${props => props.keyframes}; + animation-duration: 0.3s; + animation-timing-function: ${props => props.animationType}; + animation-delay: 0s; + animation-iteration-count: 1; + animation-fill-mode: ${props => props.animationDirection || 'none'}; + position: relative; + z-index: -1; +`; + +export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( + + {props.children} + +); + +export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( + + {props.children} + +); + +export interface SlideUpAndDownAnimationProps { + delayMs: number; + downY: string; +} + +interface SlideUpAndDownState { + slideState: 'up' | 'down'; +} + +export class SlideUpAndDownAnimationComponent extends React.Component< + SlideUpAndDownAnimationProps, + SlideUpAndDownState +> { + private _timeoutNumber: number | undefined; + + constructor(props: SlideUpAndDownAnimationProps) { + super(props); + this._timeoutNumber = undefined; + this.state = { + slideState: 'up', + }; + } + + public render(): JSX.Element { + return this._renderSlide(); + } + + public componentDidMount(): void { + this._timeoutNumber = window.setTimeout(() => { + this.setState({ + slideState: 'down', + }); + }, this.props.delayMs); + + return; + } + + public componentWillUnmount(): void { + if (this._timeoutNumber) { + window.clearTimeout(this._timeoutNumber); + } + } + + private readonly _renderSlide = (): JSX.Element => { + const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; + + return {this.props.children}; + }; +} diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx new file mode 100644 index 000000000..2e6decbad --- /dev/null +++ b/packages/instant/src/components/sliding_error.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { SlideUpAndDownAnimationComponent } from './animations/slide_up_and_down_animation'; + +import { Container, Text } from './ui'; + +export interface ErrorProps { + icon: string; + message: string; +} + +export const Error: React.StatelessComponent = props => ( + + + {props.icon} + + + {props.message} + + +); + +export const SlidingError: React.StatelessComponent = props => ( + + + +); diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index 9fb8ea26f..af8e4d933 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -21,6 +21,8 @@ export interface TextProps { hoverColor?: string; noWrap?: boolean; display?: string; + marginRight?: string; + marginLeft?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( @@ -47,6 +49,8 @@ export const Text = styled(PlainText)` ${props => (props.display ? `display: ${props.display}` : '')}; ${props => (props.letterSpacing ? `letter-spacing: ${props.letterSpacing}` : '')}; ${props => (props.textTransform ? `text-transform: ${props.textTransform}` : '')}; + ${props => (props.marginRight ? `margin-right: ${props.marginRight}` : '')}; + ${props => (props.marginLeft ? `margin-right: ${props.marginLeft}` : '')}; &:hover { ${props => props.onClick diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 716227b51..56e4f091c 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -10,11 +10,13 @@ import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( - - - - - - + + + + + + + + ); diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts index cf9da5378..d26c816c1 100644 --- a/packages/instant/src/style/theme.ts +++ b/packages/instant/src/style/theme.ts @@ -12,6 +12,8 @@ export enum ColorOption { feintGrey = 'feintGrey', darkGrey = 'darkGrey', white = 'white', + lightOrange = 'lightOrange', + darkOrange = 'darkOrange', } export const theme: Theme = { @@ -22,6 +24,8 @@ export const theme: Theme = { feintGrey: '#DEDEDE', darkGrey: '#333333', white: 'white', + lightOrange: '#F9F2ED', + darkOrange: '#F2994C', }; export { styled, css, injectGlobal, keyframes, ThemeProvider }; -- cgit v1.2.3