diff options
Diffstat (limited to 'packages')
5 files changed, 152 insertions, 6 deletions
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..9c18e0933 --- /dev/null +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -0,0 +1,96 @@ +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; +`; + +export interface SlideAnimationComponentProps { + downY: string; +} + +export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => ( + <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}> + {props.children} + </SlideAnimation> +); + +export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => ( + <SlideAnimation + animationDirection="forwards" + animationType="cubic-bezier(0.25, 0.1, 0.25, 1)" + keyframes={slideKeyframeGenerator('0px', props.downY)} + > + {props.children} + </SlideAnimation> +); + +export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps { + delayMs: number; +} + +enum SlideState { + Up = 'up', + Down = 'down', +} +interface SlideUpAndDownState { + slideState: SlideState; +} + +export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> { + public state = { + slideState: SlideState.Up, + }; + + private _timeoutId?: number; + public render(): React.ReactNode { + return this._renderSlide(); + } + public componentDidMount(): void { + this._timeoutId = window.setTimeout(() => { + this.setState({ + slideState: SlideState.Down, + }); + }, this.props.delayMs); + + return; + } + public componentWillUnmount(): void { + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); + } + } + private _renderSlide(): React.ReactNode { + const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; + + return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>; + } +} diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx new file mode 100644 index 000000000..0237fb7e9 --- /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 { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation'; + +import { Container, Text } from './ui'; + +export interface ErrorProps { + icon: string; + message: string; +} + +export const Error: React.StatelessComponent<ErrorProps> = props => ( + <Container + padding="10px" + border={`1px solid ${ColorOption.darkOrange}`} + backgroundColor={ColorOption.lightOrange} + width="100%" + borderRadius="6px" + marginBottom="10px" + > + <Container marginRight="5px" display="inline"> + {props.icon} + </Container> + <Text fontWeight="500" fontColor={ColorOption.darkOrange}> + {props.message} + </Text> + </Container> +); + +export const SlidingError: React.StatelessComponent<ErrorProps> = props => ( + <SlideUpAndDownAnimation downY="120px" delayMs={5000}> + <Error icon={props.icon} message={props.message} /> + </SlideUpAndDownAnimation> +); 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<ContainerProps> = ({ 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 716227b51..a384c5f1b 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -10,11 +10,19 @@ import { Container, Flex } from './ui'; export interface ZeroExInstantContainerProps {} export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => ( - <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px"> - <Flex direction="column" justify="flex-start"> - <InstantHeading /> - <OrderDetails /> - <BuyButton /> - </Flex> + <Container width="350px"> + <Container + zIndex={2} + position="relative" + backgroundColor={ColorOption.white} + borderRadius="3px" + hasBoxShadow={true} + > + <Flex direction="column" justify="flex-start"> + <InstantHeading /> + <OrderDetails /> + <BuyButton /> + </Flex> + </Container> </Container> ); 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 }; |