1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = exports.isWidthDown = exports.isWidthUp = void 0;
|
9 |
|
10 | var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
15 |
|
16 | var _react = _interopRequireDefault(require("react"));
|
17 |
|
18 | var _propTypes = _interopRequireDefault(require("prop-types"));
|
19 |
|
20 | var _utils = require("@material-ui/utils");
|
21 |
|
22 | var _styles = require("@material-ui/styles");
|
23 |
|
24 | var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
|
25 |
|
26 | var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
|
27 |
|
28 | var _createBreakpoints = require("../styles/createBreakpoints");
|
29 |
|
30 | var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
|
31 |
|
32 |
|
33 | var isWidthUp = function isWidthUp(breakpoint, width) {
|
34 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
35 |
|
36 | if (inclusive) {
|
37 | return _createBreakpoints.keys.indexOf(breakpoint) <= _createBreakpoints.keys.indexOf(width);
|
38 | }
|
39 |
|
40 | return _createBreakpoints.keys.indexOf(breakpoint) < _createBreakpoints.keys.indexOf(width);
|
41 | };
|
42 |
|
43 |
|
44 | exports.isWidthUp = isWidthUp;
|
45 |
|
46 | var isWidthDown = function isWidthDown(breakpoint, width) {
|
47 | var inclusive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
48 |
|
49 | if (inclusive) {
|
50 | return _createBreakpoints.keys.indexOf(width) <= _createBreakpoints.keys.indexOf(breakpoint);
|
51 | }
|
52 |
|
53 | return _createBreakpoints.keys.indexOf(width) < _createBreakpoints.keys.indexOf(breakpoint);
|
54 | };
|
55 |
|
56 | exports.isWidthDown = isWidthDown;
|
57 | var useEnhancedEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.useLayoutEffect;
|
58 |
|
59 | var withWidth = function withWidth() {
|
60 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
61 | return function (Component) {
|
62 | var _options$withTheme = options.withTheme,
|
63 | withThemeOption = _options$withTheme === void 0 ? false : _options$withTheme,
|
64 | _options$noSSR = options.noSSR,
|
65 | noSSR = _options$noSSR === void 0 ? false : _options$noSSR,
|
66 | initialWidthOption = options.initialWidth;
|
67 |
|
68 | function WithWidth(props) {
|
69 | var contextTheme = (0, _useTheme.default)();
|
70 | var theme = props.theme || contextTheme;
|
71 |
|
72 | var _getThemeProps = (0, _styles.getThemeProps)({
|
73 | theme: theme,
|
74 | name: 'MuiWithWidth',
|
75 | props: (0, _extends2.default)({}, props)
|
76 | }),
|
77 | initialWidth = _getThemeProps.initialWidth,
|
78 | width = _getThemeProps.width,
|
79 | other = (0, _objectWithoutProperties2.default)(_getThemeProps, ["initialWidth", "width"]);
|
80 |
|
81 | var _React$useState = _react.default.useState(false),
|
82 | mountedState = _React$useState[0],
|
83 | setMountedState = _React$useState[1];
|
84 |
|
85 | useEnhancedEffect(function () {
|
86 | setMountedState(true);
|
87 | }, []);
|
88 | |
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 | var keys = (0, _toConsumableArray2.default)(theme.breakpoints.keys).reverse();
|
95 | var widthComputed = keys.reduce(function (output, key) {
|
96 |
|
97 | var matches = (0, _useMediaQuery.default)(theme.breakpoints.up(key));
|
98 | return !output && matches ? key : output;
|
99 | }, null);
|
100 | var more = (0, _extends2.default)({
|
101 | width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
|
102 | }, withThemeOption ? {
|
103 | theme: theme
|
104 | } : {}, {}, other);
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 | if (more.width === undefined) {
|
112 | return null;
|
113 | }
|
114 |
|
115 | return _react.default.createElement(Component, more);
|
116 | }
|
117 |
|
118 | process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
|
119 | |
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 | initialWidth: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
129 |
|
130 | |
131 |
|
132 |
|
133 | theme: _propTypes.default.object,
|
134 |
|
135 | |
136 |
|
137 |
|
138 | width: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
|
139 | } : void 0;
|
140 |
|
141 | if (process.env.NODE_ENV !== 'production') {
|
142 | WithWidth.displayName = "WithWidth(".concat((0, _utils.getDisplayName)(Component), ")");
|
143 | }
|
144 |
|
145 | (0, _hoistNonReactStatics.default)(WithWidth, Component);
|
146 | return WithWidth;
|
147 | };
|
148 | };
|
149 |
|
150 | var _default = withWidth;
|
151 | exports.default = _default; |
\ | No newline at end of file |