git.iko.soy/bridge
on 22aeb54 help sign in
bridge/src/components/View.js
101 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';
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 showBackButton = size > 1 && !!pop;
34 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
36 const Header = useCallback(
37 ({ logout }) => {
38 return showBackButton ? (
39 <Flex.Item
40 as={Flex}
41 className={cn(insetPadding, 'flex-row-r justify-between pb5')}>
42 <Flex.Item onClick={logout} as="a" className="f5 gray4 underline mr2">
43 Logout
44 </Flex.Item>
45 <Flex.Item as={NavHeader.Target} />
46 </Flex.Item>
47 ) : (
48 <Flex.Item className={insetPadding} as={NavHeader.Target} />
49 );
50 },
51 [insetPadding, showBackButton]
52 );
54 return (
55 <Flex
56 row={!isMobile}
57 col={isMobile}
58 justify="between"
59 className={cn(
60 'minh-100 ph5',
61 {
62 mw1: !full,
63 'mw2 ph9-md ph10-lg': full,
64 },
65 className
66 )}
67 {...rest}>
68 <Flex.Item
69 as={Flex}
70 col
71 style={{ width: '48px' }}
72 className={cn(insetPadding)}>
73 {showBackButton && !backIsLogout && (
74 <MiniBackButton
75 hpadding={!isMobile}
76 vpadding={isMobile}
77 isExit={backIsLogout}
78 onClick={goBack}
79 />
80 )}
81 </Flex.Item>
83 <Flex.Item flex={1} as={Flex} col justify="between">
84 <Flex.Item className="pb5 ">
85 <Header logout={goBack} />
86 {children}
87 </Flex.Item>
88 <Flex.Item as={Footer.Target} />
89 </Flex.Item>
91 <Flex.Item style={{ width: '48px' }} />
92 </Flex>
93 );
96// View.Full is sugar for <View full /> to help with readability
97View.Full = function FullView(props) {
98 return <View full {...props} />;
99};
101export default View;