aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/sliding_panel.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/sliding_panel.tsx')
-rw-r--r--packages/instant/src/components/sliding_panel.tsx73
1 files changed, 0 insertions, 73 deletions
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx
deleted file mode 100644
index 9b09a0d80..000000000
--- a/packages/instant/src/components/sliding_panel.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from 'react';
-
-import { ColorOption } from '../style/theme';
-import { zIndex } from '../style/z_index';
-import { SlideAnimationState } from '../types';
-
-import { PositionAnimationSettings } from './animations/position_animation';
-import { SlideAnimation } from './animations/slide_animation';
-
-import { Container } from './ui/container';
-import { Flex } from './ui/flex';
-import { Icon } from './ui/icon';
-
-export interface PanelProps {
- onClose?: () => void;
-}
-
-export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
- <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px">
- <Flex justify="flex-end">
- <Icon padding="5px" width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} />
- </Flex>
- <Container position="relative" top="-10px" height="100%">
- {children}
- </Container>
- </Container>
-);
-
-Panel.displayName = 'Panel';
-
-export interface SlidingPanelProps extends PanelProps {
- animationState: SlideAnimationState;
- onAnimationEnd?: () => void;
-}
-
-export class SlidingPanel extends React.PureComponent<SlidingPanelProps> {
- public render(): React.ReactNode {
- if (this.props.animationState === 'none') {
- return null;
- }
- const { animationState, onAnimationEnd, ...rest } = this.props;
- const slideAmount = '100%';
- const slideUpSettings: PositionAnimationSettings = {
- duration: '0.3s',
- timingFunction: 'ease-in-out',
- top: {
- from: slideAmount,
- to: '0px',
- },
- position: 'absolute',
- };
- const slideDownSettings: PositionAnimationSettings = {
- duration: '0.3s',
- timingFunction: 'ease-out',
- top: {
- from: '0px',
- to: slideAmount,
- },
- position: 'absolute',
- };
- return (
- <SlideAnimation
- slideInSettings={slideUpSettings}
- slideOutSettings={slideDownSettings}
- animationState={animationState}
- height="100%"
- onAnimationEnd={onAnimationEnd}
- >
- <Panel {...rest} />
- </SlideAnimation>
- );
- }
-}