diff options
author | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-10-18 18:35:07 +0800 |
commit | cdd650d0eb83153a992922c6ffff35b494f299d3 (patch) | |
tree | fc12135e69ae74403a26408d2d7625e8a3fe334e /packages/instant/src/components/sliding_error.tsx | |
parent | c333d093b585fa0250a6973f2d396eb3cf227334 (diff) | |
parent | bd8ba14bf46cb901e14f0ee718ac01cdbc833e86 (diff) | |
download | dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.gz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.bz2 dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.lz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.xz dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.tar.zst dexon-sol-tools-cdd650d0eb83153a992922c6ffff35b494f299d3.zip |
merge development
Diffstat (limited to 'packages/instant/src/components/sliding_error.tsx')
-rw-r--r-- | packages/instant/src/components/sliding_error.tsx | 24 |
1 files changed, 16 insertions, 8 deletions
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx index 0237fb7e9..3865a8797 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 { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation'; +import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations'; import { Container, Text } from './ui'; @@ -20,8 +20,8 @@ export const Error: React.StatelessComponent<ErrorProps> = props => ( borderRadius="6px" marginBottom="10px" > - <Container marginRight="5px" display="inline"> - {props.icon} + <Container marginRight="5px" display="inline" top="3px" position="relative"> + <Text fontSize="20px">{props.icon}</Text> </Container> <Text fontWeight="500" fontColor={ColorOption.darkOrange}> {props.message} @@ -29,8 +29,16 @@ export const Error: React.StatelessComponent<ErrorProps> = props => ( </Container> ); -export const SlidingError: React.StatelessComponent<ErrorProps> = props => ( - <SlideUpAndDownAnimation downY="120px" delayMs={5000}> - <Error icon={props.icon} message={props.message} /> - </SlideUpAndDownAnimation> -); +export type SlidingDirection = 'up' | 'down'; +export interface SlidingErrorProps extends ErrorProps { + direction: SlidingDirection; +} +export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => { + const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation; + + return ( + <AnimationComponent downY="120px"> + <Error icon={props.icon} message={props.message} /> + </AnimationComponent> + ); +}; |