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