aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-31 06:32:43 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-31 06:32:43 +0800
commit4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 (patch)
tree59b4d1e63c31477b96adb13fd55d44baf094208b /packages/instant
parenta49bf353f85c22a029db3085a620f3c031b52d73 (diff)
downloaddexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.tar
dexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.tar.gz
dexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.tar.bz2
dexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.tar.lz
dexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.tar.xz
dexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.tar.zst
dexon-sol-tools-4456c3ee14f5cd778e0d16ab42a3e2e34d102f23.zip
feat: allow for flexible position in position animation component
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/animations/position_animation.tsx15
-rw-r--r--packages/instant/src/components/animations/slide_animations.tsx13
-rw-r--r--packages/instant/src/components/sliding_error.tsx8
3 files changed, 23 insertions, 13 deletions
diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx
index de38ee30a..3d6b5f8dc 100644
--- a/packages/instant/src/components/animations/position_animation.tsx
+++ b/packages/instant/src/components/animations/position_animation.tsx
@@ -23,18 +23,19 @@ const generateTransitionInfoCss = (
};
const slideKeyframeGenerator = (
+ position: string,
top?: TransitionInfo,
bottom?: TransitionInfo,
left?: TransitionInfo,
right?: TransitionInfo,
) => keyframes`
from {
- position: relative;
+ position: ${position};
${generateTransitionInfoCss('from', top, bottom, left, right)}
}
to {
- position: relative;
+ position: ${position};
${generateTransitionInfoCss('to', top, bottom, left, right)}
}
`;
@@ -44,7 +45,7 @@ export interface TransitionInfo {
to: string;
}
-export interface PositionAnimationProps {
+export interface PositionAnimationSettings {
top?: TransitionInfo;
bottom?: TransitionInfo;
left?: TransitionInfo;
@@ -53,18 +54,22 @@ export interface PositionAnimationProps {
direction?: string;
}
+export interface PositionAnimationProps extends PositionAnimationSettings {
+ position: string;
+}
+
export const PositionAnimation =
styled.div <
PositionAnimationProps >
`
animation-name: ${props =>
css`
- ${slideKeyframeGenerator(props.top, props.bottom, props.left, props.right)};
+ ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)};
`};
animation-duration: 0.3s;
animation-timing-function: ${props => props.timingFunction};
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: ${props => props.direction || 'none'};
- position: relative;
+ position: ${props => props.position};
`;
diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 99533a2f0..9f1535297 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -3,16 +3,21 @@ import { Keyframes } from 'styled-components';
import { css, keyframes, styled } from '../../style/theme';
-import { PositionAnimation, PositionAnimationProps } from './position_animation';
+import { PositionAnimation, PositionAnimationSettings } from './position_animation';
export type SlideAnimationPhase = 'slideIn' | 'slideOut';
export interface SlideAnimationProps {
+ position: string;
phase: SlideAnimationPhase;
- slideIn: PositionAnimationProps;
- slideOut: PositionAnimationProps;
+ slideIn: PositionAnimationSettings;
+ slideOut: PositionAnimationSettings;
}
export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => {
const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut;
- return <PositionAnimation {...propsToUse}>{props.children}</PositionAnimation>;
+ return (
+ <PositionAnimation position={props.position} {...propsToUse}>
+ {props.children}
+ </PositionAnimation>
+ );
};
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 8f209765e..0ad11bbad 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 { PositionAnimationProps } from './animations/position_animation';
+import { PositionAnimationSettings } from './animations/position_animation';
import { SlideAnimation, SlideAnimationPhase } from './animations/slide_animations';
import { Container, Flex, Text } from './ui';
@@ -37,14 +37,14 @@ export interface SlidingErrorProps extends ErrorProps {
}
export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
const slideAmount = '120px';
- const slideUp: PositionAnimationProps = {
+ const slideUp: PositionAnimationSettings = {
timingFunction: 'ease-in',
top: {
from: slideAmount,
to: '0px',
},
};
- const slideDown: PositionAnimationProps = {
+ const slideDown: PositionAnimationSettings = {
timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
top: {
from: '0px',
@@ -53,7 +53,7 @@ export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props =
direction: 'forwards',
};
return (
- <SlideAnimation slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
+ <SlideAnimation position="relative" slideIn={slideUp} slideOut={slideDown} phase={props.phase}>
<Error icon={props.icon} message={props.message} />
</SlideAnimation>
);