import * as React from 'react'; import { ColorOption } from '../style/theme'; import { zIndex } from '../style/z_index'; import { PositionAnimationSettings } from './animations/position_animation'; import { SlideAnimation, SlideAnimationState } from './animations/slide_animation'; import { Container, Flex, Icon, Text } from './ui'; export interface PanelProps { title?: string; onClose?: () => void; } export const Panel: React.StatelessComponent = ({ title, children, onClose }) => ( {title && ( {title} )} {children} ); export interface SlidingPanelProps extends PanelProps { animationState: SlideAnimationState; } export const SlidingPanel: React.StatelessComponent = props => { if (props.animationState === 'none') { return null; } const { animationState, ...rest } = props; const slideAmount = '100%'; const slideUpSettings: PositionAnimationSettings = { duration: '0.3s', timingFunction: 'ease-in-out', top: { from: slideAmount, to: '0px', }, }; const slideDownSettings: PositionAnimationSettings = { duration: '0.3s', timingFunction: 'ease-out', top: { from: '0px', to: slideAmount, }, }; return ( ); };