git.iko.soy/bridge
on 6ff95bc help sign in
bridge/src/components/View.js
107 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 hideBack = false,
18 pop,
19 ...rest
20}) {
21 const { reset } = useHistory();
22 const isMobile = useBreakpoints([true, false, false]);
23 const shouldInset = inset && !isMobile;
25 const insetPadding = cn({
26 pt7: shouldInset,
27 pt5: !shouldInset,
28 });
30 const goBack = useCallback(() => pop(), [pop]);
32 const goLogout = reset;
34 const showBackButton = !!pop;
36 const Header = useCallback(
37 ({ logout }) => {
38 return showBackButton ? (
39 <Flex.Item
40 as={Flex}
41 className={cn(
42 insetPadding,
43 'flex-row-r justify-between pb5 align-center'
44 )}>
45 <Flex.Item
46 onClick={goLogout}
47 as="a"
48 className="f5 gray4 underline mr2 pointer">
49 Logout
50 </Flex.Item>
51 <Flex.Item as={NavHeader.Target} />
52 </Flex.Item>
53 ) : (
54 <Flex.Item className={insetPadding} as={NavHeader.Target} />
55 );
56 },
57 [goLogout, insetPadding, showBackButton]
58 );
60 return (
61 <Flex
62 row={!isMobile}
63 col={isMobile}
64 justify="between"
65 className={cn(
66 'minh-100 ph5',
67 {
68 mw1: !full,
69 'mw2 ph9-md ph10-lg': full,
70 },
71 className
72 )}
73 {...rest}>
74 <Flex.Item
75 as={Flex}
76 col
77 style={{ width: '48px' }}
78 className={cn(insetPadding)}>
79 {showBackButton && !hideBack && (
80 <MiniBackButton
81 hpadding={!isMobile}
82 vpadding={isMobile}
83 onClick={goBack}
84 className="mt1"
85 />
86 )}
87 </Flex.Item>
89 <Flex.Item flex={1} as={Flex} col justify="between">
90 <Flex.Item className="pb5 ">
91 <Header logout={goBack} />
92 {children}
93 </Flex.Item>
94 <Flex.Item as={Footer.Target} />
95 </Flex.Item>
97 <Flex.Item style={{ width: '48px' }} />
98 </Flex>
99 );
102// View.Full is sugar for <View full /> to help with readability
103View.Full = function FullView(props) {
104 return <View full {...props} />;
105};
107export default View;