From 117e2f583ff44bdb63340a2134edea0f3ecb77b3 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 8 Nov 2018 15:37:56 -0800 Subject: [instant] Viewport specific errors (#1228) feat(instant): Shows different error animation based on viewport --- .../components/animations/position_animation.tsx | 66 +++++++++++++++------- .../src/components/animations/slide_animation.tsx | 12 ++-- 2 files changed, 54 insertions(+), 24 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 4bb21befb..576d29c07 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -1,5 +1,6 @@ -import { Keyframes } from 'styled-components'; +import { InterpolationValue } from 'styled-components'; +import { media, OptionallyScreenSpecific, stylesForMedia } from '../../style/media'; import { css, keyframes, styled } from '../../style/theme'; export interface TransitionInfo { @@ -51,30 +52,57 @@ export interface PositionAnimationSettings { right?: TransitionInfo; timingFunction: string; duration?: string; + position?: string; } -export interface PositionAnimationProps extends PositionAnimationSettings { - 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; + zIndex?: OptionallyScreenSpecific; } +const defaultAnimation = (positionSettings: OptionallyScreenSpecific) => { + const bestDefault = 'default' in positionSettings ? positionSettings.default : positionSettings; + return generatePositionAnimationCss(bestDefault); +}; +const animationForSize = ( + positionSettings: OptionallyScreenSpecific, + 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 > ` - animation-name: ${props => - css` - ${slideKeyframeGenerator(props.position, props.top, props.bottom, props.left, props.right)}; - `}; - animation-duration: ${props => props.duration || '0.3s'}; - animation-timing-function: ${props => props.timingFunction}; - animation-delay: 0s; - animation-iteration-count: 1; - animation-fill-mode: forwards; - position: ${props => props.position}; - height: 100%; - width: 100%; + && { + ${props => props.zIndex && stylesForMedia('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)} + } `; - -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 66a314c7f..122229dee 100644 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -1,22 +1,24 @@ import * as React from 'react'; +import { OptionallyScreenSpecific } from '../../style/media'; + import { PositionAnimation, PositionAnimationSettings } from './position_animation'; export type SlideAnimationState = 'slidIn' | 'slidOut' | 'none'; export interface SlideAnimationProps { - position: string; animationState: SlideAnimationState; - slideInSettings: PositionAnimationSettings; - slideOutSettings: PositionAnimationSettings; + slideInSettings: OptionallyScreenSpecific; + slideOutSettings: OptionallyScreenSpecific; + zIndex?: OptionallyScreenSpecific; } export const SlideAnimation: React.StatelessComponent = props => { if (props.animationState === 'none') { return {props.children}; } - const propsToUse = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; + const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; return ( - + {props.children} ); -- cgit v1.2.3 From 5d74421e438d0b56f31344f5fc4d4abbcb190722 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 8 Nov 2018 15:53:21 -0800 Subject: fix: broken features because of merge --- packages/instant/src/components/animations/position_animation.tsx | 2 ++ packages/instant/src/components/animations/slide_animation.tsx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) (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 576d29c07..8b3b294b7 100644 --- a/packages/instant/src/components/animations/position_animation.tsx +++ b/packages/instant/src/components/animations/position_animation.tsx @@ -77,6 +77,7 @@ const generatePositionAnimationCss = (positionSettings: PositionAnimationSetting export interface PositionAnimationProps { positionSettings: OptionallyScreenSpecific; zIndex?: OptionallyScreenSpecific; + height?: string; } const defaultAnimation = (positionSettings: OptionallyScreenSpecific) => { @@ -104,5 +105,6 @@ export const PositionAnimation = ${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/slide_animation.tsx b/packages/instant/src/components/animations/slide_animation.tsx index 122229dee..9adb1c674 100644 --- a/packages/instant/src/components/animations/slide_animation.tsx +++ b/packages/instant/src/components/animations/slide_animation.tsx @@ -10,6 +10,7 @@ export interface SlideAnimationProps { slideInSettings: OptionallyScreenSpecific; slideOutSettings: OptionallyScreenSpecific; zIndex?: OptionallyScreenSpecific; + height?: string; } export const SlideAnimation: React.StatelessComponent = props => { @@ -18,7 +19,7 @@ export const SlideAnimation: React.StatelessComponent = pro } const positionSettings = props.animationState === 'slidIn' ? props.slideInSettings : props.slideOutSettings; return ( - + {props.children} ); -- cgit v1.2.3