git.iko.soy/bridge
on ea494b6 help sign in
bridge/src/components/View.js
102 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 [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 as={Flex} col className={cn(insetPadding)}>
74 {showBackButton && !backIsLogout && (
75 <MiniBackButton
76 hpadding={!isMobile}
77 vpadding={isMobile}
78 isExit={backIsLogout}
79 onClick={goBack}
80 />
81 )}
82 </Flex.Item>
84 <Flex.Item flex={1} as={Flex} col justify="between">
85 <Flex.Item className="pb5 ">
86 <Header logout={goBack} />
87 {children}
88 </Flex.Item>
89 <Flex.Item as={Footer.Target} />
90 </Flex.Item>
92 <Flex.Item style={{ width: '48px' }} />
93 </Flex>
94 );
97// View.Full is sugar for <View full /> to help with readability
98View.Full = function FullView(props) {
99 return <View full {...props} />;
100};
102export default View;