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/instant/src') 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 From 2aa4761d6dfaa007ed632816de9416a6477cd370 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 10:28:26 -0700 Subject: add semicolons --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') 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 index 958684021..ce1539c70 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -5,12 +5,12 @@ import { keyframes, styled } from '../../style/theme'; const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` from { position: relative; - top: ${fromY} + top: ${fromY}; } to { position: relative; - top: ${toY} + top: ${toY}; } `; -- cgit From af495143974941fb6cc4210b1965c17f007465e6 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:12:52 -0700 Subject: suggestions from code review: renaming timeoutNumber to timeoutId, sharing interface, renaming component --- .../animations/slide_up_and_down_animation.tsx | 36 ++++++++++------------ packages/instant/src/components/sliding_error.tsx | 6 ++-- 2 files changed, 19 insertions(+), 23 deletions(-) (limited to 'packages/instant/src') 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 index ce1539c70..2e8061a19 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -19,6 +19,7 @@ export interface SlideAnimationProps { animationType: string; animationDirection?: string; } + export const SlideAnimation = styled.div < SlideAnimationProps > @@ -33,13 +34,17 @@ export const SlideAnimation = z-index: -1; `; -export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( +export interface SlideAnimationComponentProps { + downY: string; +} + +export const SlideUpAnimationComponent: React.StatelessComponent = props => ( {props.children} ); -export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( +export const SlideDownAnimationComponent: React.StatelessComponent = props => ( ); -export interface SlideUpAndDownAnimationProps { +export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps { delayMs: number; - downY: string; } interface SlideUpAndDownState { slideState: 'up' | 'down'; } -export class SlideUpAndDownAnimationComponent extends React.Component< - SlideUpAndDownAnimationProps, - SlideUpAndDownState -> { - private _timeoutNumber: number | undefined; - +export class SlideUpAndDownAnimation extends React.Component { + private _timeoutId: number | undefined; constructor(props: SlideUpAndDownAnimationProps) { super(props); - this._timeoutNumber = undefined; + this._timeoutId = undefined; this.state = { slideState: 'up', }; } - - public render(): JSX.Element { + public render(): React.ReactNode { return this._renderSlide(); } - public componentDidMount(): void { - this._timeoutNumber = window.setTimeout(() => { + this._timeoutId = window.setTimeout(() => { this.setState({ slideState: 'down', }); @@ -85,14 +83,12 @@ export class SlideUpAndDownAnimationComponent extends React.Component< return; } - public componentWillUnmount(): void { - if (this._timeoutNumber) { - window.clearTimeout(this._timeoutNumber); + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); } } - - private readonly _renderSlide = (): JSX.Element => { + private readonly _renderSlide = (): React.ReactNode => { 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 index 2e6decbad..0237fb7e9 100644 --- a/packages/instant/src/components/sliding_error.tsx +++ b/packages/instant/src/components/sliding_error.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ColorOption } from '../style/theme'; -import { SlideUpAndDownAnimationComponent } from './animations/slide_up_and_down_animation'; +import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation'; import { Container, Text } from './ui'; @@ -30,7 +30,7 @@ export const Error: React.StatelessComponent = props => ( ); export const SlidingError: React.StatelessComponent = props => ( - + - + ); -- cgit From 58ad7d7caf475309dbd4e4486a1ed43404d5193c Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:15:02 -0700 Subject: change to ? syntax instead of number | undefined --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src') 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 index 2e8061a19..da34b7485 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -63,7 +63,7 @@ interface SlideUpAndDownState { } export class SlideUpAndDownAnimation extends React.Component { - private _timeoutId: number | undefined; + private _timeoutId?: number; constructor(props: SlideUpAndDownAnimationProps) { super(props); this._timeoutId = undefined; -- cgit From 20d60e2368b361e5055ddded9858cd11795b84d0 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:33:30 -0700 Subject: dont need constructor just to set state git status --- .../animations/slide_up_and_down_animation.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'packages/instant/src') 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 index da34b7485..05dda78be 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -36,6 +36,7 @@ export const SlideAnimation = export interface SlideAnimationComponentProps { downY: string; + children?: React.ReactNode; } export const SlideUpAnimationComponent: React.StatelessComponent = props => ( @@ -58,26 +59,27 @@ export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentPro delayMs: number; } +enum SlideState { + Up = 'up', + Down = 'down', +} interface SlideUpAndDownState { - slideState: 'up' | 'down'; + slideState: SlideState; } export class SlideUpAndDownAnimation extends React.Component { + public state = { + slideState: SlideState.Up, + }; + private _timeoutId?: number; - constructor(props: SlideUpAndDownAnimationProps) { - super(props); - this._timeoutId = undefined; - this.state = { - slideState: 'up', - }; - } public render(): React.ReactNode { return this._renderSlide(); } public componentDidMount(): void { this._timeoutId = window.setTimeout(() => { this.setState({ - slideState: 'down', + slideState: SlideState.Down, }); }, this.props.delayMs); -- cgit From 14b47f3a9f18e8c348166036ea9decdd78c8699e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:39:00 -0700 Subject: better private function syntax --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') 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 index 05dda78be..ce38e28b9 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -90,9 +90,9 @@ export class SlideUpAndDownAnimation extends React.Component { + private _renderSlide(): React.ReactNode { const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; return {this.props.children}; - }; + } } -- cgit From 7325e1669897cb9bbacaf28319b470e45ec0d4e7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:41:36 -0700 Subject: get rid of unused marginLeft and marginRight props --- packages/instant/src/components/ui/text.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index af8e4d933..9fb8ea26f 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -21,8 +21,6 @@ export interface TextProps { hoverColor?: string; noWrap?: boolean; display?: string; - marginRight?: string; - marginLeft?: string; } const PlainText: React.StatelessComponent = ({ children, className, onClick }) => ( @@ -49,8 +47,6 @@ 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 -- cgit From f13d061dd2725bd87a6021dec2dad6f1cccb57dc Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 14:04:53 -0700 Subject: move z-index setting to zero instant container, and add ability for zindex to be set on container --- .../src/components/animations/slide_up_and_down_animation.tsx | 1 - packages/instant/src/components/ui/container.tsx | 2 ++ packages/instant/src/components/zero_ex_instant_container.tsx | 9 ++++++++- 3 files changed, 10 insertions(+), 2 deletions(-) (limited to 'packages/instant/src') 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 index ce38e28b9..a78607afa 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -31,7 +31,6 @@ export const SlideAnimation = animation-iteration-count: 1; animation-fill-mode: ${props => props.animationDirection || 'none'}; position: relative; - z-index: -1; `; export interface SlideAnimationComponentProps { diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index c45f6e5e9..02b16e39f 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -26,6 +26,7 @@ export interface ContainerProps { className?: string; backgroundColor?: ColorOption; hasBoxShadow?: boolean; + zIndex?: number; } const PlainContainer: React.StatelessComponent = ({ children, className }) => ( @@ -52,6 +53,7 @@ export const Container = styled(PlainContainer)` ${props => cssRuleIfExists(props, 'border')} ${props => cssRuleIfExists(props, 'border-top')} ${props => cssRuleIfExists(props, 'border-bottom')} + ${props => cssRuleIfExists(props, 'z-index')} ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')}; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index 56e4f091c..cbbcf979d 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -5,13 +5,20 @@ import { ColorOption } from '../style/theme'; import { BuyButton } from './buy_button'; import { InstantHeading } from './instant_heading'; import { OrderDetails } from './order_details'; +import { SlidingError } from './sliding_error'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent = props => ( - + -- cgit From 45ff83d8528af047e35d0cbe5358624a2b086fa7 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 14:15:58 -0700 Subject: remove unused import --- packages/instant/src/components/zero_ex_instant_container.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src') diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index cbbcf979d..a384c5f1b 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -5,7 +5,6 @@ import { ColorOption } from '../style/theme'; import { BuyButton } from './buy_button'; import { InstantHeading } from './instant_heading'; import { OrderDetails } from './order_details'; -import { SlidingError } from './sliding_error'; import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} -- cgit From b0a2cacd82ba3e24f22470f624be0f3d8324a478 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 17:11:43 -0700 Subject: take out explicit children definition in props --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src') 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 index a78607afa..9c18e0933 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -35,7 +35,6 @@ export const SlideAnimation = export interface SlideAnimationComponentProps { downY: string; - children?: React.ReactNode; } export const SlideUpAnimationComponent: React.StatelessComponent = props => ( -- cgit