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 = ({ children, onClose }) => ( {children} ); Panel.displayName = 'Panel'; export interface SlidingPanelProps extends PanelProps { animationState: SlideAnimationState; onAnimationEnd?: () => void; } export class SlidingPanel extends React.PureComponent { 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 ( ); } }