git.iko.soy/bridge
on a941805 help sign in
bridge/src/components/View.js
106 lines 2.5 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';
9import NavHeader from './NavHeader';
11// View is a top-level component that all Views must render to inherit styling
12function View({
13 className,
14 children,
15 inset = false,
16 full = false,
17 pop,
18 ...rest
19}) {
20 const { reset } = useHistory();
21 const isMobile = useBreakpoints([true, false, false]);
22 const shouldInset = inset && !isMobile;
24 const insetPadding = cn({
25 pt7: shouldInset,
26 pt5: !shouldInset,
27 });
29 const goBack = useCallback(() => pop(), [pop]);
31 const goLogout = reset;
33 const showBackButton = !!pop;
35 const Header = useCallback(
36 ({ logout }) => {
37 return showBackButton ? (
38 <Flex.Item
39 as={Flex}
40 className={cn(
41 insetPadding,
42 'flex-row-r justify-between pb5 align-center'
43 )}>
44 <Flex.Item
45 onClick={goLogout}
46 as="a"
47 className="f5 gray4 underline mr2 pointer">
48 Logout
49 </Flex.Item>
50 <Flex.Item as={NavHeader.Target} />
51 </Flex.Item>
52 ) : (
53 <Flex.Item className={insetPadding} as={NavHeader.Target} />
54 );
55 },
56 [goLogout, insetPadding, showBackButton]
57 );
59 return (
60 <Flex
61 row={!isMobile}
62 col={isMobile}
63 justify="between"
64 className={cn(
65 'minh-100 ph5',
66 {
67 mw1: !full,
68 'mw2 ph9-md ph10-lg': full,
69 },
70 className
71 )}
72 {...rest}>
73 <Flex.Item
74 as={Flex}
75 col
76 style={{ width: '48px' }}
77 className={cn(insetPadding)}>
78 {showBackButton && (
79 <MiniBackButton
80 hpadding={!isMobile}
81 vpadding={isMobile}
82 onClick={goBack}
83 className="mt2"
84 />
85 )}
86 </Flex.Item>
88 <Flex.Item flex={1} as={Flex} col justify="between">
89 <Flex.Item className="pb5 ">
90 <Header logout={goBack} />
91 {children}
92 </Flex.Item>
93 <Flex.Item as={Footer.Target} />
94 </Flex.Item>
96 <Flex.Item style={{ width: '48px' }} />
97 </Flex>
98 );
101// View.Full is sugar for <View full /> to help with readability
102View.Full = function FullView(props) {
103 return <View full {...props} />;
104};
106export default View;