git.iko.soy/bridge
on e586a74 help sign in
bridge/src/components/View.tsx
133 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,
34 id,
35 centered = false,
36 ...rest
37}: ViewProps) {
38 const { reset }: any = useHistory();
39 // @ts-ignore
40 const isMobile: boolean = useBreakpoints([true, false, false]);
41 const shouldInset = inset && !isMobile;
43 const insetPadding = cn({
44 pt7: shouldInset,
45 pt5: !shouldInset,
46 });
48 const goBack = useCallback(() => pop(), [pop]);
50 const goLogout = reset;
52 const showBackButton = !!pop;
54 const Header = useCallback(
55 ({ logout }) => {
56 return showBackButton ? (
57 <Flex.Item
58 as={Flex}
59 className={cn(
60 insetPadding,
61 'flex-row-r justify-between pb5 align-center'
62 )}>
63 <Flex.Item
64 onClick={goLogout}
65 as="a"
66 className="f5 gray4 underline mr2 pointer">
67 Logout
68 </Flex.Item>
69 <Flex.Item as={NavHeaderTarget} />
70 </Flex.Item>
71 ) : (
72 <Flex.Item className={insetPadding} as={NavHeaderTarget} />
73 );
74 },
75 [goLogout, insetPadding, showBackButton]
76 );
78 return (
79 <Flex
80 row={!isMobile}
81 col={isMobile}
82 justify="between"
83 id={id}
84 className={cn(
85 'minh-100 ph4',
86 {
87 mw1: !full,
88 'mw2 ph9-md ph10-lg': full,
89 },
90 className
91 )}
92 {...rest}>
93 <Flex.Item
94 as={Flex}
95 col
96 style={{ width: '48px' }}
97 className={cn(insetPadding)}>
98 {showBackButton && !hideBack && (
99 <MiniBackButton
100 hpadding={!isMobile}
101 vpadding={isMobile}
102 onClick={goBack}
103 className="mt1"
104 />
105 )}
106 </Flex.Item>
108 <Flex.Item
109 flex={1}
110 as={Flex}
111 col
112 className={cn({
113 'justify-between': !centered,
114 'justify-center': centered,
115 })}>
116 <Flex.Item className="pb5 ">
117 {header || <Header logout={goBack} />}
118 {children}
119 </Flex.Item>
120 <Flex.Item as={FooterTarget} />
121 </Flex.Item>
123 <Flex.Item style={{ width: '48px' }} />
124 </Flex>
125 );
128// View.Full is sugar for <View full /> to help with readability
129View.Full = function FullView(props: ViewProps) {
130 return <View full {...props} />;
131};
133export default View;