git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/components/View.tsx
132 lines 3.1 kB history raw
1import React, { useCallback } from 'react';
2import cn from 'classnames';
3import { Flex } from 'indigo-react';
5import { FooterTarget } from './Footer';
6import useBreakpoints from 'lib/useBreakpoints';
7import { MiniBackButton } from './MiniBackButton';
8import { useHistory } from 'store/history';
9import { NavHeaderTarget } from './NavHeader';
10import { noop } from 'lodash';
12interface ViewProps {
13 className?: string;
14 children: React.ReactNode;
15 inset?: boolean;
16 full?: boolean;
17 hideBack?: boolean;
18 pop?: VoidFunction;
19 header?: React.ReactNode;
20 centered?: boolean;
21 id?: string;
22 rest?: React.HTMLAttributes<HTMLDivElement>;
25// View is a top-level component that all Views must render to inherit styling
26function View({
27 className,
28 children,
29 inset = false,
30 full = false,
31 hideBack = false,
32 pop = noop,
33 header = React.Fragment,
34 id,
35 centered = false,
36 ...rest
37}: ViewProps) {
38 const { reset }: any = useHistory();
39 const isMobile: boolean = useBreakpoints([true, false, false]);
40 const shouldInset = inset && !isMobile;
42 const insetPadding = cn({
43 pt7: shouldInset,
44 pt5: !shouldInset,
45 });
47 const goBack = useCallback(() => pop(), [pop]);
49 const goLogout = reset;
51 const showBackButton = !!pop;
53 const Header = useCallback(
54 ({ logout }) => {
55 return showBackButton ? (
56 <Flex.Item
57 as={Flex}
58 className={cn(
59 insetPadding,
60 'flex-row-r justify-between pb5 align-center'
61 )}>
62 <Flex.Item
63 onClick={goLogout}
64 as="a"
65 className="f5 gray4 underline mr2 pointer">
66 Logout
67 </Flex.Item>
68 <Flex.Item as={NavHeaderTarget} />
69 </Flex.Item>
70 ) : (
71 <Flex.Item className={insetPadding} as={NavHeaderTarget} />
72 );
73 },
74 [goLogout, insetPadding, showBackButton]
75 );
77 return (
78 <Flex
79 row={!isMobile}
80 col={isMobile}
81 justify="between"
82 id={id}
83 className={cn(
84 'minh-100 ph4',
85 {
86 mw1: !full,
87 'mw2 ph9-md ph10-lg': full,
88 },
89 className
90 )}
91 {...rest}>
92 <Flex.Item
93 as={Flex}
94 col
95 style={{ width: '48px' }}
96 className={cn(insetPadding)}>
97 {showBackButton && !hideBack && (
98 <MiniBackButton
99 hpadding={!isMobile}
100 vpadding={isMobile}
101 onClick={goBack}
102 className="mt1"
103 />
104 )}
105 </Flex.Item>
107 <Flex.Item
108 flex={1}
109 as={Flex}
110 col
111 className={cn({
112 'justify-between': !centered,
113 'justify-center': centered,
114 })}>
115 <Flex.Item className="pb5 ">
116 {header || <Header logout={goBack} />}
117 {children}
118 </Flex.Item>
119 <Flex.Item as={FooterTarget} />
120 </Flex.Item>
122 <Flex.Item style={{ width: '48px' }} />
123 </Flex>
124 );
127// View.Full is sugar for <View full /> to help with readability
128View.Full = function FullView(props: ViewProps) {
129 return <View full {...props} />;
130};
132export default View;