git.iko.soy/bridge
on be7b6c2 help sign in
bridge/src/components/View.js
77 lines 1.8 kB history raw
1import React, { useCallback } from 'react';
2import cn from 'classnames';
3import { Flex } from 'indigo-react';
5import Footer from './Footer';
6import useBreakpoints from 'lib/useBreakpoints';
7import MiniBackButton from './MiniBackButton';
8import { useHistory } from 'store/history';
10// View is a top-level component that all Views must render to inherit styling
11function View({
12 className,
13 children,
14 inset = false,
15 full = false,
16 pop,
17 ...rest
18}) {
19 const { size } = useHistory();
20 const isMobile = useBreakpoints([true, false, false]);
21 const shouldInset = inset && !isMobile;
23 const insetPadding = cn({
24 pt10: shouldInset,
25 pt5: !shouldInset,
26 });
28 const goBack = useCallback(() => pop(), [pop]);
30 const showBackButton = size > 1 && !!pop;
31 const backIsLogout = size === 2;
33 return (
34 <Flex
35 row={!isMobile}
36 col={isMobile}
37 justify="between"
38 className={cn(
39 'minh-100 ph5',
40 {
41 mw1: !full,
42 'mw2 ph9-md ph10-lg': full,
43 },
44 className
45 )}
46 {...rest}>
47 <Flex.Item
48 as={Flex}
49 col
50 style={{ width: '48px' }}
51 className={cn(insetPadding)}>
52 {showBackButton && (
53 <MiniBackButton
54 hpadding={!isMobile}
55 vpadding={isMobile}
56 isExit={backIsLogout}
57 onClick={goBack}
58 />
59 )}
60 </Flex.Item>
62 <Flex.Item flex={1} as={Flex} col justify="between">
63 <Flex.Item className={cn('pb5', insetPadding)}>{children}</Flex.Item>
64 <Flex.Item as={Footer.Target} />
65 </Flex.Item>
67 <Flex.Item style={{ width: '48px' }} />
68 </Flex>
69 );
72// View.Full is sugar for <View full /> to help with readability
73View.Full = function FullView(props) {
74 return <View full {...props} />;
75};
77export default View;