@mui/x-data-grid 6.2.0 → 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +49 -1
- package/components/GridHeader.d.ts +2 -2
- package/components/GridHeader.js +4 -6
- package/components/base/GridBody.d.ts +0 -1
- package/components/base/GridBody.js +32 -15
- package/components/columnSelection/GridCellCheckboxRenderer.d.ts +1 -1
- package/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
- package/components/columnSelection/GridHeaderCheckbox.d.ts +1 -1
- package/components/containers/GridMainContainer.d.ts +3 -1
- package/components/containers/GridMainContainer.js +3 -2
- package/components/containers/GridRoot.js +0 -5
- package/components/index.d.ts +0 -1
- package/components/index.js +0 -1
- package/components/panel/GridColumnsPanel.js +3 -2
- package/components/panel/GridPanel.d.ts +2 -2
- package/components/panel/GridPanel.js +2 -1
- package/components/panel/filterPanel/GridFilterPanel.js +5 -2
- package/hooks/features/dimensions/gridDimensionsApi.d.ts +4 -0
- package/hooks/features/dimensions/useGridDimensions.js +49 -10
- package/hooks/features/export/useGridPrintExport.js +3 -1
- package/hooks/features/virtualization/useGridVirtualScroller.d.ts +1 -0
- package/hooks/features/virtualization/useGridVirtualScroller.js +11 -5
- package/index.js +1 -1
- package/joy/index.d.ts +2 -0
- package/joy/index.js +2 -0
- package/joy/joySlots.d.ts +4 -0
- package/joy/joySlots.js +71 -0
- package/joy/package.json +6 -0
- package/legacy/components/GridHeader.js +4 -6
- package/legacy/components/base/GridBody.js +33 -16
- package/legacy/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
- package/legacy/components/containers/GridMainContainer.js +3 -2
- package/legacy/components/containers/GridRoot.js +0 -5
- package/legacy/components/index.js +0 -1
- package/legacy/components/panel/GridColumnsPanel.js +3 -2
- package/legacy/components/panel/GridPanel.js +2 -1
- package/legacy/components/panel/filterPanel/GridFilterPanel.js +5 -2
- package/legacy/hooks/features/dimensions/useGridDimensions.js +55 -12
- package/legacy/hooks/features/export/useGridPrintExport.js +3 -1
- package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +12 -6
- package/legacy/index.js +1 -1
- package/legacy/joy/index.js +2 -0
- package/legacy/joy/joySlots.js +73 -0
- package/material/index.d.ts +1 -1
- package/models/gridSlotsComponent.d.ts +2 -2
- package/modern/components/GridHeader.js +4 -6
- package/modern/components/base/GridBody.js +32 -15
- package/modern/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
- package/modern/components/containers/GridMainContainer.js +3 -2
- package/modern/components/containers/GridRoot.js +0 -5
- package/modern/components/index.js +0 -1
- package/modern/components/panel/GridColumnsPanel.js +3 -2
- package/modern/components/panel/GridPanel.js +2 -1
- package/modern/components/panel/filterPanel/GridFilterPanel.js +5 -2
- package/modern/hooks/features/dimensions/useGridDimensions.js +48 -10
- package/modern/hooks/features/export/useGridPrintExport.js +3 -1
- package/modern/hooks/features/virtualization/useGridVirtualScroller.js +11 -5
- package/modern/index.js +1 -1
- package/modern/joy/index.js +2 -0
- package/modern/joy/joySlots.js +71 -0
- package/node/components/GridHeader.js +5 -8
- package/node/components/base/GridBody.js +32 -15
- package/node/components/columnSelection/GridCellCheckboxRenderer.js +1 -1
- package/node/components/containers/GridMainContainer.js +5 -3
- package/node/components/containers/GridRoot.js +0 -5
- package/node/components/index.js +0 -11
- package/node/components/panel/GridColumnsPanel.js +3 -2
- package/node/components/panel/GridPanel.js +2 -1
- package/node/components/panel/filterPanel/GridFilterPanel.js +5 -2
- package/node/hooks/features/dimensions/useGridDimensions.js +47 -9
- package/node/hooks/features/export/useGridPrintExport.js +3 -1
- package/node/hooks/features/virtualization/useGridVirtualScroller.js +11 -5
- package/node/index.js +1 -1
- package/node/joy/index.js +13 -0
- package/node/joy/joySlots.js +79 -0
- package/package.json +1 -1
- package/components/GridAutoSizer.d.ts +0 -44
- package/components/GridAutoSizer.js +0 -126
- package/legacy/components/GridAutoSizer.js +0 -132
- package/modern/components/GridAutoSizer.js +0 -125
- package/node/components/GridAutoSizer.js +0 -132
|
@@ -130,7 +130,9 @@ const useGridPrintExport = (apiRef, props) => {
|
|
|
130
130
|
printDoc.body.classList.add(...normalizeOptions.bodyClassName.split(' '));
|
|
131
131
|
}
|
|
132
132
|
if (normalizeOptions.copyStyles) {
|
|
133
|
-
const
|
|
133
|
+
const rootCandidate = gridRootElement.getRootNode();
|
|
134
|
+
const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc.current;
|
|
135
|
+
const headStyleElements = root.querySelectorAll("style, link[rel='stylesheet']");
|
|
134
136
|
for (let i = 0; i < headStyleElements.length; i += 1) {
|
|
135
137
|
const node = headStyleElements[i];
|
|
136
138
|
if (node.tagName === 'STYLE') {
|
|
@@ -185,11 +185,13 @@ const useGridVirtualScroller = props => {
|
|
|
185
185
|
height: rootRef.current.clientHeight
|
|
186
186
|
});
|
|
187
187
|
}, [rowsMeta.currentPageTotalHeight]);
|
|
188
|
-
const handleResize = React.useCallback(
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
188
|
+
const handleResize = React.useCallback(() => {
|
|
189
|
+
if (rootRef.current) {
|
|
190
|
+
setContainerDimensions({
|
|
191
|
+
width: rootRef.current.clientWidth,
|
|
192
|
+
height: rootRef.current.clientHeight
|
|
193
|
+
});
|
|
194
|
+
}
|
|
193
195
|
}, []);
|
|
194
196
|
(0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'debouncedResize', handleResize);
|
|
195
197
|
const updateRenderZonePosition = React.useCallback(nextRenderContext => {
|
|
@@ -315,6 +317,7 @@ const useGridVirtualScroller = props => {
|
|
|
315
317
|
renderContext
|
|
316
318
|
}) => {
|
|
317
319
|
const {
|
|
320
|
+
onRowRender,
|
|
318
321
|
renderContext: nextRenderContext,
|
|
319
322
|
minFirstColumn = renderZoneMinColumnIndex,
|
|
320
323
|
maxLastColumn = renderZoneMaxColumnIndex,
|
|
@@ -398,6 +401,9 @@ const useGridVirtualScroller = props => {
|
|
|
398
401
|
} else {
|
|
399
402
|
isSelected = apiRef.current.isRowSelectable(id);
|
|
400
403
|
}
|
|
404
|
+
if (onRowRender) {
|
|
405
|
+
onRowRender(id);
|
|
406
|
+
}
|
|
401
407
|
const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
|
|
402
408
|
let tabbableCell = null;
|
|
403
409
|
if (cellTabIndex !== null && cellTabIndex.id === id) {
|
package/node/index.js
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "unstable_joySlots", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _joySlots.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _joySlots = _interopRequireDefault(require("./joySlots"));
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _Checkbox = _interopRequireDefault(require("@mui/joy/Checkbox"));
|
|
12
|
+
var _Input = _interopRequireDefault(require("@mui/joy/Input"));
|
|
13
|
+
var _FormControl = _interopRequireDefault(require("@mui/joy/FormControl"));
|
|
14
|
+
var _FormLabel = _interopRequireDefault(require("@mui/joy/FormLabel"));
|
|
15
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
+
const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"];
|
|
17
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
20
|
+
let {
|
|
21
|
+
inputProps,
|
|
22
|
+
onChange,
|
|
23
|
+
checked,
|
|
24
|
+
inputRef
|
|
25
|
+
} = _ref,
|
|
26
|
+
props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
|
|
27
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, props, {
|
|
28
|
+
slotProps: {
|
|
29
|
+
input: (0, _extends2.default)({}, inputProps, {
|
|
30
|
+
ref: inputRef
|
|
31
|
+
})
|
|
32
|
+
},
|
|
33
|
+
ref: ref,
|
|
34
|
+
checked: checked,
|
|
35
|
+
onChange: onChange
|
|
36
|
+
}));
|
|
37
|
+
});
|
|
38
|
+
const TextField = /*#__PURE__*/React.forwardRef(({
|
|
39
|
+
onChange,
|
|
40
|
+
label,
|
|
41
|
+
placeholder,
|
|
42
|
+
value,
|
|
43
|
+
inputRef,
|
|
44
|
+
type
|
|
45
|
+
}, ref) => {
|
|
46
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
|
|
47
|
+
ref: ref,
|
|
48
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
|
|
49
|
+
sx: {
|
|
50
|
+
fontSize: 12
|
|
51
|
+
},
|
|
52
|
+
children: label
|
|
53
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
|
|
54
|
+
type: type,
|
|
55
|
+
value: value,
|
|
56
|
+
onChange: onChange,
|
|
57
|
+
placeholder: placeholder,
|
|
58
|
+
size: "sm",
|
|
59
|
+
slotProps: {
|
|
60
|
+
input: {
|
|
61
|
+
ref: inputRef
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
})]
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
const joySlots = {
|
|
68
|
+
baseCheckbox: Checkbox,
|
|
69
|
+
baseTextField: TextField
|
|
70
|
+
// BaseFormControl: MUIFormControl,
|
|
71
|
+
// BaseSelect: MUISelect,
|
|
72
|
+
// BaseSwitch: MUISwitch,
|
|
73
|
+
// BaseButton: MUIButton,
|
|
74
|
+
// BaseIconButton: MUIIconButton,
|
|
75
|
+
// BaseTooltip: MUITooltip,
|
|
76
|
+
// BasePopper: MUIPopper,
|
|
77
|
+
};
|
|
78
|
+
var _default = joySlots;
|
|
79
|
+
exports.default = _default;
|
package/package.json
CHANGED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export interface AutoSizerSize {
|
|
3
|
-
height: number;
|
|
4
|
-
width: number;
|
|
5
|
-
}
|
|
6
|
-
export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onResize'> {
|
|
7
|
-
/**
|
|
8
|
-
* Function responsible for rendering children.
|
|
9
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
10
|
-
* @returns {React.ReactNode} The children to render.
|
|
11
|
-
*/
|
|
12
|
-
children: React.ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Default height to use for initial render; useful for SSR.
|
|
15
|
-
* @default null
|
|
16
|
-
*/
|
|
17
|
-
defaultHeight?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Default width to use for initial render; useful for SSR.
|
|
20
|
-
* @default null
|
|
21
|
-
*/
|
|
22
|
-
defaultWidth?: number;
|
|
23
|
-
/**
|
|
24
|
-
* If `true`, disable dynamic :height property.
|
|
25
|
-
* @default false
|
|
26
|
-
*/
|
|
27
|
-
disableHeight?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* If `true`, disable dynamic :width property.
|
|
30
|
-
* @default false
|
|
31
|
-
*/
|
|
32
|
-
disableWidth?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Nonce of the inlined stylesheet for Content Security Policy.
|
|
35
|
-
*/
|
|
36
|
-
nonce?: string;
|
|
37
|
-
/**
|
|
38
|
-
* Callback to be invoked on-resize.
|
|
39
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
40
|
-
*/
|
|
41
|
-
onResize?: (size: AutoSizerSize) => void;
|
|
42
|
-
}
|
|
43
|
-
declare const GridAutoSizer: React.ForwardRefExoticComponent<AutoSizerProps & React.RefAttributes<HTMLDivElement>>;
|
|
44
|
-
export { GridAutoSizer };
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
import { unstable_useForkRef as useForkRef, unstable_ownerWindow as ownerWindow, unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
|
|
7
|
-
import createDetectElementResize from '../lib/createDetectElementResize';
|
|
8
|
-
// TODO replace with https://caniuse.com/resizeobserver.
|
|
9
|
-
|
|
10
|
-
// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
|
|
11
|
-
// for the sources.
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
children,
|
|
16
|
-
defaultHeight = null,
|
|
17
|
-
defaultWidth = null,
|
|
18
|
-
disableHeight = false,
|
|
19
|
-
disableWidth = false,
|
|
20
|
-
nonce,
|
|
21
|
-
onResize,
|
|
22
|
-
style
|
|
23
|
-
} = props,
|
|
24
|
-
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
25
|
-
const [state, setState] = React.useState({
|
|
26
|
-
height: defaultHeight,
|
|
27
|
-
width: defaultWidth
|
|
28
|
-
});
|
|
29
|
-
const rootRef = React.useRef(null);
|
|
30
|
-
const parentElement = React.useRef(null);
|
|
31
|
-
const handleResize = useEventCallback(() => {
|
|
32
|
-
// Guard against AutoSizer component being removed from the DOM immediately after being added.
|
|
33
|
-
// This can result in invalid style values which can result in NaN values if we don't handle them.
|
|
34
|
-
// See issue #150 for more context.
|
|
35
|
-
if (parentElement.current) {
|
|
36
|
-
const height = parentElement.current.offsetHeight || 0;
|
|
37
|
-
const width = parentElement.current.offsetWidth || 0;
|
|
38
|
-
const win = ownerWindow(parentElement.current);
|
|
39
|
-
const computedStyle = win.getComputedStyle(parentElement.current);
|
|
40
|
-
const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
|
|
41
|
-
const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
|
|
42
|
-
const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
|
|
43
|
-
const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
|
|
44
|
-
const newHeight = height - paddingTop - paddingBottom;
|
|
45
|
-
const newWidth = width - paddingLeft - paddingRight;
|
|
46
|
-
if (!disableHeight && state.height !== newHeight || !disableWidth && state.width !== newWidth) {
|
|
47
|
-
setState({
|
|
48
|
-
height: newHeight,
|
|
49
|
-
width: newWidth
|
|
50
|
-
});
|
|
51
|
-
if (onResize) {
|
|
52
|
-
onResize({
|
|
53
|
-
height: newHeight,
|
|
54
|
-
width: newWidth
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
useEnhancedEffect(() => {
|
|
61
|
-
var _parentElement$curren;
|
|
62
|
-
parentElement.current = rootRef.current.parentElement;
|
|
63
|
-
if (!parentElement) {
|
|
64
|
-
return undefined;
|
|
65
|
-
}
|
|
66
|
-
const win = ownerWindow((_parentElement$curren = parentElement.current) != null ? _parentElement$curren : undefined);
|
|
67
|
-
const detectElementResize = createDetectElementResize(nonce, win);
|
|
68
|
-
detectElementResize.addResizeListener(parentElement.current, handleResize);
|
|
69
|
-
handleResize();
|
|
70
|
-
return () => {
|
|
71
|
-
detectElementResize.removeResizeListener(parentElement.current, handleResize);
|
|
72
|
-
};
|
|
73
|
-
}, [nonce, handleResize]);
|
|
74
|
-
const handleRef = useForkRef(rootRef, ref);
|
|
75
|
-
return /*#__PURE__*/_jsx("div", _extends({
|
|
76
|
-
ref: handleRef,
|
|
77
|
-
style: _extends({
|
|
78
|
-
flex: disableHeight ? 0 : '1 1 0px',
|
|
79
|
-
overflow: disableHeight ? 'visible' : 'auto'
|
|
80
|
-
}, style)
|
|
81
|
-
}, other, {
|
|
82
|
-
children: state.height === null && state.width === null ? null : children
|
|
83
|
-
}));
|
|
84
|
-
});
|
|
85
|
-
process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
|
|
86
|
-
// ----------------------------- Warning --------------------------------
|
|
87
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
88
|
-
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
89
|
-
// ----------------------------------------------------------------------
|
|
90
|
-
/**
|
|
91
|
-
* Function responsible for rendering children.
|
|
92
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
93
|
-
* @returns {React.ReactNode} The children to render.
|
|
94
|
-
*/
|
|
95
|
-
children: PropTypes.node,
|
|
96
|
-
/**
|
|
97
|
-
* Default height to use for initial render; useful for SSR.
|
|
98
|
-
* @default null
|
|
99
|
-
*/
|
|
100
|
-
defaultHeight: PropTypes.number,
|
|
101
|
-
/**
|
|
102
|
-
* Default width to use for initial render; useful for SSR.
|
|
103
|
-
* @default null
|
|
104
|
-
*/
|
|
105
|
-
defaultWidth: PropTypes.number,
|
|
106
|
-
/**
|
|
107
|
-
* If `true`, disable dynamic :height property.
|
|
108
|
-
* @default false
|
|
109
|
-
*/
|
|
110
|
-
disableHeight: PropTypes.bool,
|
|
111
|
-
/**
|
|
112
|
-
* If `true`, disable dynamic :width property.
|
|
113
|
-
* @default false
|
|
114
|
-
*/
|
|
115
|
-
disableWidth: PropTypes.bool,
|
|
116
|
-
/**
|
|
117
|
-
* Nonce of the inlined stylesheet for Content Security Policy.
|
|
118
|
-
*/
|
|
119
|
-
nonce: PropTypes.string,
|
|
120
|
-
/**
|
|
121
|
-
* Callback to be invoked on-resize.
|
|
122
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
123
|
-
*/
|
|
124
|
-
onResize: PropTypes.func
|
|
125
|
-
} : void 0;
|
|
126
|
-
export { GridAutoSizer };
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
|
|
5
|
-
import * as React from 'react';
|
|
6
|
-
import PropTypes from 'prop-types';
|
|
7
|
-
import { unstable_useForkRef as useForkRef, unstable_ownerWindow as ownerWindow, unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
|
|
8
|
-
import createDetectElementResize from '../lib/createDetectElementResize';
|
|
9
|
-
// TODO replace with https://caniuse.com/resizeobserver.
|
|
10
|
-
|
|
11
|
-
// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
|
|
12
|
-
// for the sources.
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
var GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
|
|
15
|
-
var children = props.children,
|
|
16
|
-
_props$defaultHeight = props.defaultHeight,
|
|
17
|
-
defaultHeight = _props$defaultHeight === void 0 ? null : _props$defaultHeight,
|
|
18
|
-
_props$defaultWidth = props.defaultWidth,
|
|
19
|
-
defaultWidth = _props$defaultWidth === void 0 ? null : _props$defaultWidth,
|
|
20
|
-
_props$disableHeight = props.disableHeight,
|
|
21
|
-
disableHeight = _props$disableHeight === void 0 ? false : _props$disableHeight,
|
|
22
|
-
_props$disableWidth = props.disableWidth,
|
|
23
|
-
disableWidth = _props$disableWidth === void 0 ? false : _props$disableWidth,
|
|
24
|
-
nonce = props.nonce,
|
|
25
|
-
onResize = props.onResize,
|
|
26
|
-
style = props.style,
|
|
27
|
-
other = _objectWithoutProperties(props, _excluded);
|
|
28
|
-
var _React$useState = React.useState({
|
|
29
|
-
height: defaultHeight,
|
|
30
|
-
width: defaultWidth
|
|
31
|
-
}),
|
|
32
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
33
|
-
state = _React$useState2[0],
|
|
34
|
-
setState = _React$useState2[1];
|
|
35
|
-
var rootRef = React.useRef(null);
|
|
36
|
-
var parentElement = React.useRef(null);
|
|
37
|
-
var handleResize = useEventCallback(function () {
|
|
38
|
-
// Guard against AutoSizer component being removed from the DOM immediately after being added.
|
|
39
|
-
// This can result in invalid style values which can result in NaN values if we don't handle them.
|
|
40
|
-
// See issue #150 for more context.
|
|
41
|
-
if (parentElement.current) {
|
|
42
|
-
var height = parentElement.current.offsetHeight || 0;
|
|
43
|
-
var width = parentElement.current.offsetWidth || 0;
|
|
44
|
-
var win = ownerWindow(parentElement.current);
|
|
45
|
-
var computedStyle = win.getComputedStyle(parentElement.current);
|
|
46
|
-
var paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
|
|
47
|
-
var paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
|
|
48
|
-
var paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
|
|
49
|
-
var paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
|
|
50
|
-
var newHeight = height - paddingTop - paddingBottom;
|
|
51
|
-
var newWidth = width - paddingLeft - paddingRight;
|
|
52
|
-
if (!disableHeight && state.height !== newHeight || !disableWidth && state.width !== newWidth) {
|
|
53
|
-
setState({
|
|
54
|
-
height: newHeight,
|
|
55
|
-
width: newWidth
|
|
56
|
-
});
|
|
57
|
-
if (onResize) {
|
|
58
|
-
onResize({
|
|
59
|
-
height: newHeight,
|
|
60
|
-
width: newWidth
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
useEnhancedEffect(function () {
|
|
67
|
-
var _parentElement$curren;
|
|
68
|
-
parentElement.current = rootRef.current.parentElement;
|
|
69
|
-
if (!parentElement) {
|
|
70
|
-
return undefined;
|
|
71
|
-
}
|
|
72
|
-
var win = ownerWindow((_parentElement$curren = parentElement.current) != null ? _parentElement$curren : undefined);
|
|
73
|
-
var detectElementResize = createDetectElementResize(nonce, win);
|
|
74
|
-
detectElementResize.addResizeListener(parentElement.current, handleResize);
|
|
75
|
-
handleResize();
|
|
76
|
-
return function () {
|
|
77
|
-
detectElementResize.removeResizeListener(parentElement.current, handleResize);
|
|
78
|
-
};
|
|
79
|
-
}, [nonce, handleResize]);
|
|
80
|
-
var handleRef = useForkRef(rootRef, ref);
|
|
81
|
-
return /*#__PURE__*/_jsx("div", _extends({
|
|
82
|
-
ref: handleRef,
|
|
83
|
-
style: _extends({
|
|
84
|
-
flex: disableHeight ? 0 : '1 1 0px',
|
|
85
|
-
overflow: disableHeight ? 'visible' : 'auto'
|
|
86
|
-
}, style)
|
|
87
|
-
}, other, {
|
|
88
|
-
children: state.height === null && state.width === null ? null : children
|
|
89
|
-
}));
|
|
90
|
-
});
|
|
91
|
-
process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
|
|
92
|
-
// ----------------------------- Warning --------------------------------
|
|
93
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
94
|
-
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
95
|
-
// ----------------------------------------------------------------------
|
|
96
|
-
/**
|
|
97
|
-
* Function responsible for rendering children.
|
|
98
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
99
|
-
* @returns {React.ReactNode} The children to render.
|
|
100
|
-
*/
|
|
101
|
-
children: PropTypes.node,
|
|
102
|
-
/**
|
|
103
|
-
* Default height to use for initial render; useful for SSR.
|
|
104
|
-
* @default null
|
|
105
|
-
*/
|
|
106
|
-
defaultHeight: PropTypes.number,
|
|
107
|
-
/**
|
|
108
|
-
* Default width to use for initial render; useful for SSR.
|
|
109
|
-
* @default null
|
|
110
|
-
*/
|
|
111
|
-
defaultWidth: PropTypes.number,
|
|
112
|
-
/**
|
|
113
|
-
* If `true`, disable dynamic :height property.
|
|
114
|
-
* @default false
|
|
115
|
-
*/
|
|
116
|
-
disableHeight: PropTypes.bool,
|
|
117
|
-
/**
|
|
118
|
-
* If `true`, disable dynamic :width property.
|
|
119
|
-
* @default false
|
|
120
|
-
*/
|
|
121
|
-
disableWidth: PropTypes.bool,
|
|
122
|
-
/**
|
|
123
|
-
* Nonce of the inlined stylesheet for Content Security Policy.
|
|
124
|
-
*/
|
|
125
|
-
nonce: PropTypes.string,
|
|
126
|
-
/**
|
|
127
|
-
* Callback to be invoked on-resize.
|
|
128
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
129
|
-
*/
|
|
130
|
-
onResize: PropTypes.func
|
|
131
|
-
} : void 0;
|
|
132
|
-
export { GridAutoSizer };
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["children", "defaultHeight", "defaultWidth", "disableHeight", "disableWidth", "nonce", "onResize", "style"];
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
import { unstable_useForkRef as useForkRef, unstable_ownerWindow as ownerWindow, unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
|
|
7
|
-
import createDetectElementResize from '../lib/createDetectElementResize';
|
|
8
|
-
// TODO replace with https://caniuse.com/resizeobserver.
|
|
9
|
-
|
|
10
|
-
// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
|
|
11
|
-
// for the sources.
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
children,
|
|
16
|
-
defaultHeight = null,
|
|
17
|
-
defaultWidth = null,
|
|
18
|
-
disableHeight = false,
|
|
19
|
-
disableWidth = false,
|
|
20
|
-
nonce,
|
|
21
|
-
onResize,
|
|
22
|
-
style
|
|
23
|
-
} = props,
|
|
24
|
-
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
25
|
-
const [state, setState] = React.useState({
|
|
26
|
-
height: defaultHeight,
|
|
27
|
-
width: defaultWidth
|
|
28
|
-
});
|
|
29
|
-
const rootRef = React.useRef(null);
|
|
30
|
-
const parentElement = React.useRef(null);
|
|
31
|
-
const handleResize = useEventCallback(() => {
|
|
32
|
-
// Guard against AutoSizer component being removed from the DOM immediately after being added.
|
|
33
|
-
// This can result in invalid style values which can result in NaN values if we don't handle them.
|
|
34
|
-
// See issue #150 for more context.
|
|
35
|
-
if (parentElement.current) {
|
|
36
|
-
const height = parentElement.current.offsetHeight || 0;
|
|
37
|
-
const width = parentElement.current.offsetWidth || 0;
|
|
38
|
-
const win = ownerWindow(parentElement.current);
|
|
39
|
-
const computedStyle = win.getComputedStyle(parentElement.current);
|
|
40
|
-
const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;
|
|
41
|
-
const paddingRight = parseInt(computedStyle.paddingRight, 10) || 0;
|
|
42
|
-
const paddingTop = parseInt(computedStyle.paddingTop, 10) || 0;
|
|
43
|
-
const paddingBottom = parseInt(computedStyle.paddingBottom, 10) || 0;
|
|
44
|
-
const newHeight = height - paddingTop - paddingBottom;
|
|
45
|
-
const newWidth = width - paddingLeft - paddingRight;
|
|
46
|
-
if (!disableHeight && state.height !== newHeight || !disableWidth && state.width !== newWidth) {
|
|
47
|
-
setState({
|
|
48
|
-
height: newHeight,
|
|
49
|
-
width: newWidth
|
|
50
|
-
});
|
|
51
|
-
if (onResize) {
|
|
52
|
-
onResize({
|
|
53
|
-
height: newHeight,
|
|
54
|
-
width: newWidth
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
useEnhancedEffect(() => {
|
|
61
|
-
parentElement.current = rootRef.current.parentElement;
|
|
62
|
-
if (!parentElement) {
|
|
63
|
-
return undefined;
|
|
64
|
-
}
|
|
65
|
-
const win = ownerWindow(parentElement.current ?? undefined);
|
|
66
|
-
const detectElementResize = createDetectElementResize(nonce, win);
|
|
67
|
-
detectElementResize.addResizeListener(parentElement.current, handleResize);
|
|
68
|
-
handleResize();
|
|
69
|
-
return () => {
|
|
70
|
-
detectElementResize.removeResizeListener(parentElement.current, handleResize);
|
|
71
|
-
};
|
|
72
|
-
}, [nonce, handleResize]);
|
|
73
|
-
const handleRef = useForkRef(rootRef, ref);
|
|
74
|
-
return /*#__PURE__*/_jsx("div", _extends({
|
|
75
|
-
ref: handleRef,
|
|
76
|
-
style: _extends({
|
|
77
|
-
flex: disableHeight ? 0 : '1 1 0px',
|
|
78
|
-
overflow: disableHeight ? 'visible' : 'auto'
|
|
79
|
-
}, style)
|
|
80
|
-
}, other, {
|
|
81
|
-
children: state.height === null && state.width === null ? null : children
|
|
82
|
-
}));
|
|
83
|
-
});
|
|
84
|
-
process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
|
|
85
|
-
// ----------------------------- Warning --------------------------------
|
|
86
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
87
|
-
// | To update them edit the TypeScript types and run "yarn proptypes" |
|
|
88
|
-
// ----------------------------------------------------------------------
|
|
89
|
-
/**
|
|
90
|
-
* Function responsible for rendering children.
|
|
91
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
92
|
-
* @returns {React.ReactNode} The children to render.
|
|
93
|
-
*/
|
|
94
|
-
children: PropTypes.node,
|
|
95
|
-
/**
|
|
96
|
-
* Default height to use for initial render; useful for SSR.
|
|
97
|
-
* @default null
|
|
98
|
-
*/
|
|
99
|
-
defaultHeight: PropTypes.number,
|
|
100
|
-
/**
|
|
101
|
-
* Default width to use for initial render; useful for SSR.
|
|
102
|
-
* @default null
|
|
103
|
-
*/
|
|
104
|
-
defaultWidth: PropTypes.number,
|
|
105
|
-
/**
|
|
106
|
-
* If `true`, disable dynamic :height property.
|
|
107
|
-
* @default false
|
|
108
|
-
*/
|
|
109
|
-
disableHeight: PropTypes.bool,
|
|
110
|
-
/**
|
|
111
|
-
* If `true`, disable dynamic :width property.
|
|
112
|
-
* @default false
|
|
113
|
-
*/
|
|
114
|
-
disableWidth: PropTypes.bool,
|
|
115
|
-
/**
|
|
116
|
-
* Nonce of the inlined stylesheet for Content Security Policy.
|
|
117
|
-
*/
|
|
118
|
-
nonce: PropTypes.string,
|
|
119
|
-
/**
|
|
120
|
-
* Callback to be invoked on-resize.
|
|
121
|
-
* @param {AutoSizerSize} size The grid's size.
|
|
122
|
-
*/
|
|
123
|
-
onResize: PropTypes.func
|
|
124
|
-
} : void 0;
|
|
125
|
-
export { GridAutoSizer };
|