diff options
Diffstat (limited to 'packages/instant/src/components/animations')
4 files changed, 0 insertions, 177 deletions
diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx deleted file mode 100644 index 1dff1b1fc..000000000 --- a/packages/instant/src/components/animations/full_rotation.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { keyframes, styled } from '../../style/theme'; - -interface FullRotationProps { - height: string; - width: string; -} -const rotatingKeyframes = keyframes` -from { - transform: rotate(0deg); -} - -to { - transform: rotate(360deg); -} -`; - -export const FullRotation = styled.div<FullRotationProps>` - animation: ${rotatingKeyframes} 2s linear infinite; - height: ${props => props.height}; - width: ${props => props.width}; -`; diff --git a/packages/instant/src/components/animations/position_animation.tsx b/packages/instant/src/components/animations/position_animation.tsx deleted file mode 100644 index 4f8f25679..000000000 --- a/packages/instant/src/components/animations/position_animation.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { InterpolationValue } from 'styled-components'; - -import { media, OptionallyScreenSpecific, stylesForMedia } from '../../style/media'; -import { css, keyframes, styled } from '../../style/theme'; - -export interface TransitionInfo { - from: string; - to: string; -} - -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 = ( - position: string, - top?: TransitionInfo, - bottom?: TransitionInfo, - left?: TransitionInfo, - right?: TransitionInfo, -) => keyframes` - from { - position: ${position}; - ${generateTransitionInfoCss('from', top, bottom, left, right)} - } - - to { - position: ${position}; - ${generateTransitionInfoCss('to', top, bottom, left, right)} - } -`; - -export interface PositionAnimationSettings { - top?: TransitionInfo; - bottom?: TransitionInfo; - left?: TransitionInfo; - right?: TransitionInfo; - timingFunction: string; - duration?: string; - position?: string; -} - -const generatePositionAnimationCss = (positionSettings: PositionAnimationSettings) => { - return css` - animation-name: ${slideKeyframeGenerator( - positionSettings.position || 'relative', - positionSettings.top, - positionSettings.bottom, - positionSettings.left, - positionSettings.right, - )}; - animation-duration: ${positionSettings.duration || '0.3s'}; - animation-timing-function: ${positionSettings.timingFunction}; - animation-delay: 0s; - animation-iteration-count: 1; - animation-fill-mode: forwards; - position: ${positionSettings.position || 'relative'}; - width: 100%; - `; -}; - -export interface PositionAnimationProps { - positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>; - zIndex?: OptionallyScreenSpecific<number>; - height?: string; -} - -const defaultAnimation = (positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>) => { - const bestDefault = 'default' in positionSettings ? positionSettings.default : positionSettings; - return generatePositionAnimationCss(bestDefault); -}; -const animationForSize = ( - positionSettings: OptionallyScreenSpecific<PositionAnimationSettings>, - sizeKey: 'sm' | 'md' | 'lg', - mediaFn: (...args: any[]) => InterpolationValue[], -) => { - // checking default makes sure we have a PositionAnimationSettings object - // and then we check to see if we have a setting for the specific `sizeKey` - const animationSettingsForSize = 'default' in positionSettings && positionSettings[sizeKey]; - return animationSettingsForSize && mediaFn`${generatePositionAnimationCss(animationSettingsForSize)}`; -}; - -export const PositionAnimation = styled.div<PositionAnimationProps>` - && { - ${props => props.zIndex && stylesForMedia<number>('z-index', props.zIndex)} - ${props => defaultAnimation(props.positionSettings)} - ${props => animationForSize(props.positionSettings, 'sm', media.small)} - ${props => animationForSize(props.positionSettings, 'md', media.medium)} - ${props => animationForSize(props.positionSettings, 'lg', media.large)} - ${props => (props.height ? `height: ${props.height};` : '')} - } -`; diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx deleted file mode 100644 index 01d6ea070..000000000 --- a/packages/instant/src/components/animations/pulse.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { keyframes, styled } from '../../style/theme'; - -const pulsingKeyframes = keyframes` - 0%, 100% { - opacity: 0.2; - } - 50% { - opacity: 100; - } -`; -export const Pulse = styled.div` - animation-name: ${pulsingKeyframes} - animation-duration: 2s; - animation-iteration-count: infinite; -`; diff --git a/packages/instant/src/components/animations/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx deleted file mode 100644 index 6ac47e9a6..000000000 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import { OptionallyScreenSpecific } from '../../style/media'; -import { SlideAnimationState } from '../../types'; - -import { PositionAnimation, PositionAnimationSettings } from './position_animation'; - -export interface SlideAnimationProps { - animationState: SlideAnimationState; - slideInSettings: OptionallyScreenSpecific<PositionAnimationSettings>; - slideOutSettings: OptionallyScreenSpecific<PositionAnimationSettings>; - zIndex?: OptionallyScreenSpecific<number>; - height?: string; - onAnimationEnd?: () => void; -} - -export const SlideAnimation: React.StatelessComponent<SlideAnimationProps> = props => { - if (props.animationState === 'none') { - return <React.Fragment>{props.children}</React.Fragment>; - } - const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; - return ( - <PositionAnimation - onAnimationEnd={props.onAnimationEnd} - height={props.height} - positionSettings={positionSettings} - zIndex={props.zIndex} - > - {props.children} - </PositionAnimation> - ); -}; - -SlideAnimation.displayName = 'SlideAnimation'; |