git.iko.soy/bridge
on 67a8c2d help sign in
bridge/src/components/View.js
106 lines 2.6 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';
11const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
13// View is a top-level component that all Views must render to inherit styling
14function View({
15 className,
16 children,
17 inset = false,
18 full = false,
19 pop,
20 ...rest
21}) {
22 const { size } = useHistory();
23 const isMobile = useBreakpoints([true, false, false]);
24 const shouldInset = inset && !isMobile;
26 const insetPadding = cn({
27 pt7: shouldInset,
28 pt5: !shouldInset,
29 });
31 const goBack = useCallback(() => pop(), [pop]);
33 const goLogout = useCallback(() => pop(size - 1), [pop, size]);
35 const showBackButton = size > 1 && !!pop;
36 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
38 const Header = useCallback(
39 ({ logout }) => {
40 return showBackButton ? (
41 <Flex.Item
42 as={Flex}
43 className={cn(insetPadding, 'flex-row-r justify-between pb5')}>
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 [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 && !backIsLogout && (
79 <MiniBackButton
80 hpadding={!isMobile}
81 vpadding={isMobile}
82 isExit={backIsLogout}
83 onClick={goBack}
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;