From 0aef2c8ade2b0ae7b7ab7fef25ee4e8644a8b6c4 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 12 Oct 2018 15:35:20 -0700 Subject: feat(instant): add sliding error --- .../animations/slide_up_and_down_animation.tsx | 100 +++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 packages/instant/src/components/animations/slide_up_and_down_animation.tsx (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx new file mode 100644 index 000000000..958684021 --- /dev/null +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -0,0 +1,100 @@ +import * as React from 'react'; + +import { keyframes, styled } from '../../style/theme'; + +const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` + from { + position: relative; + top: ${fromY} + } + + to { + position: relative; + top: ${toY} + } +`; + +export interface SlideAnimationProps { + keyframes: string; + animationType: string; + animationDirection?: string; +} +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` + animation-name: ${props => 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; + z-index: -1; +`; + +export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( + + {props.children} + +); + +export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( + + {props.children} + +); + +export interface SlideUpAndDownAnimationProps { + delayMs: number; + downY: string; +} + +interface SlideUpAndDownState { + slideState: 'up' | 'down'; +} + +export class SlideUpAndDownAnimationComponent extends React.Component< + SlideUpAndDownAnimationProps, + SlideUpAndDownState +> { + private _timeoutNumber: number | undefined; + + constructor(props: SlideUpAndDownAnimationProps) { + super(props); + this._timeoutNumber = undefined; + this.state = { + slideState: 'up', + }; + } + + public render(): JSX.Element { + return this._renderSlide(); + } + + public componentDidMount(): void { + this._timeoutNumber = window.setTimeout(() => { + this.setState({ + slideState: 'down', + }); + }, this.props.delayMs); + + return; + } + + public componentWillUnmount(): void { + if (this._timeoutNumber) { + window.clearTimeout(this._timeoutNumber); + } + } + + private readonly _renderSlide = (): JSX.Element => { + const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; + + return {this.props.children}; + }; +} -- cgit v1.2.3 From 2aa4761d6dfaa007ed632816de9416a6477cd370 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 10:28:26 -0700 Subject: add semicolons --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index 958684021..ce1539c70 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -5,12 +5,12 @@ import { keyframes, styled } from '../../style/theme'; const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` from { position: relative; - top: ${fromY} + top: ${fromY}; } to { position: relative; - top: ${toY} + top: ${toY}; } `; -- cgit v1.2.3 From af495143974941fb6cc4210b1965c17f007465e6 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:12:52 -0700 Subject: suggestions from code review: renaming timeoutNumber to timeoutId, sharing interface, renaming component --- .../animations/slide_up_and_down_animation.tsx | 36 ++++++++++------------ 1 file changed, 16 insertions(+), 20 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index ce1539c70..2e8061a19 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -19,6 +19,7 @@ export interface SlideAnimationProps { animationType: string; animationDirection?: string; } + export const SlideAnimation = styled.div < SlideAnimationProps > @@ -33,13 +34,17 @@ export const SlideAnimation = z-index: -1; `; -export const SlideUpAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( +export interface SlideAnimationComponentProps { + downY: string; +} + +export const SlideUpAnimationComponent: React.StatelessComponent = props => ( {props.children} ); -export const SlideDownAnimationComponent: React.StatelessComponent<{ downY: string }> = props => ( +export const SlideDownAnimationComponent: React.StatelessComponent = props => ( ); -export interface SlideUpAndDownAnimationProps { +export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps { delayMs: number; - downY: string; } interface SlideUpAndDownState { slideState: 'up' | 'down'; } -export class SlideUpAndDownAnimationComponent extends React.Component< - SlideUpAndDownAnimationProps, - SlideUpAndDownState -> { - private _timeoutNumber: number | undefined; - +export class SlideUpAndDownAnimation extends React.Component { + private _timeoutId: number | undefined; constructor(props: SlideUpAndDownAnimationProps) { super(props); - this._timeoutNumber = undefined; + this._timeoutId = undefined; this.state = { slideState: 'up', }; } - - public render(): JSX.Element { + public render(): React.ReactNode { return this._renderSlide(); } - public componentDidMount(): void { - this._timeoutNumber = window.setTimeout(() => { + this._timeoutId = window.setTimeout(() => { this.setState({ slideState: 'down', }); @@ -85,14 +83,12 @@ export class SlideUpAndDownAnimationComponent extends React.Component< return; } - public componentWillUnmount(): void { - if (this._timeoutNumber) { - window.clearTimeout(this._timeoutNumber); + if (this._timeoutId) { + window.clearTimeout(this._timeoutId); } } - - private readonly _renderSlide = (): JSX.Element => { + private readonly _renderSlide = (): React.ReactNode => { const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; return {this.props.children}; -- cgit v1.2.3 From 58ad7d7caf475309dbd4e4486a1ed43404d5193c Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:15:02 -0700 Subject: change to ? syntax instead of number | undefined --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index 2e8061a19..da34b7485 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -63,7 +63,7 @@ interface SlideUpAndDownState { } export class SlideUpAndDownAnimation extends React.Component { - private _timeoutId: number | undefined; + private _timeoutId?: number; constructor(props: SlideUpAndDownAnimationProps) { super(props); this._timeoutId = undefined; -- cgit v1.2.3 From 20d60e2368b361e5055ddded9858cd11795b84d0 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:33:30 -0700 Subject: dont need constructor just to set state git status --- .../animations/slide_up_and_down_animation.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index da34b7485..05dda78be 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -36,6 +36,7 @@ export const SlideAnimation = export interface SlideAnimationComponentProps { downY: string; + children?: React.ReactNode; } export const SlideUpAnimationComponent: React.StatelessComponent = props => ( @@ -58,26 +59,27 @@ export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentPro delayMs: number; } +enum SlideState { + Up = 'up', + Down = 'down', +} interface SlideUpAndDownState { - slideState: 'up' | 'down'; + slideState: SlideState; } export class SlideUpAndDownAnimation extends React.Component { + public state = { + slideState: SlideState.Up, + }; + private _timeoutId?: number; - constructor(props: SlideUpAndDownAnimationProps) { - super(props); - this._timeoutId = undefined; - this.state = { - slideState: 'up', - }; - } public render(): React.ReactNode { return this._renderSlide(); } public componentDidMount(): void { this._timeoutId = window.setTimeout(() => { this.setState({ - slideState: 'down', + slideState: SlideState.Down, }); }, this.props.delayMs); -- cgit v1.2.3 From 14b47f3a9f18e8c348166036ea9decdd78c8699e Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 13:39:00 -0700 Subject: better private function syntax --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index 05dda78be..ce38e28b9 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -90,9 +90,9 @@ export class SlideUpAndDownAnimation extends React.Component { + private _renderSlide(): React.ReactNode { const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; return {this.props.children}; - }; + } } -- cgit v1.2.3 From f13d061dd2725bd87a6021dec2dad6f1cccb57dc Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 14:04:53 -0700 Subject: move z-index setting to zero instant container, and add ability for zindex to be set on container --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index ce38e28b9..a78607afa 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -31,7 +31,6 @@ export const SlideAnimation = animation-iteration-count: 1; animation-fill-mode: ${props => props.animationDirection || 'none'}; position: relative; - z-index: -1; `; export interface SlideAnimationComponentProps { -- cgit v1.2.3 From b0a2cacd82ba3e24f22470f624be0f3d8324a478 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 15 Oct 2018 17:11:43 -0700 Subject: take out explicit children definition in props --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index a78607afa..9c18e0933 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -35,7 +35,6 @@ export const SlideAnimation = export interface SlideAnimationComponentProps { downY: string; - children?: React.ReactNode; } export const SlideUpAnimationComponent: React.StatelessComponent = props => ( -- cgit v1.2.3 From 18c9907d6f168577c9d5f60117901268a25f6af9 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Fri, 12 Oct 2018 15:35:20 -0700 Subject: feat(instant): add sliding error --- .../instant/src/components/animations/slide_up_and_down_animation.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx index 9c18e0933..5fa0b0eda 100644 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx @@ -19,7 +19,6 @@ export interface SlideAnimationProps { animationType: string; animationDirection?: string; } - export const SlideAnimation = styled.div < SlideAnimationProps > -- cgit v1.2.3 From db77cd10c550803c4f3fac585adc0a7f6ffa8999 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 16 Oct 2018 11:25:52 -0700 Subject: feat(instant): Handle AssetBuyer errors --- .../src/components/animations/slide_animations.tsx | 54 ++++++++++++ .../animations/slide_up_and_down_animation.tsx | 95 ---------------------- 2 files changed, 54 insertions(+), 95 deletions(-) create mode 100644 packages/instant/src/components/animations/slide_animations.tsx delete mode 100644 packages/instant/src/components/animations/slide_up_and_down_animation.tsx (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx new file mode 100644 index 000000000..1f10a2ed6 --- /dev/null +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -0,0 +1,54 @@ +import * as React from 'react'; + +import { keyframes, styled } from '../../style/theme'; + +const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` + from { + position: relative; + top: ${fromY}; + } + + to { + position: relative; + top: ${toY}; + } +`; + +export interface SlideAnimationProps { + keyframes: string; + animationType: string; + animationDirection?: string; +} + +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` + animation-name: ${props => 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} + +); diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx deleted file mode 100644 index 5fa0b0eda..000000000 --- a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; - -import { keyframes, styled } from '../../style/theme'; - -const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` - from { - position: relative; - top: ${fromY}; - } - - to { - position: relative; - top: ${toY}; - } -`; - -export interface SlideAnimationProps { - keyframes: string; - animationType: string; - animationDirection?: string; -} -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` - animation-name: ${props => 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 SlideUpAnimationComponent: React.StatelessComponent = props => ( - - {props.children} - -); - -export const SlideDownAnimationComponent: React.StatelessComponent = props => ( - - {props.children} - -); - -export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps { - delayMs: number; -} - -enum SlideState { - Up = 'up', - Down = 'down', -} -interface SlideUpAndDownState { - slideState: SlideState; -} - -export class SlideUpAndDownAnimation extends React.Component { - public state = { - slideState: SlideState.Up, - }; - - private _timeoutId?: number; - public render(): React.ReactNode { - return this._renderSlide(); - } - public componentDidMount(): void { - this._timeoutId = window.setTimeout(() => { - this.setState({ - slideState: SlideState.Down, - }); - }, this.props.delayMs); - - return; - } - public componentWillUnmount(): void { - if (this._timeoutId) { - window.clearTimeout(this._timeoutId); - } - } - private _renderSlide(): React.ReactNode { - const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent; - - return {this.props.children}; - } -} -- cgit v1.2.3 From 12b6877aeb0a6bcddab4193b62cd10347b8c328b Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Thu, 18 Oct 2018 13:31:11 -0700 Subject: Pulsating holder element showing, even if amount is empty --- packages/instant/src/components/animations/pulse.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 packages/instant/src/components/animations/pulse.tsx (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/pulse.tsx b/packages/instant/src/components/animations/pulse.tsx new file mode 100644 index 000000000..01d6ea070 --- /dev/null +++ b/packages/instant/src/components/animations/pulse.tsx @@ -0,0 +1,15 @@ +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; +`; -- cgit v1.2.3 From 43ad2fe23bec01b077f5c55a23736fdcb24781a3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 19 Oct 2018 13:34:42 -0700 Subject: feat: upgrade to styled-components v4 --- .../instant/src/components/animations/slide_animations.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 1f10a2ed6..84280372b 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import { Keyframes } from 'styled-components'; -import { keyframes, styled } from '../../style/theme'; +import { css, keyframes, styled } from '../../style/theme'; const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` from { @@ -15,7 +16,7 @@ const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes` `; export interface SlideAnimationProps { - keyframes: string; + keyframes: Keyframes; animationType: string; animationDirection?: string; } @@ -24,7 +25,10 @@ export const SlideAnimation = styled.div < SlideAnimationProps > ` - animation-name: ${props => props.keyframes}; + animation-name: ${props => + css` + ${props.keyframes}; + `}; animation-duration: 0.3s; animation-timing-function: ${props => props.animationType}; animation-delay: 0s; -- cgit v1.2.3 From f06541ec94c2f3b8d1924da376178a5fc3f442e6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 19 Oct 2018 13:46:31 -0700 Subject: fix: animation component typing --- packages/instant/src/components/animations/slide_animations.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 84280372b..7c8666861 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -21,10 +21,7 @@ export interface SlideAnimationProps { animationDirection?: string; } -export const SlideAnimation = - styled.div < - SlideAnimationProps > - ` +export const SlideAnimation = styled('div')` animation-name: ${props => css` ${props.keyframes}; -- cgit v1.2.3 From daf447361f911acf19a0f0489039244695945218 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 22 Oct 2018 13:11:29 -0700 Subject: WIP: spinner --- .../instant/src/components/animations/full_rotation.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 packages/instant/src/components/animations/full_rotation.tsx (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx new file mode 100644 index 000000000..0b36fd21f --- /dev/null +++ b/packages/instant/src/components/animations/full_rotation.tsx @@ -0,0 +1,15 @@ +import { keyframes, styled } from '../../style/theme'; + +const rotatingKeyframes = keyframes` +from { + transform: rotate(0deg); +} + +to { + transform: rotate(360deg); +} +`; + +export const FullRotation = styled.div` + animation: ${rotatingKeyframes} 2s linear infinite; +`; -- cgit v1.2.3 From d52a04e725afce3c2d563bcc52bd3273002af318 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Mon, 22 Oct 2018 13:18:37 -0700 Subject: Spinner no longer wobbly --- packages/instant/src/components/animations/full_rotation.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/full_rotation.tsx b/packages/instant/src/components/animations/full_rotation.tsx index 0b36fd21f..9adb565f9 100644 --- a/packages/instant/src/components/animations/full_rotation.tsx +++ b/packages/instant/src/components/animations/full_rotation.tsx @@ -1,5 +1,9 @@ import { keyframes, styled } from '../../style/theme'; +interface FullRotationProps { + height: string; + width: string; +} const rotatingKeyframes = keyframes` from { transform: rotate(0deg); @@ -10,6 +14,11 @@ to { } `; -export const FullRotation = styled.div` +export const FullRotation = + styled.div < + FullRotationProps > + ` animation: ${rotatingKeyframes} 2s linear infinite; + height: ${props => props.height}; + width: ${props => props.width}; `; -- cgit v1.2.3 From d5d99b9d2e3c793a95c68c1035246644b3ae80c6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 25 Oct 2018 18:35:06 -0700 Subject: chore: dont override toString of BigNumber and other PR feedback --- packages/instant/src/components/animations/slide_animations.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/instant/src/components/animations') diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx index 7c8666861..84280372b 100644 --- a/packages/instant/src/components/animations/slide_animations.tsx +++ b/packages/instant/src/components/animations/slide_animations.tsx @@ -21,7 +21,10 @@ export interface SlideAnimationProps { animationDirection?: string; } -export const SlideAnimation = styled('div')` +export const SlideAnimation = + styled.div < + SlideAnimationProps > + ` animation-name: ${props => css` ${props.keyframes}; -- cgit v1.2.3 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 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