git.iko.soy/bridge
on 13d9178 help sign in
bridge/src/components/View.js
79 lines 1.9 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';
10const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
12// View is a top-level component that all Views must render to inherit styling
13function View({
14 className,
15 children,
16 inset = false,
17 full = false,
18 pop,
19 ...rest
20}) {
21 const { size } = useHistory();
22 const isMobile = useBreakpoints([true, false, false]);
23 const shouldInset = inset && !isMobile;
25 const insetPadding = cn({
26 pt10: shouldInset,
27 pt5: !shouldInset,
28 });
30 const goBack = useCallback(() => pop(), [pop]);
32 const showBackButton = size > 1 && !!pop;
33 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
35 return (
36 <Flex
37 row={!isMobile}
38 col={isMobile}
39 justify="between"
40 className={cn(
41 'minh-100 ph5',
42 {
43 mw1: !full,
44 'mw2 ph9-md ph10-lg': full,
45 },
46 className
47 )}
48 {...rest}>
49 <Flex.Item
50 as={Flex}
51 col
52 style={{ width: '48px' }}
53 className={cn(insetPadding)}>
54 {showBackButton && (
55 <MiniBackButton
56 hpadding={!isMobile}
57 vpadding={isMobile}
58 isExit={backIsLogout}
59 onClick={goBack}
60 />
61 )}
62 </Flex.Item>
64 <Flex.Item flex={1} as={Flex} col justify="between">
65 <Flex.Item className={cn('pb5', insetPadding)}>{children}</Flex.Item>
66 <Flex.Item as={Footer.Target} />
67 </Flex.Item>
69 <Flex.Item style={{ width: '48px' }} />
70 </Flex>
71 );
74// View.Full is sugar for <View full /> to help with readability
75View.Full = function FullView(props) {
76 return <View full {...props} />;
77};
79export default View;