1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import { getDisplayName } from '@mui/utils';
|
6 | import { getThemeProps } from '@mui/system';
|
7 | import useTheme from '../styles/useTheme';
|
8 | import useEnhancedEffect from '../utils/useEnhancedEffect';
|
9 | import useMediaQuery from '../useMediaQuery';
|
10 | import { jsx as _jsx } from "react/jsx-runtime";
|
11 | var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
|
12 |
|
13 | export var isWidthUp = function isWidthUp(breakpoint, width) {
|
14 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
15 |
|
16 | if (inclusive) {
|
17 | return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
|
18 | }
|
19 |
|
20 | return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
|
21 | };
|
22 |
|
23 | export var isWidthDown = function isWidthDown(breakpoint, width) {
|
24 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
25 |
|
26 | if (inclusive) {
|
27 | return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
|
28 | }
|
29 |
|
30 | return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
|
31 | };
|
32 |
|
33 | var withWidth = function withWidth() {
|
34 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
35 | return function (Component) {
|
36 | var _options$withTheme = options.withTheme,
|
37 | withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
|
38 | _options$noSSR = options.noSSR,
|
39 | noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
|
40 | initialWidthOption = options.initialWidth;
|
41 |
|
42 | function WithWidth(props) {
|
43 | var contextTheme = useTheme();
|
44 | var theme = props.theme || contextTheme;
|
45 |
|
46 | var _getThemeProps = getThemeProps({
|
47 | theme: theme,
|
48 | name: 'MuiWithWidth',
|
49 | props: props
|
50 | }),
|
51 | initialWidth = _getThemeProps.initialWidth,
|
52 | width = _getThemeProps.width,
|
53 | other = _objectWithoutProperties(_getThemeProps, ["initialWidth", "width"]);
|
54 |
|
55 | var _React$useState = React.useState(false),
|
56 | mountedState = _React$useState[0],
|
57 | setMountedState = _React$useState[1];
|
58 |
|
59 | useEnhancedEffect(function () {
|
60 | setMountedState(true);
|
61 | }, []);
|
62 | |
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | var keys = theme.breakpoints.keys.slice().reverse();
|
69 | var widthComputed = keys.reduce(function (output, key) {
|
70 |
|
71 | var matches = useMediaQuery(theme.breakpoints.up(key));
|
72 | return !output && matches ? key : output;
|
73 | }, null);
|
74 |
|
75 | var more = _extends({
|
76 | width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
|
77 | }, withThemeOption ? {
|
78 | theme: theme
|
79 | } : {}, other);
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | if (more.width === undefined) {
|
88 | return null;
|
89 | }
|
90 |
|
91 | return _jsx(Component, _extends({}, more));
|
92 | }
|
93 |
|
94 | process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
|
95 | |
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 | initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
105 |
|
106 | |
107 |
|
108 |
|
109 | theme: PropTypes.object,
|
110 |
|
111 | |
112 |
|
113 |
|
114 | width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
|
115 | } : void 0;
|
116 |
|
117 | if (process.env.NODE_ENV !== 'production') {
|
118 | WithWidth.displayName = "WithWidth(".concat(getDisplayName(Component), ")");
|
119 | }
|
120 |
|
121 | return WithWidth;
|
122 | };
|
123 | };
|
124 |
|
125 | export default withWidth; |
\ | No newline at end of file |