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