diff options
Diffstat (limited to 'packages/instant/src/components')
4 files changed, 148 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..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 => ( + <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}> + {props.children} + </SlideAnimation> +); + +export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = 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 { + 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 <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..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<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 => ( + <SlideUpAndDownAnimationComponent downY="120px" delayMs={5000}> + <Error icon={props.icon} message={props.message} /> + </SlideUpAndDownAnimationComponent> +); 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<TextProps> = ({ 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<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 backgroundColor={ColorOption.white} borderRadius="3px" hasBoxShadow={true}> + <Flex direction="column" justify="flex-start"> + <InstantHeading /> + <OrderDetails /> + <BuyButton /> + </Flex> + </Container> </Container> ); |