diff options
author | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
---|---|---|
committer | Hsuan Lee <hsuan@cobinhood.com> | 2019-01-19 18:42:04 +0800 |
commit | 7ae38906926dc09bc10670c361af0d2bf0050426 (patch) | |
tree | 5fb10ae366b987db09e4ddb4bc3ba0f75404ad08 /packages/instant/src/components/sliding_panel.tsx | |
parent | b5fd3c72a08aaa6957917d74c333387a16edf66b (diff) | |
download | dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.gz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.bz2 dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.lz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.xz dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.tar.zst dexon-sol-tools-7ae38906926dc09bc10670c361af0d2bf0050426.zip |
Update dependency packages
Diffstat (limited to 'packages/instant/src/components/sliding_panel.tsx')
-rw-r--r-- | packages/instant/src/components/sliding_panel.tsx | 73 |
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> - ); - } -} |