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