material-react-table 0.35.1 → 0.36.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/dist/cjs/MaterialReactTable.d.ts +8 -32
- package/dist/cjs/index.js +33 -515
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/MaterialReactTable.d.ts +8 -32
- package/dist/esm/material-react-table.esm.js +32 -514
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/index.d.ts +8 -32
- package/package.json +5 -5
- package/src/MaterialReactTable.tsx +8 -59
- package/src/body/MRT_TableBodyCell.tsx +16 -5
- package/src/buttons/MRT_EditActionButtons.tsx +2 -2
- package/src/inputs/MRT_EditCellTextField.tsx +20 -27
|
@@ -3,6 +3,7 @@ import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel,
|
|
|
3
3
|
import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
|
|
4
4
|
import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
|
|
5
5
|
import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
|
|
6
|
+
import { useVirtual } from 'react-virtual';
|
|
6
7
|
|
|
7
8
|
/******************************************************************************
|
|
8
9
|
Copyright (c) Microsoft Corporation.
|
|
@@ -873,7 +874,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
|
|
|
873
874
|
};
|
|
874
875
|
|
|
875
876
|
const MRT_EditActionButtons = ({ row, table }) => {
|
|
876
|
-
const { getState, options: { icons: { CancelIcon, SaveIcon }, localization,
|
|
877
|
+
const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, }, setEditingRow, } = table;
|
|
877
878
|
const { editingRow } = getState();
|
|
878
879
|
const handleCancel = () => {
|
|
879
880
|
row._valuesCache = Object.assign({}, row.original);
|
|
@@ -881,7 +882,7 @@ const MRT_EditActionButtons = ({ row, table }) => {
|
|
|
881
882
|
};
|
|
882
883
|
const handleSave = () => {
|
|
883
884
|
var _a;
|
|
884
|
-
|
|
885
|
+
onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
|
|
885
886
|
row: editingRow !== null && editingRow !== void 0 ? editingRow : row,
|
|
886
887
|
table,
|
|
887
888
|
values: (_a = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _a !== void 0 ? _a : Object.assign({}, row.original),
|
|
@@ -1730,513 +1731,31 @@ const MRT_TableHead = ({ table }) => {
|
|
|
1730
1731
|
return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
|
|
1731
1732
|
};
|
|
1732
1733
|
|
|
1733
|
-
function _extends() {
|
|
1734
|
-
_extends = Object.assign || function (target) {
|
|
1735
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
1736
|
-
var source = arguments[i];
|
|
1737
|
-
|
|
1738
|
-
for (var key in source) {
|
|
1739
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
1740
|
-
target[key] = source[key];
|
|
1741
|
-
}
|
|
1742
|
-
}
|
|
1743
|
-
}
|
|
1744
|
-
|
|
1745
|
-
return target;
|
|
1746
|
-
};
|
|
1747
|
-
|
|
1748
|
-
return _extends.apply(this, arguments);
|
|
1749
|
-
}
|
|
1750
|
-
|
|
1751
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
1752
|
-
if (source == null) return {};
|
|
1753
|
-
var target = {};
|
|
1754
|
-
var sourceKeys = Object.keys(source);
|
|
1755
|
-
var key, i;
|
|
1756
|
-
|
|
1757
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
1758
|
-
key = sourceKeys[i];
|
|
1759
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
1760
|
-
target[key] = source[key];
|
|
1761
|
-
}
|
|
1762
|
-
|
|
1763
|
-
return target;
|
|
1764
|
-
}
|
|
1765
|
-
|
|
1766
|
-
var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
|
|
1767
|
-
|
|
1768
|
-
var rectChanged = function rectChanged(a, b) {
|
|
1769
|
-
if (a === void 0) {
|
|
1770
|
-
a = {};
|
|
1771
|
-
}
|
|
1772
|
-
|
|
1773
|
-
if (b === void 0) {
|
|
1774
|
-
b = {};
|
|
1775
|
-
}
|
|
1776
|
-
|
|
1777
|
-
return props.some(function (prop) {
|
|
1778
|
-
return a[prop] !== b[prop];
|
|
1779
|
-
});
|
|
1780
|
-
};
|
|
1781
|
-
|
|
1782
|
-
var observedNodes = /*#__PURE__*/new Map();
|
|
1783
|
-
var rafId;
|
|
1784
|
-
|
|
1785
|
-
var run = function run() {
|
|
1786
|
-
var changedStates = [];
|
|
1787
|
-
observedNodes.forEach(function (state, node) {
|
|
1788
|
-
var newRect = node.getBoundingClientRect();
|
|
1789
|
-
|
|
1790
|
-
if (rectChanged(newRect, state.rect)) {
|
|
1791
|
-
state.rect = newRect;
|
|
1792
|
-
changedStates.push(state);
|
|
1793
|
-
}
|
|
1794
|
-
});
|
|
1795
|
-
changedStates.forEach(function (state) {
|
|
1796
|
-
state.callbacks.forEach(function (cb) {
|
|
1797
|
-
return cb(state.rect);
|
|
1798
|
-
});
|
|
1799
|
-
});
|
|
1800
|
-
rafId = window.requestAnimationFrame(run);
|
|
1801
|
-
};
|
|
1802
|
-
|
|
1803
|
-
function observeRect(node, cb) {
|
|
1804
|
-
return {
|
|
1805
|
-
observe: function observe() {
|
|
1806
|
-
var wasEmpty = observedNodes.size === 0;
|
|
1807
|
-
|
|
1808
|
-
if (observedNodes.has(node)) {
|
|
1809
|
-
observedNodes.get(node).callbacks.push(cb);
|
|
1810
|
-
} else {
|
|
1811
|
-
observedNodes.set(node, {
|
|
1812
|
-
rect: undefined,
|
|
1813
|
-
hasRectChanged: false,
|
|
1814
|
-
callbacks: [cb]
|
|
1815
|
-
});
|
|
1816
|
-
}
|
|
1817
|
-
|
|
1818
|
-
if (wasEmpty) run();
|
|
1819
|
-
},
|
|
1820
|
-
unobserve: function unobserve() {
|
|
1821
|
-
var state = observedNodes.get(node);
|
|
1822
|
-
|
|
1823
|
-
if (state) {
|
|
1824
|
-
// Remove the callback
|
|
1825
|
-
var index = state.callbacks.indexOf(cb);
|
|
1826
|
-
if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
|
|
1827
|
-
|
|
1828
|
-
if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
|
|
1829
|
-
|
|
1830
|
-
if (!observedNodes.size) cancelAnimationFrame(rafId);
|
|
1831
|
-
}
|
|
1832
|
-
}
|
|
1833
|
-
};
|
|
1834
|
-
}
|
|
1835
|
-
|
|
1836
|
-
var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
1837
|
-
|
|
1838
|
-
function useRect(nodeRef, initialRect) {
|
|
1839
|
-
if (initialRect === void 0) {
|
|
1840
|
-
initialRect = {
|
|
1841
|
-
width: 0,
|
|
1842
|
-
height: 0
|
|
1843
|
-
};
|
|
1844
|
-
}
|
|
1845
|
-
|
|
1846
|
-
var _React$useState = React.useState(nodeRef.current),
|
|
1847
|
-
element = _React$useState[0],
|
|
1848
|
-
setElement = _React$useState[1];
|
|
1849
|
-
|
|
1850
|
-
var _React$useReducer = React.useReducer(rectReducer, initialRect),
|
|
1851
|
-
rect = _React$useReducer[0],
|
|
1852
|
-
dispatch = _React$useReducer[1];
|
|
1853
|
-
|
|
1854
|
-
var initialRectSet = React.useRef(false);
|
|
1855
|
-
useIsomorphicLayoutEffect$1(function () {
|
|
1856
|
-
if (nodeRef.current !== element) {
|
|
1857
|
-
setElement(nodeRef.current);
|
|
1858
|
-
}
|
|
1859
|
-
});
|
|
1860
|
-
useIsomorphicLayoutEffect$1(function () {
|
|
1861
|
-
if (element && !initialRectSet.current) {
|
|
1862
|
-
initialRectSet.current = true;
|
|
1863
|
-
|
|
1864
|
-
var _rect = element.getBoundingClientRect();
|
|
1865
|
-
|
|
1866
|
-
dispatch({
|
|
1867
|
-
rect: _rect
|
|
1868
|
-
});
|
|
1869
|
-
}
|
|
1870
|
-
}, [element]);
|
|
1871
|
-
React.useEffect(function () {
|
|
1872
|
-
if (!element) {
|
|
1873
|
-
return;
|
|
1874
|
-
}
|
|
1875
|
-
|
|
1876
|
-
var observer = observeRect(element, function (rect) {
|
|
1877
|
-
dispatch({
|
|
1878
|
-
rect: rect
|
|
1879
|
-
});
|
|
1880
|
-
});
|
|
1881
|
-
observer.observe();
|
|
1882
|
-
return function () {
|
|
1883
|
-
observer.unobserve();
|
|
1884
|
-
};
|
|
1885
|
-
}, [element]);
|
|
1886
|
-
return rect;
|
|
1887
|
-
}
|
|
1888
|
-
|
|
1889
|
-
function rectReducer(state, action) {
|
|
1890
|
-
var rect = action.rect;
|
|
1891
|
-
|
|
1892
|
-
if (state.height !== rect.height || state.width !== rect.width) {
|
|
1893
|
-
return rect;
|
|
1894
|
-
}
|
|
1895
|
-
|
|
1896
|
-
return state;
|
|
1897
|
-
}
|
|
1898
|
-
|
|
1899
|
-
var defaultEstimateSize = function defaultEstimateSize() {
|
|
1900
|
-
return 50;
|
|
1901
|
-
};
|
|
1902
|
-
|
|
1903
|
-
var defaultKeyExtractor = function defaultKeyExtractor(index) {
|
|
1904
|
-
return index;
|
|
1905
|
-
};
|
|
1906
|
-
|
|
1907
|
-
var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
|
|
1908
|
-
var key = horizontal ? 'offsetWidth' : 'offsetHeight';
|
|
1909
|
-
return el[key];
|
|
1910
|
-
};
|
|
1911
|
-
|
|
1912
|
-
var defaultRangeExtractor = function defaultRangeExtractor(range) {
|
|
1913
|
-
var start = Math.max(range.start - range.overscan, 0);
|
|
1914
|
-
var end = Math.min(range.end + range.overscan, range.size - 1);
|
|
1915
|
-
var arr = [];
|
|
1916
|
-
|
|
1917
|
-
for (var i = start; i <= end; i++) {
|
|
1918
|
-
arr.push(i);
|
|
1919
|
-
}
|
|
1920
|
-
|
|
1921
|
-
return arr;
|
|
1922
|
-
};
|
|
1923
|
-
function useVirtual(_ref) {
|
|
1924
|
-
var _measurements;
|
|
1925
|
-
|
|
1926
|
-
var _ref$size = _ref.size,
|
|
1927
|
-
size = _ref$size === void 0 ? 0 : _ref$size,
|
|
1928
|
-
_ref$estimateSize = _ref.estimateSize,
|
|
1929
|
-
estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
|
|
1930
|
-
_ref$overscan = _ref.overscan,
|
|
1931
|
-
overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
|
|
1932
|
-
_ref$paddingStart = _ref.paddingStart,
|
|
1933
|
-
paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
|
|
1934
|
-
_ref$paddingEnd = _ref.paddingEnd,
|
|
1935
|
-
paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
|
|
1936
|
-
parentRef = _ref.parentRef,
|
|
1937
|
-
horizontal = _ref.horizontal,
|
|
1938
|
-
scrollToFn = _ref.scrollToFn,
|
|
1939
|
-
useObserver = _ref.useObserver,
|
|
1940
|
-
initialRect = _ref.initialRect,
|
|
1941
|
-
onScrollElement = _ref.onScrollElement,
|
|
1942
|
-
scrollOffsetFn = _ref.scrollOffsetFn,
|
|
1943
|
-
_ref$keyExtractor = _ref.keyExtractor,
|
|
1944
|
-
keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
|
|
1945
|
-
_ref$measureSize = _ref.measureSize,
|
|
1946
|
-
measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
|
|
1947
|
-
_ref$rangeExtractor = _ref.rangeExtractor,
|
|
1948
|
-
rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
|
|
1949
|
-
var sizeKey = horizontal ? 'width' : 'height';
|
|
1950
|
-
var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
|
|
1951
|
-
var latestRef = React.useRef({
|
|
1952
|
-
scrollOffset: 0,
|
|
1953
|
-
measurements: []
|
|
1954
|
-
});
|
|
1955
|
-
|
|
1956
|
-
var _React$useState = React.useState(0),
|
|
1957
|
-
scrollOffset = _React$useState[0],
|
|
1958
|
-
setScrollOffset = _React$useState[1];
|
|
1959
|
-
|
|
1960
|
-
latestRef.current.scrollOffset = scrollOffset;
|
|
1961
|
-
var useMeasureParent = useObserver || useRect;
|
|
1962
|
-
|
|
1963
|
-
var _useMeasureParent = useMeasureParent(parentRef, initialRect),
|
|
1964
|
-
outerSize = _useMeasureParent[sizeKey];
|
|
1965
|
-
|
|
1966
|
-
latestRef.current.outerSize = outerSize;
|
|
1967
|
-
var defaultScrollToFn = React.useCallback(function (offset) {
|
|
1968
|
-
if (parentRef.current) {
|
|
1969
|
-
parentRef.current[scrollKey] = offset;
|
|
1970
|
-
}
|
|
1971
|
-
}, [parentRef, scrollKey]);
|
|
1972
|
-
var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
|
|
1973
|
-
scrollToFn = React.useCallback(function (offset) {
|
|
1974
|
-
resolvedScrollToFn(offset, defaultScrollToFn);
|
|
1975
|
-
}, [defaultScrollToFn, resolvedScrollToFn]);
|
|
1976
|
-
|
|
1977
|
-
var _React$useState2 = React.useState({}),
|
|
1978
|
-
measuredCache = _React$useState2[0],
|
|
1979
|
-
setMeasuredCache = _React$useState2[1];
|
|
1980
|
-
|
|
1981
|
-
var measure = React.useCallback(function () {
|
|
1982
|
-
return setMeasuredCache({});
|
|
1983
|
-
}, []);
|
|
1984
|
-
var pendingMeasuredCacheIndexesRef = React.useRef([]);
|
|
1985
|
-
var measurements = React.useMemo(function () {
|
|
1986
|
-
var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
|
|
1987
|
-
pendingMeasuredCacheIndexesRef.current = [];
|
|
1988
|
-
var measurements = latestRef.current.measurements.slice(0, min);
|
|
1989
|
-
|
|
1990
|
-
for (var i = min; i < size; i++) {
|
|
1991
|
-
var key = keyExtractor(i);
|
|
1992
|
-
var measuredSize = measuredCache[key];
|
|
1993
|
-
|
|
1994
|
-
var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
|
|
1995
|
-
|
|
1996
|
-
var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
|
|
1997
|
-
|
|
1998
|
-
var _end = _start + _size;
|
|
1999
|
-
|
|
2000
|
-
measurements[i] = {
|
|
2001
|
-
index: i,
|
|
2002
|
-
start: _start,
|
|
2003
|
-
size: _size,
|
|
2004
|
-
end: _end,
|
|
2005
|
-
key: key
|
|
2006
|
-
};
|
|
2007
|
-
}
|
|
2008
|
-
|
|
2009
|
-
return measurements;
|
|
2010
|
-
}, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
|
|
2011
|
-
var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
|
|
2012
|
-
latestRef.current.measurements = measurements;
|
|
2013
|
-
latestRef.current.totalSize = totalSize;
|
|
2014
|
-
var element = onScrollElement ? onScrollElement.current : parentRef.current;
|
|
2015
|
-
var scrollOffsetFnRef = React.useRef(scrollOffsetFn);
|
|
2016
|
-
scrollOffsetFnRef.current = scrollOffsetFn;
|
|
2017
|
-
useIsomorphicLayoutEffect$1(function () {
|
|
2018
|
-
if (!element) {
|
|
2019
|
-
setScrollOffset(0);
|
|
2020
|
-
return;
|
|
2021
|
-
}
|
|
2022
|
-
|
|
2023
|
-
var onScroll = function onScroll(event) {
|
|
2024
|
-
var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
|
|
2025
|
-
setScrollOffset(offset);
|
|
2026
|
-
};
|
|
2027
|
-
|
|
2028
|
-
onScroll();
|
|
2029
|
-
element.addEventListener('scroll', onScroll, {
|
|
2030
|
-
capture: false,
|
|
2031
|
-
passive: true
|
|
2032
|
-
});
|
|
2033
|
-
return function () {
|
|
2034
|
-
element.removeEventListener('scroll', onScroll);
|
|
2035
|
-
};
|
|
2036
|
-
}, [element, scrollKey]);
|
|
2037
|
-
|
|
2038
|
-
var _calculateRange = calculateRange(latestRef.current),
|
|
2039
|
-
start = _calculateRange.start,
|
|
2040
|
-
end = _calculateRange.end;
|
|
2041
|
-
|
|
2042
|
-
var indexes = React.useMemo(function () {
|
|
2043
|
-
return rangeExtractor({
|
|
2044
|
-
start: start,
|
|
2045
|
-
end: end,
|
|
2046
|
-
overscan: overscan,
|
|
2047
|
-
size: measurements.length
|
|
2048
|
-
});
|
|
2049
|
-
}, [start, end, overscan, measurements.length, rangeExtractor]);
|
|
2050
|
-
var measureSizeRef = React.useRef(measureSize);
|
|
2051
|
-
measureSizeRef.current = measureSize;
|
|
2052
|
-
var virtualItems = React.useMemo(function () {
|
|
2053
|
-
var virtualItems = [];
|
|
2054
|
-
|
|
2055
|
-
var _loop = function _loop(k, len) {
|
|
2056
|
-
var i = indexes[k];
|
|
2057
|
-
var measurement = measurements[i];
|
|
2058
|
-
|
|
2059
|
-
var item = _extends(_extends({}, measurement), {}, {
|
|
2060
|
-
measureRef: function measureRef(el) {
|
|
2061
|
-
if (el) {
|
|
2062
|
-
var measuredSize = measureSizeRef.current(el, horizontal);
|
|
2063
|
-
|
|
2064
|
-
if (measuredSize !== item.size) {
|
|
2065
|
-
var _scrollOffset = latestRef.current.scrollOffset;
|
|
2066
|
-
|
|
2067
|
-
if (item.start < _scrollOffset) {
|
|
2068
|
-
defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
|
|
2069
|
-
}
|
|
2070
|
-
|
|
2071
|
-
pendingMeasuredCacheIndexesRef.current.push(i);
|
|
2072
|
-
setMeasuredCache(function (old) {
|
|
2073
|
-
var _extends2;
|
|
2074
|
-
|
|
2075
|
-
return _extends(_extends({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
|
|
2076
|
-
});
|
|
2077
|
-
}
|
|
2078
|
-
}
|
|
2079
|
-
}
|
|
2080
|
-
});
|
|
2081
|
-
|
|
2082
|
-
virtualItems.push(item);
|
|
2083
|
-
};
|
|
2084
|
-
|
|
2085
|
-
for (var k = 0, len = indexes.length; k < len; k++) {
|
|
2086
|
-
_loop(k);
|
|
2087
|
-
}
|
|
2088
|
-
|
|
2089
|
-
return virtualItems;
|
|
2090
|
-
}, [indexes, defaultScrollToFn, horizontal, measurements]);
|
|
2091
|
-
var mountedRef = React.useRef(false);
|
|
2092
|
-
useIsomorphicLayoutEffect$1(function () {
|
|
2093
|
-
if (mountedRef.current) {
|
|
2094
|
-
setMeasuredCache({});
|
|
2095
|
-
}
|
|
2096
|
-
|
|
2097
|
-
mountedRef.current = true;
|
|
2098
|
-
}, [estimateSize]);
|
|
2099
|
-
var scrollToOffset = React.useCallback(function (toOffset, _temp) {
|
|
2100
|
-
var _ref2 = _temp === void 0 ? {} : _temp,
|
|
2101
|
-
_ref2$align = _ref2.align,
|
|
2102
|
-
align = _ref2$align === void 0 ? 'start' : _ref2$align;
|
|
2103
|
-
|
|
2104
|
-
var _latestRef$current = latestRef.current,
|
|
2105
|
-
scrollOffset = _latestRef$current.scrollOffset,
|
|
2106
|
-
outerSize = _latestRef$current.outerSize;
|
|
2107
|
-
|
|
2108
|
-
if (align === 'auto') {
|
|
2109
|
-
if (toOffset <= scrollOffset) {
|
|
2110
|
-
align = 'start';
|
|
2111
|
-
} else if (toOffset >= scrollOffset + outerSize) {
|
|
2112
|
-
align = 'end';
|
|
2113
|
-
} else {
|
|
2114
|
-
align = 'start';
|
|
2115
|
-
}
|
|
2116
|
-
}
|
|
2117
|
-
|
|
2118
|
-
if (align === 'start') {
|
|
2119
|
-
scrollToFn(toOffset);
|
|
2120
|
-
} else if (align === 'end') {
|
|
2121
|
-
scrollToFn(toOffset - outerSize);
|
|
2122
|
-
} else if (align === 'center') {
|
|
2123
|
-
scrollToFn(toOffset - outerSize / 2);
|
|
2124
|
-
}
|
|
2125
|
-
}, [scrollToFn]);
|
|
2126
|
-
var tryScrollToIndex = React.useCallback(function (index, _temp2) {
|
|
2127
|
-
var _ref3 = _temp2 === void 0 ? {} : _temp2,
|
|
2128
|
-
_ref3$align = _ref3.align,
|
|
2129
|
-
align = _ref3$align === void 0 ? 'auto' : _ref3$align,
|
|
2130
|
-
rest = _objectWithoutPropertiesLoose(_ref3, ["align"]);
|
|
2131
|
-
|
|
2132
|
-
var _latestRef$current2 = latestRef.current,
|
|
2133
|
-
measurements = _latestRef$current2.measurements,
|
|
2134
|
-
scrollOffset = _latestRef$current2.scrollOffset,
|
|
2135
|
-
outerSize = _latestRef$current2.outerSize;
|
|
2136
|
-
var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
|
|
2137
|
-
|
|
2138
|
-
if (!measurement) {
|
|
2139
|
-
return;
|
|
2140
|
-
}
|
|
2141
|
-
|
|
2142
|
-
if (align === 'auto') {
|
|
2143
|
-
if (measurement.end >= scrollOffset + outerSize) {
|
|
2144
|
-
align = 'end';
|
|
2145
|
-
} else if (measurement.start <= scrollOffset) {
|
|
2146
|
-
align = 'start';
|
|
2147
|
-
} else {
|
|
2148
|
-
return;
|
|
2149
|
-
}
|
|
2150
|
-
}
|
|
2151
|
-
|
|
2152
|
-
var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
|
|
2153
|
-
scrollToOffset(toOffset, _extends({
|
|
2154
|
-
align: align
|
|
2155
|
-
}, rest));
|
|
2156
|
-
}, [scrollToOffset, size]);
|
|
2157
|
-
var scrollToIndex = React.useCallback(function () {
|
|
2158
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
2159
|
-
args[_key] = arguments[_key];
|
|
2160
|
-
}
|
|
2161
|
-
|
|
2162
|
-
// We do a double request here because of
|
|
2163
|
-
// dynamic sizes which can cause offset shift
|
|
2164
|
-
// and end up in the wrong spot. Unfortunately,
|
|
2165
|
-
// we can't know about those dynamic sizes until
|
|
2166
|
-
// we try and render them. So double down!
|
|
2167
|
-
tryScrollToIndex.apply(void 0, args);
|
|
2168
|
-
requestAnimationFrame(function () {
|
|
2169
|
-
tryScrollToIndex.apply(void 0, args);
|
|
2170
|
-
});
|
|
2171
|
-
}, [tryScrollToIndex]);
|
|
2172
|
-
return {
|
|
2173
|
-
virtualItems: virtualItems,
|
|
2174
|
-
totalSize: totalSize,
|
|
2175
|
-
scrollToOffset: scrollToOffset,
|
|
2176
|
-
scrollToIndex: scrollToIndex,
|
|
2177
|
-
measure: measure
|
|
2178
|
-
};
|
|
2179
|
-
}
|
|
2180
|
-
|
|
2181
|
-
var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
|
|
2182
|
-
while (low <= high) {
|
|
2183
|
-
var middle = (low + high) / 2 | 0;
|
|
2184
|
-
var currentValue = getCurrentValue(middle);
|
|
2185
|
-
|
|
2186
|
-
if (currentValue < value) {
|
|
2187
|
-
low = middle + 1;
|
|
2188
|
-
} else if (currentValue > value) {
|
|
2189
|
-
high = middle - 1;
|
|
2190
|
-
} else {
|
|
2191
|
-
return middle;
|
|
2192
|
-
}
|
|
2193
|
-
}
|
|
2194
|
-
|
|
2195
|
-
if (low > 0) {
|
|
2196
|
-
return low - 1;
|
|
2197
|
-
} else {
|
|
2198
|
-
return 0;
|
|
2199
|
-
}
|
|
2200
|
-
};
|
|
2201
|
-
|
|
2202
|
-
function calculateRange(_ref4) {
|
|
2203
|
-
var measurements = _ref4.measurements,
|
|
2204
|
-
outerSize = _ref4.outerSize,
|
|
2205
|
-
scrollOffset = _ref4.scrollOffset;
|
|
2206
|
-
var size = measurements.length - 1;
|
|
2207
|
-
|
|
2208
|
-
var getOffset = function getOffset(index) {
|
|
2209
|
-
return measurements[index].start;
|
|
2210
|
-
};
|
|
2211
|
-
|
|
2212
|
-
var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
|
|
2213
|
-
var end = start;
|
|
2214
|
-
|
|
2215
|
-
while (end < size && measurements[end].end < scrollOffset + outerSize) {
|
|
2216
|
-
end++;
|
|
2217
|
-
}
|
|
2218
|
-
|
|
2219
|
-
return {
|
|
2220
|
-
start: start,
|
|
2221
|
-
end: end
|
|
2222
|
-
};
|
|
2223
|
-
}
|
|
2224
|
-
|
|
2225
1734
|
const MRT_EditCellTextField = ({ cell, table }) => {
|
|
2226
1735
|
var _a;
|
|
2227
|
-
const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps
|
|
1736
|
+
const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
|
|
2228
1737
|
const { column, row } = cell;
|
|
2229
1738
|
const { columnDef } = column;
|
|
2230
1739
|
const { editingRow } = getState();
|
|
2231
1740
|
const [value, setValue] = useState(() => cell.getValue());
|
|
1741
|
+
const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
|
|
1742
|
+
? muiTableBodyCellEditTextFieldProps({ cell, table })
|
|
1743
|
+
: muiTableBodyCellEditTextFieldProps;
|
|
1744
|
+
const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
|
|
1745
|
+
? columnDef.muiTableBodyCellEditTextFieldProps({
|
|
1746
|
+
cell,
|
|
1747
|
+
table,
|
|
1748
|
+
})
|
|
1749
|
+
: columnDef.muiTableBodyCellEditTextFieldProps;
|
|
1750
|
+
const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
|
|
2232
1751
|
const handleChange = (event) => {
|
|
2233
1752
|
var _a;
|
|
1753
|
+
(_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
|
|
2234
1754
|
setValue(event.target.value);
|
|
2235
|
-
(_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
|
|
2236
|
-
onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table, value });
|
|
2237
1755
|
};
|
|
2238
1756
|
const handleBlur = (event) => {
|
|
2239
1757
|
var _a;
|
|
1758
|
+
(_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
|
|
2240
1759
|
if (editingRow) {
|
|
2241
1760
|
if (!row._valuesCache)
|
|
2242
1761
|
row._valuesCache = {};
|
|
@@ -2244,23 +1763,11 @@ const MRT_EditCellTextField = ({ cell, table }) => {
|
|
|
2244
1763
|
setEditingRow(Object.assign({}, editingRow));
|
|
2245
1764
|
}
|
|
2246
1765
|
setEditingCell(null);
|
|
2247
|
-
(_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
|
|
2248
|
-
onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table, value });
|
|
2249
1766
|
};
|
|
2250
|
-
const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
|
|
2251
|
-
? muiTableBodyCellEditTextFieldProps({ cell, table })
|
|
2252
|
-
: muiTableBodyCellEditTextFieldProps;
|
|
2253
|
-
const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
|
|
2254
|
-
? columnDef.muiTableBodyCellEditTextFieldProps({
|
|
2255
|
-
cell,
|
|
2256
|
-
table,
|
|
2257
|
-
})
|
|
2258
|
-
: columnDef.muiTableBodyCellEditTextFieldProps;
|
|
2259
|
-
const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
|
|
2260
1767
|
if (columnDef.Edit) {
|
|
2261
1768
|
return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
|
|
2262
1769
|
}
|
|
2263
|
-
return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none",
|
|
1770
|
+
return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange })));
|
|
2264
1771
|
};
|
|
2265
1772
|
|
|
2266
1773
|
const MRT_CopyButton = ({ cell, children, table }) => {
|
|
@@ -2422,7 +1929,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
|
|
|
2422
1929
|
: column.getIsPinned()
|
|
2423
1930
|
? 1
|
|
2424
1931
|
: undefined, '&:hover': {
|
|
2425
|
-
backgroundColor: enableHover &&
|
|
1932
|
+
backgroundColor: enableHover &&
|
|
1933
|
+
enableEditing &&
|
|
1934
|
+
columnDef.enableEditing !== false &&
|
|
1935
|
+
editingMode !== 'row'
|
|
2426
1936
|
? theme.palette.mode === 'dark'
|
|
2427
1937
|
? `${lighten(theme.palette.background.default, 0.13)} !important`
|
|
2428
1938
|
: `${darken(theme.palette.background.default, 0.07)} !important`
|
|
@@ -2433,14 +1943,22 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
|
|
|
2433
1943
|
} }),
|
|
2434
1944
|
React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, muiTableBodyCellSkeletonProps))) : enableRowNumbers &&
|
|
2435
1945
|
rowNumberMode === 'static' &&
|
|
2436
|
-
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display'
|
|
1946
|
+
column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
|
|
1947
|
+
(column.id === 'mrt-row-select' ||
|
|
1948
|
+
column.id === 'mrt-row-expand' ||
|
|
1949
|
+
!row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
|
|
2437
1950
|
columnDef.enableClickToCopy !== false ? (React.createElement(React.Fragment, null,
|
|
2438
1951
|
React.createElement(MRT_CopyButton, { cell: cell, table: table },
|
|
2439
|
-
React.createElement(React.Fragment, null,
|
|
1952
|
+
React.createElement(React.Fragment, null, row.getIsGrouped() && !cell.getIsGrouped()
|
|
1953
|
+
? null
|
|
1954
|
+
: (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
|
|
2440
1955
|
cell.getIsGrouped() && React.createElement(React.Fragment, null,
|
|
2441
1956
|
" (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
|
|
2442
1957
|
_d.length,
|
|
2443
|
-
")"))) : (React.createElement(React.Fragment, null,
|
|
1958
|
+
")"))) : (React.createElement(React.Fragment, null,
|
|
1959
|
+
row.getIsGrouped() && !cell.getIsGrouped()
|
|
1960
|
+
? null
|
|
1961
|
+
: (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
|
|
2444
1962
|
cell.getIsGrouped() && React.createElement(React.Fragment, null,
|
|
2445
1963
|
" (", (_j = (_h = row.subRows) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : '',
|
|
2446
1964
|
")"))))));
|