From a49bf353f85c22a029db3085a620f3c031b52d73 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 15:21:58 -0700 Subject: feat: refactor animation code --- .../components/animations/position_animation.tsx | 70 ++++++++++++++++++++++ .../src/components/animations/slide_animations.tsx | 58 +++--------------- 2 files changed, 79 insertions(+), 49 deletions(-) create mode 100644 packages/instant/src/components/animations/position_animation.tsx (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx new file mode 100644 index 000000000..de38ee30a --- /dev/null +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import { Keyframes } from 'styled-components'; + +import { css, keyframes, styled } from '../../style/theme'; + +const generateTransitionInfoCss = ( + key: keyof TransitionInfo, + top?: TransitionInfo, + bottom?: TransitionInfo, + left?: TransitionInfo, + right?: TransitionInfo, +): string => { + const topStringIfExists = top ? `top: ${top[key]};` : ''; + const bottomStringIfExists = bottom ? `bottom: ${bottom[key]};` : ''; + const leftStringIfExists = left ? `left: ${left[key]};` : ''; + const rightStringIfExists = right ? `right: ${right[key]};` : ''; + return ` + ${topStringIfExists} + ${bottomStringIfExists} + ${leftStringIfExists} + ${rightStringIfExists} + `; +}; + +const slideKeyframeGenerator = ( + top?: TransitionInfo, + bottom?: TransitionInfo, + left?: TransitionInfo, + right?: TransitionInfo, +) => keyframes` + from { + position: relative; + ${generateTransitionInfoCss('from', top, bottom, left, right)} + } + + to { + position: relative; + ${generateTransitionInfoCss('to', top, bottom, left, right)} + } +`; + +export interface TransitionInfo { + from: string; + to: string; +} + +export interface PositionAnimationProps { + top?: TransitionInfo; + bottom?: TransitionInfo; + left?: TransitionInfo; + right?: TransitionInfo; + timingFunction: string; + direction?: string; +} + +export const PositionAnimation = + styled.div < + PositionAnimationProps > + ` + animation-name: ${props => + css` + ${slideKeyframeGenerator(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; +`; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 84280372b..99533a2f0 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -3,56 +3,16 @@ import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; -const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` - from { - position: relative; - top: ${fromY}; - } - - to { - position: relative; - top: ${toY}; - } -`; +import { PositionAnimation, PositionAnimationProps } from './position_animation'; +export type SlideAnimationPhase = 'slideIn' | 'slideOut'; export interface SlideAnimationProps { - keyframes: Keyframes; - animationType: string; - animationDirection?: string; + phase: SlideAnimationPhase; + slideIn: PositionAnimationProps; + slideOut: PositionAnimationProps; } -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` - animation-name: ${props => - css` - ${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 SlideUpAnimation: React.StatelessComponent = props => ( - - {props.children} - -); - -export const SlideDownAnimation: React.StatelessComponent = props => ( - - {props.children} - -); +export const SlideAnimation: React.StatelessComponent = props => { + const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; + return {props.children}; +}; -- cgit v1.2.3 From 4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 15:32:43 -0700 Subject: feat: allow for flexible position in position animation component --- .../src/components/animations/position_animation.tsx | 15 ++++++++++----- .../src/components/animations/slide_animations.tsx | 13 +++++++++---- 2 files changed, 19 insertions(+), 9 deletions(-) (limited to 'packages/instant/src/components/animations') 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 = props => { const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; - return {props.children}; + return ( + + {props.children} + + ); }; -- cgit v1.2.3 From 91f8487947d7941b508c34d1bfc1e72c0840c33d Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 30 Oct 2018 16:57:42 -0700 Subject: feat: implement sliding panel --- .../components/animations/position_animation.tsx | 9 +++++---- .../src/components/animations/slide_animation.tsx | 23 ++++++++++++++++++++++ .../src/components/animations/slide_animations.tsx | 23 ---------------------- 3 files changed, 28 insertions(+), 27 deletions(-) create mode 100644 packages/instant/src/components/animations/slide_animation.tsx delete mode 100644 packages/instant/src/components/animations/slide_animations.tsx (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index 3d6b5f8dc..aefd7ef30 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; @@ -51,7 +50,7 @@ export interface PositionAnimationSettings { left?: TransitionInfo; right?: TransitionInfo; timingFunction: string; - direction?: string; + duration?: string; } export interface PositionAnimationProps extends PositionAnimationSettings { @@ -66,10 +65,12 @@ export const PositionAnimation = css` ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)}; `}; - animation-duration: 0.3s; + animation-duration: ${props => props.duration || '0.3s'}; animation-timing-function: ${props => props.timingFunction}; animation-delay: 0s; animation-iteration-count: 1; - animation-fill-mode: ${props => props.direction || 'none'}; + animation-fill-mode: forwards; position: ${props => props.position}; + height: 100%; + width: 100%; `; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx new file mode 100644 index 000000000..4124e50c3 --- /dev/null +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import { PositionAnimation, PositionAnimationSettings } from './position_animation'; + +export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; +export interface SlideAnimationProps { + position: string; + animationState: SlideAnimationState; + slideIn: PositionAnimationSettings; + slideOut: PositionAnimationSettings; +} + +export const SlideAnimation: React.StatelessComponent = props => { + if (props.animationState === 'none') { + return {props.children}; + } + const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut; + return ( + + {props.children} + + ); +}; diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx deleted file mode 100644 index 9f1535297..000000000 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import { Keyframes } from 'styled-components'; - -import { css, keyframes, styled } from '../../style/theme'; - -import { PositionAnimation, PositionAnimationSettings } from './position_animation'; - -export type SlideAnimationPhase = 'slideIn' | 'slideOut'; -export interface SlideAnimationProps { - position: string; - phase: SlideAnimationPhase; - slideIn: PositionAnimationSettings; - slideOut: PositionAnimationSettings; -} - -export const SlideAnimation: React.StatelessComponent = props => { - const propsToUse = props.phase === 'slideIn' ? props.slideIn : props.slideOut; - return ( - - {props.children} - - ); -}; -- cgit v1.2.3 From 27258fe3d45b8ffae81b74da43e473ae5905edc1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 31 Oct 2018 11:55:48 -0700 Subject: chore: address PR feedback --- .../src/components/animations/position_animation.tsx | 14 +++++++++----- .../instant/src/components/animations/slide_animation.tsx | 6 +++--- 2 files changed, 12 insertions(+), 8 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx index aefd7ef30..4bb21befb 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -2,6 +2,11 @@ import { Keyframes } from 'styled-components'; import { css, keyframes, styled } from '../../style/theme'; +export interface TransitionInfo { + from: string; + to: string; +} + const generateTransitionInfoCss = ( key: keyof TransitionInfo, top?: TransitionInfo, @@ -39,11 +44,6 @@ const slideKeyframeGenerator = ( } `; -export interface TransitionInfo { - from: string; - to: string; -} - export interface PositionAnimationSettings { top?: TransitionInfo; bottom?: TransitionInfo; @@ -74,3 +74,7 @@ export const PositionAnimation = height: 100%; width: 100%; `; + +PositionAnimation.defaultProps = { + position: 'relative', +}; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx index 4124e50c3..66a314c7f 100644 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -6,15 +6,15 @@ export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export interface SlideAnimationProps { position: string; animationState: SlideAnimationState; - slideIn: PositionAnimationSettings; - slideOut: PositionAnimationSettings; + slideInSettings: PositionAnimationSettings; + slideOutSettings: PositionAnimationSettings; } export const SlideAnimation: React.StatelessComponent = props => { if (props.animationState === 'none') { return {props.children}; } - const propsToUse = props.animationState === 'slidIn' ? props.slideIn : props.slideOut; + const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; return ( {props.children} -- cgit v1.2.3