aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/sliding_panel.tsx
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-31 07:57:42 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-31 07:57:42 +0800
commit91f8487947d7941b508c34d1bfc1e72c0840c33d (patch)
treef3382eda9cae53b2b61e9f2c3cd4690ce6d7cc52 /packages/instant/src/components/sliding_panel.tsx
parent4456c3ee14f5cd778e0d16ab42a3e2e34d102f23 (diff)
downloaddexon-0x-contracts-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.gz
dexon-0x-contracts-91f8487947d7941b508c34d1bfc1e72c0840c33d.tar.zst
dexon-0x-contracts-91f8487947d7941b508c34d1bfc1e72c0840c33d.zip
feat: implement sliding panel
Diffstat (limited to 'packages/instant/src/components/sliding_panel.tsx')
-rw-r--r--packages/instant/src/components/sliding_panel.tsx54
1 files changed, 54 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..19034eb95
--- /dev/null
+++ b/packages/instant/src/components/sliding_panel.tsx
@@ -0,0 +1,54 @@
+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 { Button, Container, Text } from './ui';
+
+export interface PanelProps {
+ onClose?: () => void;
+}
+
+export const Panel: React.StatelessComponent<PanelProps> = ({ children, onClose }) => (
+ <Container backgroundColor={ColorOption.white} width="100%" height="100%" zIndex={zIndex.panel}>
+ <Button onClick={onClose}>
+ <Text fontColor={ColorOption.white}>Close </Text>
+ </Button>
+ {children}
+ </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 slideUp: PositionAnimationSettings = {
+ duration: '0.3s',
+ timingFunction: 'ease-in-out',
+ top: {
+ from: slideAmount,
+ to: '0px',
+ },
+ };
+ const slideDown: PositionAnimationSettings = {
+ duration: '0.3s',
+ timingFunction: 'ease-out',
+ top: {
+ from: '0px',
+ to: slideAmount,
+ },
+ };
+ return (
+ <SlideAnimation position="absolute" slideIn={slideUp} slideOut={slideDown} animationState={animationState}>
+ <Panel {...rest} />
+ </SlideAnimation>
+ );
+};