diff options
author | Fabio Berger <me@fabioberger.com> | 2018-11-12 05:11:10 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-11-12 05:11:10 +0800 |
commit | 0391f93490cffdc69f6cb32f11762d174ed04e37 (patch) | |
tree | 3a8b30a04de1193aa21e5b84bd572db24979a8bf /packages/instant/src/components/sliding_panel.tsx | |
parent | 399a7d5fec9af4f3491a77f0c2d46738f3d8ffa7 (diff) | |
parent | 397b4e289015f9bb0831c1a0ce6fee601670b487 (diff) | |
download | dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.gz dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.bz2 dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.lz dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.xz dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.tar.zst dexon-sol-tools-0391f93490cffdc69f6cb32f11762d174ed04e37.zip |
merge development
Diffstat (limited to 'packages/instant/src/components/sliding_panel.tsx')
-rw-r--r-- | packages/instant/src/components/sliding_panel.tsx | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/packages/instant/src/components/sliding_panel.tsx b/packages/instant/src/components/sliding_panel.tsx new file mode 100644 index 000000000..9d16f9560 --- /dev/null +++ b/packages/instant/src/components/sliding_panel.tsx @@ -0,0 +1,77 @@ +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<PanelProps> = ({ title, children, onClose }) => ( + <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel} padding="20px"> + <Flex justify="space-between"> + {title && ( + <Container marginTop="3px"> + <Text fontColor={ColorOption.darkGrey} fontSize="18px" fontWeight="600" lineHeight="22px"> + {title} + </Text> + </Container> + )} + <Container position="relative" bottom="7px"> + <Icon width={12} color={ColorOption.lightGrey} icon="closeX" onClick={onClose} /> + </Container> + </Flex> + <Container marginTop="10px" height="100%"> + {children} + </Container> + </Container> +); + +export interface SlidingPanelProps extends PanelProps { + animationState: SlideAnimationState; +} + +export const SlidingPanel: React.StatelessComponent<SlidingPanelProps> = 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 ( + <SlideAnimation + slideInSettings={slideUpSettings} + slideOutSettings={slideDownSettings} + animationState={animationState} + height="100%" + > + <Panel {...rest} /> + </SlideAnimation> + ); +}; |