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