-
-
Notifications
You must be signed in to change notification settings - Fork 299
/
SnackbarContainer.tsx
106 lines (97 loc) · 3.24 KB
/
SnackbarContainer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, { memo } from 'react';
import clsx from 'clsx';
import createTransition from '../transitions/createTransition';
import { makeStyles, ComponentClasses } from '../utils/styles';
import { breakpoints, originKeyExtractor } from '../utils';
import { ContainerClassKey, SnackbarProviderProps } from '../types';
const indents = {
view: { default: 20, dense: 4 },
snackbar: { default: 6, dense: 2 },
};
const collapseWrapper = `.${ComponentClasses.CollapseWrapper}`;
const xsWidthMargin = 16;
const styles = makeStyles({
root: {
boxSizing: 'border-box',
display: 'flex',
maxHeight: '100%',
position: 'fixed',
zIndex: 1400,
height: 'auto',
width: 'auto',
transition: createTransition(['top', 'right', 'bottom', 'left', 'max-width'], {
duration: 300,
easing: 'ease',
}),
// container itself is invisible and should not block clicks, clicks should be passed to its children
// a pointerEvents: all is applied in the collapse component
pointerEvents: 'none',
[collapseWrapper]: {
padding: `${indents.snackbar.default}px 0px`,
transition: 'padding 300ms ease 0ms',
},
maxWidth: `calc(100% - ${indents.view.default * 2}px)`,
[breakpoints.downXs]: {
width: '100%',
maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,
},
},
rootDense: {
[collapseWrapper]: {
padding: `${indents.snackbar.dense}px 0px`,
},
},
top: {
top: `${indents.view.default - indents.snackbar.default}px`,
flexDirection: 'column',
},
bottom: {
bottom: `${indents.view.default - indents.snackbar.default}px`,
flexDirection: 'column-reverse',
},
left: {
left: `${indents.view.default}px`,
[breakpoints.upSm]: {
alignItems: 'flex-start',
},
[breakpoints.downXs]: {
left: `${xsWidthMargin}px`,
},
},
right: {
right: `${indents.view.default}px`,
[breakpoints.upSm]: {
alignItems: 'flex-end',
},
[breakpoints.downXs]: {
right: `${xsWidthMargin}px`,
},
},
center: {
left: '50%',
transform: 'translateX(-50%)',
[breakpoints.upSm]: {
alignItems: 'center',
},
},
});
interface SnackbarContainerProps {
children: React.ReactNode;
dense: SnackbarProviderProps['dense'];
anchorOrigin: NonNullable<SnackbarProviderProps['anchorOrigin']>;
classes: SnackbarProviderProps['classes'];
}
const SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {
const { classes = {}, anchorOrigin, dense, children } = props;
const combinedClassname = clsx(
ComponentClasses.SnackbarContainer,
styles[anchorOrigin.vertical],
styles[anchorOrigin.horizontal],
{ [styles.rootDense]: dense },
styles.root, // root should come after others to override maxWidth
classes.containerRoot,
classes[`containerAnchorOrigin${originKeyExtractor(anchorOrigin)}` as ContainerClassKey]
);
return <div className={combinedClassname}>{children}</div>;
};
export default memo(SnackbarContainer);