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 } from './ui/container'; import { Flex } from './ui/flex'; import { Icon } from './ui/icon'; import { Text } from './ui/text'; 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', }, position: 'absolute', }; const slideDownSettings: PositionAnimationSettings = { duration: '0.3s', timingFunction: 'ease-out', top: { from: '0px', to: slideAmount, }, position: 'absolute', }; return ( ); };