1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import capitalize from '../utils/capitalize';
|
8 | import Paper from '../Paper';
|
9 | export const styles = theme => {
|
10 | const backgroundColorDefault = theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
|
11 | return {
|
12 |
|
13 | root: {
|
14 | display: 'flex',
|
15 | flexDirection: 'column',
|
16 | width: '100%',
|
17 | boxSizing: 'border-box',
|
18 |
|
19 | zIndex: theme.zIndex.appBar,
|
20 | flexShrink: 0
|
21 | },
|
22 |
|
23 |
|
24 | positionFixed: {
|
25 | position: 'fixed',
|
26 | top: 0,
|
27 | left: 'auto',
|
28 | right: 0,
|
29 | '@media print': {
|
30 |
|
31 | position: 'absolute'
|
32 | }
|
33 | },
|
34 |
|
35 |
|
36 | positionAbsolute: {
|
37 | position: 'absolute',
|
38 | top: 0,
|
39 | left: 'auto',
|
40 | right: 0
|
41 | },
|
42 |
|
43 |
|
44 | positionSticky: {
|
45 |
|
46 | position: 'sticky',
|
47 | top: 0,
|
48 | left: 'auto',
|
49 | right: 0
|
50 | },
|
51 |
|
52 |
|
53 | positionStatic: {
|
54 | position: 'static'
|
55 | },
|
56 |
|
57 |
|
58 | positionRelative: {
|
59 | position: 'relative'
|
60 | },
|
61 |
|
62 |
|
63 | colorDefault: {
|
64 | backgroundColor: backgroundColorDefault,
|
65 | color: theme.palette.getContrastText(backgroundColorDefault)
|
66 | },
|
67 |
|
68 |
|
69 | colorPrimary: {
|
70 | backgroundColor: theme.palette.primary.main,
|
71 | color: theme.palette.primary.contrastText
|
72 | },
|
73 |
|
74 |
|
75 | colorSecondary: {
|
76 | backgroundColor: theme.palette.secondary.main,
|
77 | color: theme.palette.secondary.contrastText
|
78 | },
|
79 |
|
80 |
|
81 | colorInherit: {
|
82 | color: 'inherit'
|
83 | },
|
84 |
|
85 |
|
86 | colorTransparent: {
|
87 | backgroundColor: 'transparent',
|
88 | color: 'inherit'
|
89 | }
|
90 | };
|
91 | };
|
92 | const AppBar = React.forwardRef(function AppBar(props, ref) {
|
93 | const {
|
94 | classes,
|
95 | className,
|
96 | color = 'primary',
|
97 | position = 'fixed'
|
98 | } = props,
|
99 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "position"]);
|
100 |
|
101 | return React.createElement(Paper, _extends({
|
102 | square: true,
|
103 | component: "header",
|
104 | elevation: 4,
|
105 | className: clsx(classes.root, classes[`position${capitalize(position)}`], classes[`color${capitalize(color)}`], className, position === 'fixed' && 'mui-fixed'),
|
106 | ref: ref
|
107 | }, other));
|
108 | });
|
109 | process.env.NODE_ENV !== "production" ? AppBar.propTypes = {
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 | |
116 |
|
117 |
|
118 | children: PropTypes.node,
|
119 |
|
120 | |
121 |
|
122 |
|
123 |
|
124 | classes: PropTypes.object,
|
125 |
|
126 | |
127 |
|
128 |
|
129 | className: PropTypes.string,
|
130 |
|
131 | |
132 |
|
133 |
|
134 | color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
|
135 |
|
136 | |
137 |
|
138 |
|
139 |
|
140 |
|
141 | position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky'])
|
142 | } : void 0;
|
143 | export default withStyles(styles, {
|
144 | name: 'MuiAppBar'
|
145 | })(AppBar); |
\ | No newline at end of file |