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