@homebound/beam 2.105.9 → 2.105.10
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.
|
@@ -101,20 +101,36 @@ function GridTable(props) {
|
|
|
101
101
|
}
|
|
102
102
|
return rows;
|
|
103
103
|
}, [columns, rows, sorting, sortState]);
|
|
104
|
+
// Calculate the column sizes immediately rather than via the `debounce` method.
|
|
105
|
+
// We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`, which is used by `useDebounce` and essentially turns off the callback.
|
|
106
|
+
const calculateImmediately = (0, react_1.useRef)(true);
|
|
104
107
|
const [tableWidth, setTableWidth] = (0, react_1.useState)();
|
|
105
108
|
// Calc our initial/first render sizes where we won't have a width yet
|
|
106
109
|
const [columnSizes, setColumnSizes] = (0, react_1.useState)(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
|
|
107
|
-
const
|
|
110
|
+
const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
|
|
108
111
|
var _a;
|
|
109
112
|
setTableWidth(width);
|
|
110
113
|
setColumnSizes(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
|
|
111
|
-
},
|
|
114
|
+
}, [setTableWidth, setColumnSizes, columns, style]);
|
|
115
|
+
const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
|
|
112
116
|
const onResize = (0, react_1.useCallback)(() => {
|
|
113
117
|
const target = (resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) ? resizeTarget.current : tableRef.current;
|
|
114
118
|
if (target && target.clientWidth !== tableWidth) {
|
|
115
|
-
|
|
119
|
+
if (calculateImmediately.current) {
|
|
120
|
+
calculateImmediately.current = false;
|
|
121
|
+
setTableAndColumnWidths(target.clientWidth);
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
setTableAndColumnWidthsDebounced(target.clientWidth);
|
|
125
|
+
}
|
|
116
126
|
}
|
|
117
|
-
}, [
|
|
127
|
+
}, [
|
|
128
|
+
resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current,
|
|
129
|
+
tableRef.current,
|
|
130
|
+
setTableAndColumnWidths,
|
|
131
|
+
calculateImmediately,
|
|
132
|
+
setTableAndColumnWidthsDebounced,
|
|
133
|
+
]);
|
|
118
134
|
(0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
|
|
119
135
|
// Filter + flatten + component-ize the sorted rows.
|
|
120
136
|
let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
|