@popmenu/common-ui 0.18.3 → 0.18.4-alpha.4

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.
Files changed (32) hide show
  1. package/build/components/index.d.ts +0 -1
  2. package/build/index.es.js +1 -2311
  3. package/build/index.es.js.map +1 -1
  4. package/build/index.js +0 -2309
  5. package/build/index.js.map +1 -1
  6. package/package.json +4 -11
  7. package/build/components/Table/Table.d.ts +0 -3
  8. package/build/components/Table/TableProps.d.ts +0 -28
  9. package/build/components/Table/TableStyles.d.ts +0 -2
  10. package/build/components/Table/index.d.ts +0 -2
  11. package/build/components/Table/util/makeColumns.d.ts +0 -7
  12. package/build/components/TableActionsCell/TableActionsCell.d.ts +0 -3
  13. package/build/components/TableActionsCell/TableActionsCellProps.d.ts +0 -10
  14. package/build/components/TableActionsCell/index.d.ts +0 -2
  15. package/build/components/TableBody/TableBody.d.ts +0 -2
  16. package/build/components/TableBody/index.d.ts +0 -1
  17. package/build/components/TableCell/TableCell.d.ts +0 -2
  18. package/build/components/TableCell/TableCellStyles.d.ts +0 -1
  19. package/build/components/TableCell/index.d.ts +0 -1
  20. package/build/components/TableFooter/TableFooter.d.ts +0 -2
  21. package/build/components/TableFooter/index.d.ts +0 -1
  22. package/build/components/TableHeader/TableHeader.d.ts +0 -2
  23. package/build/components/TableHeader/index.d.ts +0 -1
  24. package/build/components/TableHeaderCell/TableHeaderCell.d.ts +0 -3
  25. package/build/components/TableHeaderCell/TableHeaderCellProps.d.ts +0 -8
  26. package/build/components/TableHeaderCell/TableHeaderCellStyles.d.ts +0 -2
  27. package/build/components/TableHeaderCell/index.d.ts +0 -1
  28. package/build/components/TableHeaderRow/TableHeaderRow.d.ts +0 -2
  29. package/build/components/TableHeaderRow/index.d.ts +0 -1
  30. package/build/components/TableRow/TableRow.d.ts +0 -2
  31. package/build/components/TableRow/TableRowStyles.d.ts +0 -1
  32. package/build/components/TableRow/index.d.ts +0 -1
package/build/index.js CHANGED
@@ -45,7 +45,6 @@ var MenuList = require('@material-ui/core/MenuList');
45
45
  var MuiRadio = require('@material-ui/core/Radio');
46
46
  var TextField = require('@material-ui/core/TextField');
47
47
  var MuiSwitch = require('@material-ui/core/Switch');
48
- var lab = require('@material-ui/lab');
49
48
  var Tab = require('@material-ui/core/Tab');
50
49
  var Tabs = require('@material-ui/core/Tabs');
51
50
  var MuiToggleButton = require('@material-ui/lab/ToggleButton');
@@ -158,70 +157,6 @@ function __rest(s, e) {
158
157
  t[p[i]] = s[p[i]];
159
158
  }
160
159
  return t;
161
- }
162
-
163
- function __spreadArray(to, from, pack) {
164
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
165
- if (ar || !(i in from)) {
166
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
167
- ar[i] = from[i];
168
- }
169
- }
170
- return to.concat(ar || from);
171
- }
172
-
173
- var _path$3K;
174
-
175
- function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
176
-
177
- function SvgMore(props) {
178
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$3$({
179
- viewBox: "0 0 16 16",
180
- strokeLinecap: "round",
181
- strokeLinejoin: "round",
182
- stroke: "currentColor",
183
- width: "1em",
184
- height: "1em",
185
- fill: "none"
186
- }, props), _path$3K || (_path$3K = /*#__PURE__*/React__namespace.createElement("path", {
187
- d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
188
- })));
189
- }
190
-
191
- var _path$2X;
192
-
193
- function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
194
-
195
- function SvgChevronDown(props) {
196
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$3b({
197
- viewBox: "0 0 16 16",
198
- strokeLinecap: "round",
199
- strokeLinejoin: "round",
200
- stroke: "currentColor",
201
- width: "1em",
202
- height: "1em",
203
- fill: "none"
204
- }, props), _path$2X || (_path$2X = /*#__PURE__*/React__namespace.createElement("path", {
205
- d: "M4 6l4 4 4-4"
206
- })));
207
- }
208
-
209
- var _path$2W;
210
-
211
- function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
212
-
213
- function SvgChevronUp(props) {
214
- return /*#__PURE__*/React__namespace.createElement("svg", _extends$3a({
215
- viewBox: "0 0 16 16",
216
- strokeLinecap: "round",
217
- strokeLinejoin: "round",
218
- stroke: "currentColor",
219
- width: "1em",
220
- height: "1em",
221
- fill: "none"
222
- }, props), _path$2W || (_path$2W = /*#__PURE__*/React__namespace.createElement("path", {
223
- d: "M12 10L8 6l-4 4"
224
- })));
225
160
  }
226
161
 
227
162
  var _path$1f;
@@ -1123,2249 +1058,6 @@ var Switch = React.forwardRef(function (props, ref) {
1123
1058
  });
1124
1059
  Switch.displayName = 'Switch';
1125
1060
 
1126
- let renderErr = 'Renderer Error ☝️';
1127
-
1128
- const actions = {
1129
- init: 'init',
1130
- };
1131
-
1132
- const defaultRenderer = ({ value = '' }) => value;
1133
- const emptyRenderer = () => <>&nbsp;</>;
1134
-
1135
- const defaultColumn = {
1136
- Cell: defaultRenderer,
1137
- width: 150,
1138
- minWidth: 0,
1139
- maxWidth: Number.MAX_SAFE_INTEGER,
1140
- };
1141
-
1142
- function mergeProps(...propList) {
1143
- return propList.reduce((props, next) => {
1144
- const { style, className, ...rest } = next;
1145
-
1146
- props = {
1147
- ...props,
1148
- ...rest,
1149
- };
1150
-
1151
- if (style) {
1152
- props.style = props.style
1153
- ? { ...(props.style || {}), ...(style || {}) }
1154
- : style;
1155
- }
1156
-
1157
- if (className) {
1158
- props.className = props.className
1159
- ? props.className + ' ' + className
1160
- : className;
1161
- }
1162
-
1163
- if (props.className === '') {
1164
- delete props.className;
1165
- }
1166
-
1167
- return props
1168
- }, {})
1169
- }
1170
-
1171
- function handlePropGetter(prevProps, userProps, meta) {
1172
- // Handle a lambda, pass it the previous props
1173
- if (typeof userProps === 'function') {
1174
- return handlePropGetter({}, userProps(prevProps, meta))
1175
- }
1176
-
1177
- // Handle an array, merge each item as separate props
1178
- if (Array.isArray(userProps)) {
1179
- return mergeProps(prevProps, ...userProps)
1180
- }
1181
-
1182
- // Handle an object by default, merge the two objects
1183
- return mergeProps(prevProps, userProps)
1184
- }
1185
-
1186
- const makePropGetter = (hooks, meta = {}) => {
1187
- return (userProps = {}) =>
1188
- [...hooks, userProps].reduce(
1189
- (prev, next) =>
1190
- handlePropGetter(prev, next, {
1191
- ...meta,
1192
- userProps,
1193
- }),
1194
- {}
1195
- )
1196
- };
1197
-
1198
- const reduceHooks = (hooks, initial, meta = {}, allowUndefined) =>
1199
- hooks.reduce((prev, next) => {
1200
- const nextValue = next(prev, meta);
1201
- if (process.env.NODE_ENV !== 'production') {
1202
- if (!allowUndefined && typeof nextValue === 'undefined') {
1203
- console.info(next);
1204
- throw new Error(
1205
- 'React Table: A reducer hook ☝️ just returned undefined! This is not allowed.'
1206
- )
1207
- }
1208
- }
1209
- return nextValue
1210
- }, initial);
1211
-
1212
- const loopHooks = (hooks, context, meta = {}) =>
1213
- hooks.forEach(hook => {
1214
- const nextValue = hook(context, meta);
1215
- if (process.env.NODE_ENV !== 'production') {
1216
- if (typeof nextValue !== 'undefined') {
1217
- console.info(hook, nextValue);
1218
- throw new Error(
1219
- 'React Table: A loop-type hook ☝️ just returned a value! This is not allowed.'
1220
- )
1221
- }
1222
- }
1223
- });
1224
-
1225
- function ensurePluginOrder(plugins, befores, pluginName, afters) {
1226
- if (process.env.NODE_ENV !== 'production' && afters) {
1227
- throw new Error(
1228
- `Defining plugins in the "after" section of ensurePluginOrder is no longer supported (see plugin ${pluginName})`
1229
- )
1230
- }
1231
- const pluginIndex = plugins.findIndex(
1232
- plugin => plugin.pluginName === pluginName
1233
- );
1234
-
1235
- if (pluginIndex === -1) {
1236
- if (process.env.NODE_ENV !== 'production') {
1237
- throw new Error(`The plugin "${pluginName}" was not found in the plugin list!
1238
- This usually means you need to need to name your plugin hook by setting the 'pluginName' property of the hook function, eg:
1239
-
1240
- ${pluginName}.pluginName = '${pluginName}'
1241
- `)
1242
- }
1243
- }
1244
-
1245
- befores.forEach(before => {
1246
- const beforeIndex = plugins.findIndex(
1247
- plugin => plugin.pluginName === before
1248
- );
1249
- if (beforeIndex > -1 && beforeIndex > pluginIndex) {
1250
- if (process.env.NODE_ENV !== 'production') {
1251
- throw new Error(
1252
- `React Table: The ${pluginName} plugin hook must be placed after the ${before} plugin hook!`
1253
- )
1254
- }
1255
- }
1256
- });
1257
- }
1258
-
1259
- function functionalUpdate(updater, old) {
1260
- return typeof updater === 'function' ? updater(old) : updater
1261
- }
1262
-
1263
- function useGetLatest(obj) {
1264
- const ref = React__default['default'].useRef();
1265
- ref.current = obj;
1266
-
1267
- return React__default['default'].useCallback(() => ref.current, [])
1268
- }
1269
-
1270
- // SSR has issues with useLayoutEffect still, so use useEffect during SSR
1271
- const safeUseLayoutEffect =
1272
- typeof document !== 'undefined' ? React__default['default'].useLayoutEffect : React__default['default'].useEffect;
1273
-
1274
- function useMountedLayoutEffect(fn, deps) {
1275
- const mountedRef = React__default['default'].useRef(false);
1276
-
1277
- safeUseLayoutEffect(() => {
1278
- if (mountedRef.current) {
1279
- fn();
1280
- }
1281
- mountedRef.current = true;
1282
- // eslint-disable-next-line
1283
- }, deps);
1284
- }
1285
-
1286
- function makeRenderer(instance, column, meta = {}) {
1287
- return (type, userProps = {}) => {
1288
- const Comp = typeof type === 'string' ? column[type] : type;
1289
-
1290
- if (typeof Comp === 'undefined') {
1291
- console.info(column);
1292
- throw new Error(renderErr)
1293
- }
1294
-
1295
- return flexRender(Comp, { ...instance, column, ...meta, ...userProps })
1296
- }
1297
- }
1298
-
1299
- function flexRender(Comp, props) {
1300
- return isReactComponent(Comp) ? <Comp {...props} /> : Comp
1301
- }
1302
-
1303
- function isReactComponent(component) {
1304
- return (
1305
- isClassComponent(component) ||
1306
- typeof component === 'function' ||
1307
- isExoticComponent(component)
1308
- )
1309
- }
1310
-
1311
- function isClassComponent(component) {
1312
- return (
1313
- typeof component === 'function' &&
1314
- (() => {
1315
- const proto = Object.getPrototypeOf(component);
1316
- return proto.prototype && proto.prototype.isReactComponent
1317
- })()
1318
- )
1319
- }
1320
-
1321
- function isExoticComponent(component) {
1322
- return (
1323
- typeof component === 'object' &&
1324
- typeof component.$$typeof === 'symbol' &&
1325
- ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)
1326
- )
1327
- }
1328
-
1329
- // Build the visible columns, headers and flat column list
1330
- function linkColumnStructure(columns, parent, depth = 0) {
1331
- return columns.map(column => {
1332
- column = {
1333
- ...column,
1334
- parent,
1335
- depth,
1336
- };
1337
-
1338
- assignColumnAccessor(column);
1339
-
1340
- if (column.columns) {
1341
- column.columns = linkColumnStructure(column.columns, column, depth + 1);
1342
- }
1343
- return column
1344
- })
1345
- }
1346
-
1347
- function flattenColumns(columns) {
1348
- return flattenBy(columns, 'columns')
1349
- }
1350
-
1351
- function assignColumnAccessor(column) {
1352
- // First check for string accessor
1353
- let { id, accessor, Header } = column;
1354
-
1355
- if (typeof accessor === 'string') {
1356
- id = id || accessor;
1357
- const accessorPath = accessor.split('.');
1358
- accessor = row => getBy(row, accessorPath);
1359
- }
1360
-
1361
- if (!id && typeof Header === 'string' && Header) {
1362
- id = Header;
1363
- }
1364
-
1365
- if (!id && column.columns) {
1366
- console.error(column);
1367
- throw new Error('A column ID (or unique "Header" value) is required!')
1368
- }
1369
-
1370
- if (!id) {
1371
- console.error(column);
1372
- throw new Error('A column ID (or string accessor) is required!')
1373
- }
1374
-
1375
- Object.assign(column, {
1376
- id,
1377
- accessor,
1378
- });
1379
-
1380
- return column
1381
- }
1382
-
1383
- function decorateColumn(column, userDefaultColumn) {
1384
- if (!userDefaultColumn) {
1385
- throw new Error()
1386
- }
1387
- Object.assign(column, {
1388
- // Make sure there is a fallback header, just in case
1389
- Header: emptyRenderer,
1390
- Footer: emptyRenderer,
1391
- ...defaultColumn,
1392
- ...userDefaultColumn,
1393
- ...column,
1394
- });
1395
-
1396
- Object.assign(column, {
1397
- originalWidth: column.width,
1398
- });
1399
-
1400
- return column
1401
- }
1402
-
1403
- // Build the header groups from the bottom up
1404
- function makeHeaderGroups(
1405
- allColumns,
1406
- defaultColumn,
1407
- additionalHeaderProperties = () => ({})
1408
- ) {
1409
- const headerGroups = [];
1410
-
1411
- let scanColumns = allColumns;
1412
-
1413
- let uid = 0;
1414
- const getUID = () => uid++;
1415
-
1416
- while (scanColumns.length) {
1417
- // The header group we are creating
1418
- const headerGroup = {
1419
- headers: [],
1420
- };
1421
-
1422
- // The parent columns we're going to scan next
1423
- const parentColumns = [];
1424
-
1425
- const hasParents = scanColumns.some(d => d.parent);
1426
-
1427
- // Scan each column for parents
1428
- scanColumns.forEach(column => {
1429
- // What is the latest (last) parent column?
1430
- let latestParentColumn = [...parentColumns].reverse()[0];
1431
-
1432
- let newParent;
1433
-
1434
- if (hasParents) {
1435
- // If the column has a parent, add it if necessary
1436
- if (column.parent) {
1437
- newParent = {
1438
- ...column.parent,
1439
- originalId: column.parent.id,
1440
- id: `${column.parent.id}_${getUID()}`,
1441
- headers: [column],
1442
- ...additionalHeaderProperties(column),
1443
- };
1444
- } else {
1445
- // If other columns have parents, we'll need to add a place holder if necessary
1446
- const originalId = `${column.id}_placeholder`;
1447
- newParent = decorateColumn(
1448
- {
1449
- originalId,
1450
- id: `${column.id}_placeholder_${getUID()}`,
1451
- placeholderOf: column,
1452
- headers: [column],
1453
- ...additionalHeaderProperties(column),
1454
- },
1455
- defaultColumn
1456
- );
1457
- }
1458
-
1459
- // If the resulting parent columns are the same, just add
1460
- // the column and increment the header span
1461
- if (
1462
- latestParentColumn &&
1463
- latestParentColumn.originalId === newParent.originalId
1464
- ) {
1465
- latestParentColumn.headers.push(column);
1466
- } else {
1467
- parentColumns.push(newParent);
1468
- }
1469
- }
1470
-
1471
- headerGroup.headers.push(column);
1472
- });
1473
-
1474
- headerGroups.push(headerGroup);
1475
-
1476
- // Start scanning the parent columns
1477
- scanColumns = parentColumns;
1478
- }
1479
-
1480
- return headerGroups.reverse()
1481
- }
1482
-
1483
- const pathObjCache = new Map();
1484
-
1485
- function getBy(obj, path, def) {
1486
- if (!path) {
1487
- return obj
1488
- }
1489
- const cacheKey = typeof path === 'function' ? path : JSON.stringify(path);
1490
-
1491
- const pathObj =
1492
- pathObjCache.get(cacheKey) ||
1493
- (() => {
1494
- const pathObj = makePathArray(path);
1495
- pathObjCache.set(cacheKey, pathObj);
1496
- return pathObj
1497
- })();
1498
-
1499
- let val;
1500
-
1501
- try {
1502
- val = pathObj.reduce((cursor, pathPart) => cursor[pathPart], obj);
1503
- } catch (e) {
1504
- // continue regardless of error
1505
- }
1506
- return typeof val !== 'undefined' ? val : def
1507
- }
1508
-
1509
- function getFirstDefined(...args) {
1510
- for (let i = 0; i < args.length; i += 1) {
1511
- if (typeof args[i] !== 'undefined') {
1512
- return args[i]
1513
- }
1514
- }
1515
- }
1516
-
1517
- function isFunction(a) {
1518
- if (typeof a === 'function') {
1519
- return a
1520
- }
1521
- }
1522
-
1523
- function flattenBy(arr, key) {
1524
- const flat = [];
1525
-
1526
- const recurse = arr => {
1527
- arr.forEach(d => {
1528
- if (!d[key]) {
1529
- flat.push(d);
1530
- } else {
1531
- recurse(d[key]);
1532
- }
1533
- });
1534
- };
1535
-
1536
- recurse(arr);
1537
-
1538
- return flat
1539
- }
1540
-
1541
- function expandRows(
1542
- rows,
1543
- { manualExpandedKey, expanded, expandSubRows = true }
1544
- ) {
1545
- const expandedRows = [];
1546
-
1547
- const handleRow = (row, addToExpandedRows = true) => {
1548
- row.isExpanded =
1549
- (row.original && row.original[manualExpandedKey]) || expanded[row.id];
1550
-
1551
- row.canExpand = row.subRows && !!row.subRows.length;
1552
-
1553
- if (addToExpandedRows) {
1554
- expandedRows.push(row);
1555
- }
1556
-
1557
- if (row.subRows && row.subRows.length && row.isExpanded) {
1558
- row.subRows.forEach(row => handleRow(row, expandSubRows));
1559
- }
1560
- };
1561
-
1562
- rows.forEach(row => handleRow(row));
1563
-
1564
- return expandedRows
1565
- }
1566
-
1567
- function unpreparedAccessWarning() {
1568
- throw new Error(
1569
- 'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
1570
- )
1571
- }
1572
-
1573
- //
1574
-
1575
- const reOpenBracket = /\[/g;
1576
- const reCloseBracket = /\]/g;
1577
-
1578
- function makePathArray(obj) {
1579
- return (
1580
- flattenDeep(obj)
1581
- // remove all periods in parts
1582
- .map(d => String(d).replace('.', '_'))
1583
- // join parts using period
1584
- .join('.')
1585
- // replace brackets with periods
1586
- .replace(reOpenBracket, '.')
1587
- .replace(reCloseBracket, '')
1588
- // split it back out on periods
1589
- .split('.')
1590
- )
1591
- }
1592
-
1593
- function flattenDeep(arr, newArr = []) {
1594
- if (!Array.isArray(arr)) {
1595
- newArr.push(arr);
1596
- } else {
1597
- for (let i = 0; i < arr.length; i += 1) {
1598
- flattenDeep(arr[i], newArr);
1599
- }
1600
- }
1601
- return newArr
1602
- }
1603
-
1604
- const defaultGetTableProps = props => ({
1605
- role: 'table',
1606
- ...props,
1607
- });
1608
-
1609
- const defaultGetTableBodyProps = props => ({
1610
- role: 'rowgroup',
1611
- ...props,
1612
- });
1613
-
1614
- const defaultGetHeaderProps = (props, { column }) => ({
1615
- key: `header_${column.id}`,
1616
- colSpan: column.totalVisibleHeaderCount,
1617
- role: 'columnheader',
1618
- ...props,
1619
- });
1620
-
1621
- const defaultGetFooterProps = (props, { column }) => ({
1622
- key: `footer_${column.id}`,
1623
- colSpan: column.totalVisibleHeaderCount,
1624
- ...props,
1625
- });
1626
-
1627
- const defaultGetHeaderGroupProps = (props, { index }) => ({
1628
- key: `headerGroup_${index}`,
1629
- role: 'row',
1630
- ...props,
1631
- });
1632
-
1633
- const defaultGetFooterGroupProps = (props, { index }) => ({
1634
- key: `footerGroup_${index}`,
1635
- ...props,
1636
- });
1637
-
1638
- const defaultGetRowProps = (props, { row }) => ({
1639
- key: `row_${row.id}`,
1640
- role: 'row',
1641
- ...props,
1642
- });
1643
-
1644
- const defaultGetCellProps = (props, { cell }) => ({
1645
- key: `cell_${cell.row.id}_${cell.column.id}`,
1646
- role: 'cell',
1647
- ...props,
1648
- });
1649
-
1650
- function makeDefaultPluginHooks() {
1651
- return {
1652
- useOptions: [],
1653
- stateReducers: [],
1654
- useControlledState: [],
1655
- columns: [],
1656
- columnsDeps: [],
1657
- allColumns: [],
1658
- allColumnsDeps: [],
1659
- accessValue: [],
1660
- materializedColumns: [],
1661
- materializedColumnsDeps: [],
1662
- useInstanceAfterData: [],
1663
- visibleColumns: [],
1664
- visibleColumnsDeps: [],
1665
- headerGroups: [],
1666
- headerGroupsDeps: [],
1667
- useInstanceBeforeDimensions: [],
1668
- useInstance: [],
1669
- prepareRow: [],
1670
- getTableProps: [defaultGetTableProps],
1671
- getTableBodyProps: [defaultGetTableBodyProps],
1672
- getHeaderGroupProps: [defaultGetHeaderGroupProps],
1673
- getFooterGroupProps: [defaultGetFooterGroupProps],
1674
- getHeaderProps: [defaultGetHeaderProps],
1675
- getFooterProps: [defaultGetFooterProps],
1676
- getRowProps: [defaultGetRowProps],
1677
- getCellProps: [defaultGetCellProps],
1678
- useFinalInstance: [],
1679
- }
1680
- }
1681
-
1682
- actions.resetHiddenColumns = 'resetHiddenColumns';
1683
- actions.toggleHideColumn = 'toggleHideColumn';
1684
- actions.setHiddenColumns = 'setHiddenColumns';
1685
- actions.toggleHideAllColumns = 'toggleHideAllColumns';
1686
-
1687
- const useColumnVisibility = hooks => {
1688
- hooks.getToggleHiddenProps = [defaultGetToggleHiddenProps];
1689
- hooks.getToggleHideAllColumnsProps = [defaultGetToggleHideAllColumnsProps];
1690
-
1691
- hooks.stateReducers.push(reducer$2);
1692
- hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
1693
- hooks.headerGroupsDeps.push((deps, { instance }) => [
1694
- ...deps,
1695
- instance.state.hiddenColumns,
1696
- ]);
1697
- hooks.useInstance.push(useInstance$2);
1698
- };
1699
-
1700
- useColumnVisibility.pluginName = 'useColumnVisibility';
1701
-
1702
- const defaultGetToggleHiddenProps = (props, { column }) => [
1703
- props,
1704
- {
1705
- onChange: e => {
1706
- column.toggleHidden(!e.target.checked);
1707
- },
1708
- style: {
1709
- cursor: 'pointer',
1710
- },
1711
- checked: column.isVisible,
1712
- title: 'Toggle Column Visible',
1713
- },
1714
- ];
1715
-
1716
- const defaultGetToggleHideAllColumnsProps = (props, { instance }) => [
1717
- props,
1718
- {
1719
- onChange: e => {
1720
- instance.toggleHideAllColumns(!e.target.checked);
1721
- },
1722
- style: {
1723
- cursor: 'pointer',
1724
- },
1725
- checked: !instance.allColumnsHidden && !instance.state.hiddenColumns.length,
1726
- title: 'Toggle All Columns Hidden',
1727
- indeterminate:
1728
- !instance.allColumnsHidden && instance.state.hiddenColumns.length,
1729
- },
1730
- ];
1731
-
1732
- function reducer$2(state, action, previousState, instance) {
1733
- if (action.type === actions.init) {
1734
- return {
1735
- hiddenColumns: [],
1736
- ...state,
1737
- }
1738
- }
1739
-
1740
- if (action.type === actions.resetHiddenColumns) {
1741
- return {
1742
- ...state,
1743
- hiddenColumns: instance.initialState.hiddenColumns || [],
1744
- }
1745
- }
1746
-
1747
- if (action.type === actions.toggleHideColumn) {
1748
- const should =
1749
- typeof action.value !== 'undefined'
1750
- ? action.value
1751
- : !state.hiddenColumns.includes(action.columnId);
1752
-
1753
- const hiddenColumns = should
1754
- ? [...state.hiddenColumns, action.columnId]
1755
- : state.hiddenColumns.filter(d => d !== action.columnId);
1756
-
1757
- return {
1758
- ...state,
1759
- hiddenColumns,
1760
- }
1761
- }
1762
-
1763
- if (action.type === actions.setHiddenColumns) {
1764
- return {
1765
- ...state,
1766
- hiddenColumns: functionalUpdate(action.value, state.hiddenColumns),
1767
- }
1768
- }
1769
-
1770
- if (action.type === actions.toggleHideAllColumns) {
1771
- const shouldAll =
1772
- typeof action.value !== 'undefined'
1773
- ? action.value
1774
- : !state.hiddenColumns.length;
1775
-
1776
- return {
1777
- ...state,
1778
- hiddenColumns: shouldAll ? instance.allColumns.map(d => d.id) : [],
1779
- }
1780
- }
1781
- }
1782
-
1783
- function useInstanceBeforeDimensions(instance) {
1784
- const {
1785
- headers,
1786
- state: { hiddenColumns },
1787
- } = instance;
1788
-
1789
- const isMountedRef = React__default['default'].useRef(false);
1790
-
1791
- if (!isMountedRef.current) ;
1792
-
1793
- const handleColumn = (column, parentVisible) => {
1794
- column.isVisible = parentVisible && !hiddenColumns.includes(column.id);
1795
-
1796
- let totalVisibleHeaderCount = 0;
1797
-
1798
- if (column.headers && column.headers.length) {
1799
- column.headers.forEach(
1800
- subColumn =>
1801
- (totalVisibleHeaderCount += handleColumn(subColumn, column.isVisible))
1802
- );
1803
- } else {
1804
- totalVisibleHeaderCount = column.isVisible ? 1 : 0;
1805
- }
1806
-
1807
- column.totalVisibleHeaderCount = totalVisibleHeaderCount;
1808
-
1809
- return totalVisibleHeaderCount
1810
- };
1811
-
1812
- let totalVisibleHeaderCount = 0;
1813
-
1814
- headers.forEach(
1815
- subHeader => (totalVisibleHeaderCount += handleColumn(subHeader, true))
1816
- );
1817
- }
1818
-
1819
- function useInstance$2(instance) {
1820
- const {
1821
- columns,
1822
- flatHeaders,
1823
- dispatch,
1824
- allColumns,
1825
- getHooks,
1826
- state: { hiddenColumns },
1827
- autoResetHiddenColumns = true,
1828
- } = instance;
1829
-
1830
- const getInstance = useGetLatest(instance);
1831
-
1832
- const allColumnsHidden = allColumns.length === hiddenColumns.length;
1833
-
1834
- const toggleHideColumn = React__default['default'].useCallback(
1835
- (columnId, value) =>
1836
- dispatch({ type: actions.toggleHideColumn, columnId, value }),
1837
- [dispatch]
1838
- );
1839
-
1840
- const setHiddenColumns = React__default['default'].useCallback(
1841
- value => dispatch({ type: actions.setHiddenColumns, value }),
1842
- [dispatch]
1843
- );
1844
-
1845
- const toggleHideAllColumns = React__default['default'].useCallback(
1846
- value => dispatch({ type: actions.toggleHideAllColumns, value }),
1847
- [dispatch]
1848
- );
1849
-
1850
- const getToggleHideAllColumnsProps = makePropGetter(
1851
- getHooks().getToggleHideAllColumnsProps,
1852
- { instance: getInstance() }
1853
- );
1854
-
1855
- flatHeaders.forEach(column => {
1856
- column.toggleHidden = value => {
1857
- dispatch({
1858
- type: actions.toggleHideColumn,
1859
- columnId: column.id,
1860
- value,
1861
- });
1862
- };
1863
-
1864
- column.getToggleHiddenProps = makePropGetter(
1865
- getHooks().getToggleHiddenProps,
1866
- {
1867
- instance: getInstance(),
1868
- column,
1869
- }
1870
- );
1871
- });
1872
-
1873
- const getAutoResetHiddenColumns = useGetLatest(autoResetHiddenColumns);
1874
-
1875
- useMountedLayoutEffect(() => {
1876
- if (getAutoResetHiddenColumns()) {
1877
- dispatch({ type: actions.resetHiddenColumns });
1878
- }
1879
- }, [dispatch, columns]);
1880
-
1881
- Object.assign(instance, {
1882
- allColumnsHidden,
1883
- toggleHideColumn,
1884
- setHiddenColumns,
1885
- toggleHideAllColumns,
1886
- getToggleHideAllColumnsProps,
1887
- });
1888
- }
1889
-
1890
- const defaultInitialState = {};
1891
- const defaultColumnInstance = {};
1892
- const defaultReducer = (state, action, prevState) => state;
1893
- const defaultGetSubRows = (row, index) => row.subRows || [];
1894
- const defaultGetRowId = (row, index, parent) =>
1895
- `${parent ? [parent.id, index].join('.') : index}`;
1896
- const defaultUseControlledState = d => d;
1897
-
1898
- function applyDefaults(props) {
1899
- const {
1900
- initialState = defaultInitialState,
1901
- defaultColumn = defaultColumnInstance,
1902
- getSubRows = defaultGetSubRows,
1903
- getRowId = defaultGetRowId,
1904
- stateReducer = defaultReducer,
1905
- useControlledState = defaultUseControlledState,
1906
- ...rest
1907
- } = props;
1908
-
1909
- return {
1910
- ...rest,
1911
- initialState,
1912
- defaultColumn,
1913
- getSubRows,
1914
- getRowId,
1915
- stateReducer,
1916
- useControlledState,
1917
- }
1918
- }
1919
-
1920
- const useTable = (props, ...plugins) => {
1921
- // Apply default props
1922
- props = applyDefaults(props);
1923
-
1924
- // Add core plugins
1925
- plugins = [useColumnVisibility, ...plugins];
1926
-
1927
- // Create the table instance
1928
- let instanceRef = React__default['default'].useRef({});
1929
-
1930
- // Create a getter for the instance (helps avoid a lot of potential memory leaks)
1931
- const getInstance = useGetLatest(instanceRef.current);
1932
-
1933
- // Assign the props, plugins and hooks to the instance
1934
- Object.assign(getInstance(), {
1935
- ...props,
1936
- plugins,
1937
- hooks: makeDefaultPluginHooks(),
1938
- });
1939
-
1940
- // Allow plugins to register hooks as early as possible
1941
- plugins.filter(Boolean).forEach(plugin => {
1942
- plugin(getInstance().hooks);
1943
- });
1944
-
1945
- // Consume all hooks and make a getter for them
1946
- const getHooks = useGetLatest(getInstance().hooks);
1947
- getInstance().getHooks = getHooks;
1948
- delete getInstance().hooks;
1949
-
1950
- // Allow useOptions hooks to modify the options coming into the table
1951
- Object.assign(
1952
- getInstance(),
1953
- reduceHooks(getHooks().useOptions, applyDefaults(props))
1954
- );
1955
-
1956
- const {
1957
- data,
1958
- columns: userColumns,
1959
- initialState,
1960
- defaultColumn,
1961
- getSubRows,
1962
- getRowId,
1963
- stateReducer,
1964
- useControlledState,
1965
- } = getInstance();
1966
-
1967
- // Setup user reducer ref
1968
- const getStateReducer = useGetLatest(stateReducer);
1969
-
1970
- // Build the reducer
1971
- const reducer = React__default['default'].useCallback(
1972
- (state, action) => {
1973
- // Detect invalid actions
1974
- if (!action.type) {
1975
- console.info({ action });
1976
- throw new Error('Unknown Action 👆')
1977
- }
1978
-
1979
- // Reduce the state from all plugin reducers
1980
- return [
1981
- ...getHooks().stateReducers,
1982
- // Allow the user to add their own state reducer(s)
1983
- ...(Array.isArray(getStateReducer())
1984
- ? getStateReducer()
1985
- : [getStateReducer()]),
1986
- ].reduce(
1987
- (s, handler) => handler(s, action, state, getInstance()) || s,
1988
- state
1989
- )
1990
- },
1991
- [getHooks, getStateReducer, getInstance]
1992
- );
1993
-
1994
- // Start the reducer
1995
- const [reducerState, dispatch] = React__default['default'].useReducer(reducer, undefined, () =>
1996
- reducer(initialState, { type: actions.init })
1997
- );
1998
-
1999
- // Allow the user to control the final state with hooks
2000
- const state = reduceHooks(
2001
- [...getHooks().useControlledState, useControlledState],
2002
- reducerState,
2003
- { instance: getInstance() }
2004
- );
2005
-
2006
- Object.assign(getInstance(), {
2007
- state,
2008
- dispatch,
2009
- });
2010
-
2011
- // Decorate All the columns
2012
- const columns = React__default['default'].useMemo(
2013
- () =>
2014
- linkColumnStructure(
2015
- reduceHooks(getHooks().columns, userColumns, {
2016
- instance: getInstance(),
2017
- })
2018
- ),
2019
- [
2020
- getHooks,
2021
- getInstance,
2022
- userColumns,
2023
- // eslint-disable-next-line react-hooks/exhaustive-deps
2024
- ...reduceHooks(getHooks().columnsDeps, [], { instance: getInstance() }),
2025
- ]
2026
- );
2027
- getInstance().columns = columns;
2028
-
2029
- // Get the flat list of all columns and allow hooks to decorate
2030
- // those columns (and trigger this memoization via deps)
2031
- let allColumns = React__default['default'].useMemo(
2032
- () =>
2033
- reduceHooks(getHooks().allColumns, flattenColumns(columns), {
2034
- instance: getInstance(),
2035
- }).map(assignColumnAccessor),
2036
- [
2037
- columns,
2038
- getHooks,
2039
- getInstance,
2040
- // eslint-disable-next-line react-hooks/exhaustive-deps
2041
- ...reduceHooks(getHooks().allColumnsDeps, [], {
2042
- instance: getInstance(),
2043
- }),
2044
- ]
2045
- );
2046
- getInstance().allColumns = allColumns;
2047
-
2048
- // Access the row model using initial columns
2049
- const [rows, flatRows, rowsById] = React__default['default'].useMemo(() => {
2050
- let rows = [];
2051
- let flatRows = [];
2052
- const rowsById = {};
2053
-
2054
- const allColumnsQueue = [...allColumns];
2055
-
2056
- while (allColumnsQueue.length) {
2057
- const column = allColumnsQueue.shift();
2058
- accessRowsForColumn({
2059
- data,
2060
- rows,
2061
- flatRows,
2062
- rowsById,
2063
- column,
2064
- getRowId,
2065
- getSubRows,
2066
- accessValueHooks: getHooks().accessValue,
2067
- getInstance,
2068
- });
2069
- }
2070
-
2071
- return [rows, flatRows, rowsById]
2072
- }, [allColumns, data, getRowId, getSubRows, getHooks, getInstance]);
2073
-
2074
- Object.assign(getInstance(), {
2075
- rows,
2076
- initialRows: [...rows],
2077
- flatRows,
2078
- rowsById,
2079
- // materializedColumns,
2080
- });
2081
-
2082
- loopHooks(getHooks().useInstanceAfterData, getInstance());
2083
-
2084
- // Get the flat list of all columns AFTER the rows
2085
- // have been access, and allow hooks to decorate
2086
- // those columns (and trigger this memoization via deps)
2087
- let visibleColumns = React__default['default'].useMemo(
2088
- () =>
2089
- reduceHooks(getHooks().visibleColumns, allColumns, {
2090
- instance: getInstance(),
2091
- }).map(d => decorateColumn(d, defaultColumn)),
2092
- [
2093
- getHooks,
2094
- allColumns,
2095
- getInstance,
2096
- defaultColumn,
2097
- // eslint-disable-next-line react-hooks/exhaustive-deps
2098
- ...reduceHooks(getHooks().visibleColumnsDeps, [], {
2099
- instance: getInstance(),
2100
- }),
2101
- ]
2102
- );
2103
-
2104
- // Combine new visible columns with all columns
2105
- allColumns = React__default['default'].useMemo(() => {
2106
- const columns = [...visibleColumns];
2107
-
2108
- allColumns.forEach(column => {
2109
- if (!columns.find(d => d.id === column.id)) {
2110
- columns.push(column);
2111
- }
2112
- });
2113
-
2114
- return columns
2115
- }, [allColumns, visibleColumns]);
2116
- getInstance().allColumns = allColumns;
2117
-
2118
- if (process.env.NODE_ENV !== 'production') {
2119
- const duplicateColumns = allColumns.filter((column, i) => {
2120
- return allColumns.findIndex(d => d.id === column.id) !== i
2121
- });
2122
-
2123
- if (duplicateColumns.length) {
2124
- console.info(allColumns);
2125
- throw new Error(
2126
- `Duplicate columns were found with ids: "${duplicateColumns
2127
- .map(d => d.id)
2128
- .join(', ')}" in the columns array above`
2129
- )
2130
- }
2131
- }
2132
-
2133
- // Make the headerGroups
2134
- const headerGroups = React__default['default'].useMemo(
2135
- () =>
2136
- reduceHooks(
2137
- getHooks().headerGroups,
2138
- makeHeaderGroups(visibleColumns, defaultColumn),
2139
- getInstance()
2140
- ),
2141
- [
2142
- getHooks,
2143
- visibleColumns,
2144
- defaultColumn,
2145
- getInstance,
2146
- // eslint-disable-next-line react-hooks/exhaustive-deps
2147
- ...reduceHooks(getHooks().headerGroupsDeps, [], {
2148
- instance: getInstance(),
2149
- }),
2150
- ]
2151
- );
2152
- getInstance().headerGroups = headerGroups;
2153
-
2154
- // Get the first level of headers
2155
- const headers = React__default['default'].useMemo(
2156
- () => (headerGroups.length ? headerGroups[0].headers : []),
2157
- [headerGroups]
2158
- );
2159
- getInstance().headers = headers;
2160
-
2161
- // Provide a flat header list for utilities
2162
- getInstance().flatHeaders = headerGroups.reduce(
2163
- (all, headerGroup) => [...all, ...headerGroup.headers],
2164
- []
2165
- );
2166
-
2167
- loopHooks(getHooks().useInstanceBeforeDimensions, getInstance());
2168
-
2169
- // Filter columns down to visible ones
2170
- const visibleColumnsDep = visibleColumns
2171
- .filter(d => d.isVisible)
2172
- .map(d => d.id)
2173
- .sort()
2174
- .join('_');
2175
-
2176
- visibleColumns = React__default['default'].useMemo(
2177
- () => visibleColumns.filter(d => d.isVisible),
2178
- // eslint-disable-next-line react-hooks/exhaustive-deps
2179
- [visibleColumns, visibleColumnsDep]
2180
- );
2181
- getInstance().visibleColumns = visibleColumns;
2182
-
2183
- // Header Visibility is needed by this point
2184
- const [
2185
- totalColumnsMinWidth,
2186
- totalColumnsWidth,
2187
- totalColumnsMaxWidth,
2188
- ] = calculateHeaderWidths(headers);
2189
-
2190
- getInstance().totalColumnsMinWidth = totalColumnsMinWidth;
2191
- getInstance().totalColumnsWidth = totalColumnsWidth;
2192
- getInstance().totalColumnsMaxWidth = totalColumnsMaxWidth;
2193
-
2194
- loopHooks(getHooks().useInstance, getInstance())
2195
-
2196
- // Each materialized header needs to be assigned a render function and other
2197
- // prop getter properties here.
2198
- ;[...getInstance().flatHeaders, ...getInstance().allColumns].forEach(
2199
- column => {
2200
- // Give columns/headers rendering power
2201
- column.render = makeRenderer(getInstance(), column);
2202
-
2203
- // Give columns/headers a default getHeaderProps
2204
- column.getHeaderProps = makePropGetter(getHooks().getHeaderProps, {
2205
- instance: getInstance(),
2206
- column,
2207
- });
2208
-
2209
- // Give columns/headers a default getFooterProps
2210
- column.getFooterProps = makePropGetter(getHooks().getFooterProps, {
2211
- instance: getInstance(),
2212
- column,
2213
- });
2214
- }
2215
- );
2216
-
2217
- getInstance().headerGroups = React__default['default'].useMemo(
2218
- () =>
2219
- headerGroups.filter((headerGroup, i) => {
2220
- // Filter out any headers and headerGroups that don't have visible columns
2221
- headerGroup.headers = headerGroup.headers.filter(column => {
2222
- const recurse = headers =>
2223
- headers.filter(column => {
2224
- if (column.headers) {
2225
- return recurse(column.headers)
2226
- }
2227
- return column.isVisible
2228
- }).length;
2229
- if (column.headers) {
2230
- return recurse(column.headers)
2231
- }
2232
- return column.isVisible
2233
- });
2234
-
2235
- // Give headerGroups getRowProps
2236
- if (headerGroup.headers.length) {
2237
- headerGroup.getHeaderGroupProps = makePropGetter(
2238
- getHooks().getHeaderGroupProps,
2239
- { instance: getInstance(), headerGroup, index: i }
2240
- );
2241
-
2242
- headerGroup.getFooterGroupProps = makePropGetter(
2243
- getHooks().getFooterGroupProps,
2244
- { instance: getInstance(), headerGroup, index: i }
2245
- );
2246
-
2247
- return true
2248
- }
2249
-
2250
- return false
2251
- }),
2252
- [headerGroups, getInstance, getHooks]
2253
- );
2254
-
2255
- getInstance().footerGroups = [...getInstance().headerGroups].reverse();
2256
-
2257
- // The prepareRow function is absolutely necessary and MUST be called on
2258
- // any rows the user wishes to be displayed.
2259
-
2260
- getInstance().prepareRow = React__default['default'].useCallback(
2261
- row => {
2262
- row.getRowProps = makePropGetter(getHooks().getRowProps, {
2263
- instance: getInstance(),
2264
- row,
2265
- });
2266
-
2267
- // Build the visible cells for each row
2268
- row.allCells = allColumns.map(column => {
2269
- const value = row.values[column.id];
2270
-
2271
- const cell = {
2272
- column,
2273
- row,
2274
- value,
2275
- };
2276
-
2277
- // Give each cell a getCellProps base
2278
- cell.getCellProps = makePropGetter(getHooks().getCellProps, {
2279
- instance: getInstance(),
2280
- cell,
2281
- });
2282
-
2283
- // Give each cell a renderer function (supports multiple renderers)
2284
- cell.render = makeRenderer(getInstance(), column, {
2285
- row,
2286
- cell,
2287
- value,
2288
- });
2289
-
2290
- return cell
2291
- });
2292
-
2293
- row.cells = visibleColumns.map(column =>
2294
- row.allCells.find(cell => cell.column.id === column.id)
2295
- );
2296
-
2297
- // need to apply any row specific hooks (useExpanded requires this)
2298
- loopHooks(getHooks().prepareRow, row, { instance: getInstance() });
2299
- },
2300
- [getHooks, getInstance, allColumns, visibleColumns]
2301
- );
2302
-
2303
- getInstance().getTableProps = makePropGetter(getHooks().getTableProps, {
2304
- instance: getInstance(),
2305
- });
2306
-
2307
- getInstance().getTableBodyProps = makePropGetter(
2308
- getHooks().getTableBodyProps,
2309
- {
2310
- instance: getInstance(),
2311
- }
2312
- );
2313
-
2314
- loopHooks(getHooks().useFinalInstance, getInstance());
2315
-
2316
- return getInstance()
2317
- };
2318
-
2319
- function calculateHeaderWidths(headers, left = 0) {
2320
- let sumTotalMinWidth = 0;
2321
- let sumTotalWidth = 0;
2322
- let sumTotalMaxWidth = 0;
2323
- let sumTotalFlexWidth = 0;
2324
-
2325
- headers.forEach(header => {
2326
- let { headers: subHeaders } = header;
2327
-
2328
- header.totalLeft = left;
2329
-
2330
- if (subHeaders && subHeaders.length) {
2331
- const [
2332
- totalMinWidth,
2333
- totalWidth,
2334
- totalMaxWidth,
2335
- totalFlexWidth,
2336
- ] = calculateHeaderWidths(subHeaders, left);
2337
- header.totalMinWidth = totalMinWidth;
2338
- header.totalWidth = totalWidth;
2339
- header.totalMaxWidth = totalMaxWidth;
2340
- header.totalFlexWidth = totalFlexWidth;
2341
- } else {
2342
- header.totalMinWidth = header.minWidth;
2343
- header.totalWidth = Math.min(
2344
- Math.max(header.minWidth, header.width),
2345
- header.maxWidth
2346
- );
2347
- header.totalMaxWidth = header.maxWidth;
2348
- header.totalFlexWidth = header.canResize ? header.totalWidth : 0;
2349
- }
2350
- if (header.isVisible) {
2351
- left += header.totalWidth;
2352
- sumTotalMinWidth += header.totalMinWidth;
2353
- sumTotalWidth += header.totalWidth;
2354
- sumTotalMaxWidth += header.totalMaxWidth;
2355
- sumTotalFlexWidth += header.totalFlexWidth;
2356
- }
2357
- });
2358
-
2359
- return [sumTotalMinWidth, sumTotalWidth, sumTotalMaxWidth, sumTotalFlexWidth]
2360
- }
2361
-
2362
- function accessRowsForColumn({
2363
- data,
2364
- rows,
2365
- flatRows,
2366
- rowsById,
2367
- column,
2368
- getRowId,
2369
- getSubRows,
2370
- accessValueHooks,
2371
- getInstance,
2372
- }) {
2373
- // Access the row's data column-by-column
2374
- // We do it this way so we can incrementally add materialized
2375
- // columns after the first pass and avoid excessive looping
2376
- const accessRow = (originalRow, rowIndex, depth = 0, parent, parentRows) => {
2377
- // Keep the original reference around
2378
- const original = originalRow;
2379
-
2380
- const id = getRowId(originalRow, rowIndex, parent);
2381
-
2382
- let row = rowsById[id];
2383
-
2384
- // If the row hasn't been created, let's make it
2385
- if (!row) {
2386
- row = {
2387
- id,
2388
- original,
2389
- index: rowIndex,
2390
- depth,
2391
- cells: [{}], // This is a dummy cell
2392
- };
2393
-
2394
- // Override common array functions (and the dummy cell's getCellProps function)
2395
- // to show an error if it is accessed without calling prepareRow
2396
- row.cells.map = unpreparedAccessWarning;
2397
- row.cells.filter = unpreparedAccessWarning;
2398
- row.cells.forEach = unpreparedAccessWarning;
2399
- row.cells[0].getCellProps = unpreparedAccessWarning;
2400
-
2401
- // Create the cells and values
2402
- row.values = {};
2403
-
2404
- // Push this row into the parentRows array
2405
- parentRows.push(row);
2406
- // Keep track of every row in a flat array
2407
- flatRows.push(row);
2408
- // Also keep track of every row by its ID
2409
- rowsById[id] = row;
2410
-
2411
- // Get the original subrows
2412
- row.originalSubRows = getSubRows(originalRow, rowIndex);
2413
-
2414
- // Then recursively access them
2415
- if (row.originalSubRows) {
2416
- const subRows = [];
2417
- row.originalSubRows.forEach((d, i) =>
2418
- accessRow(d, i, depth + 1, row, subRows)
2419
- );
2420
- // Keep the new subRows array on the row
2421
- row.subRows = subRows;
2422
- }
2423
- } else if (row.subRows) {
2424
- // If the row exists, then it's already been accessed
2425
- // Keep recursing, but don't worry about passing the
2426
- // accumlator array (those rows already exist)
2427
- row.originalSubRows.forEach((d, i) => accessRow(d, i, depth + 1, row));
2428
- }
2429
-
2430
- // If the column has an accessor, use it to get a value
2431
- if (column.accessor) {
2432
- row.values[column.id] = column.accessor(
2433
- originalRow,
2434
- rowIndex,
2435
- row,
2436
- parentRows,
2437
- data
2438
- );
2439
- }
2440
-
2441
- // Allow plugins to manipulate the column value
2442
- row.values[column.id] = reduceHooks(
2443
- accessValueHooks,
2444
- row.values[column.id],
2445
- {
2446
- row,
2447
- column,
2448
- instance: getInstance(),
2449
- },
2450
- true
2451
- );
2452
- };
2453
-
2454
- data.forEach((originalRow, rowIndex) =>
2455
- accessRow(originalRow, rowIndex, 0, undefined, rows)
2456
- );
2457
- }
2458
-
2459
- const pluginName = 'usePagination';
2460
-
2461
- // Actions
2462
- actions.resetPage = 'resetPage';
2463
- actions.gotoPage = 'gotoPage';
2464
- actions.setPageSize = 'setPageSize';
2465
-
2466
- const usePagination = hooks => {
2467
- hooks.stateReducers.push(reducer$1);
2468
- hooks.useInstance.push(useInstance$1);
2469
- };
2470
-
2471
- usePagination.pluginName = pluginName;
2472
-
2473
- function reducer$1(state, action, previousState, instance) {
2474
- if (action.type === actions.init) {
2475
- return {
2476
- pageSize: 10,
2477
- pageIndex: 0,
2478
- ...state,
2479
- }
2480
- }
2481
-
2482
- if (action.type === actions.resetPage) {
2483
- return {
2484
- ...state,
2485
- pageIndex: instance.initialState.pageIndex || 0,
2486
- }
2487
- }
2488
-
2489
- if (action.type === actions.gotoPage) {
2490
- const { pageCount, page } = instance;
2491
- const newPageIndex = functionalUpdate(action.pageIndex, state.pageIndex);
2492
- let canNavigate = false;
2493
-
2494
- if (newPageIndex > state.pageIndex) {
2495
- // next page
2496
- canNavigate =
2497
- pageCount === -1
2498
- ? page.length >= state.pageSize
2499
- : newPageIndex < pageCount;
2500
- } else if (newPageIndex < state.pageIndex) {
2501
- // prev page
2502
- canNavigate = newPageIndex > -1;
2503
- }
2504
-
2505
- if (!canNavigate) {
2506
- return state
2507
- }
2508
-
2509
- return {
2510
- ...state,
2511
- pageIndex: newPageIndex,
2512
- }
2513
- }
2514
-
2515
- if (action.type === actions.setPageSize) {
2516
- const { pageSize } = action;
2517
- const topRowIndex = state.pageSize * state.pageIndex;
2518
- const pageIndex = Math.floor(topRowIndex / pageSize);
2519
-
2520
- return {
2521
- ...state,
2522
- pageIndex,
2523
- pageSize,
2524
- }
2525
- }
2526
- }
2527
-
2528
- function useInstance$1(instance) {
2529
- const {
2530
- rows,
2531
- autoResetPage = true,
2532
- manualExpandedKey = 'expanded',
2533
- plugins,
2534
- pageCount: userPageCount,
2535
- paginateExpandedRows = true,
2536
- expandSubRows = true,
2537
- state: {
2538
- pageSize,
2539
- pageIndex,
2540
- expanded,
2541
- globalFilter,
2542
- filters,
2543
- groupBy,
2544
- sortBy,
2545
- },
2546
- dispatch,
2547
- data,
2548
- manualPagination,
2549
- } = instance;
2550
-
2551
- ensurePluginOrder(
2552
- plugins,
2553
- ['useGlobalFilter', 'useFilters', 'useGroupBy', 'useSortBy', 'useExpanded'],
2554
- 'usePagination'
2555
- );
2556
-
2557
- const getAutoResetPage = useGetLatest(autoResetPage);
2558
-
2559
- useMountedLayoutEffect(() => {
2560
- if (getAutoResetPage()) {
2561
- dispatch({ type: actions.resetPage });
2562
- }
2563
- }, [
2564
- dispatch,
2565
- manualPagination ? null : data,
2566
- globalFilter,
2567
- filters,
2568
- groupBy,
2569
- sortBy,
2570
- ]);
2571
-
2572
- const pageCount = manualPagination
2573
- ? userPageCount
2574
- : Math.ceil(rows.length / pageSize);
2575
-
2576
- const pageOptions = React__default['default'].useMemo(
2577
- () =>
2578
- pageCount > 0
2579
- ? [...new Array(pageCount)].fill(null).map((d, i) => i)
2580
- : [],
2581
- [pageCount]
2582
- );
2583
-
2584
- const page = React__default['default'].useMemo(() => {
2585
- let page;
2586
-
2587
- if (manualPagination) {
2588
- page = rows;
2589
- } else {
2590
- const pageStart = pageSize * pageIndex;
2591
- const pageEnd = pageStart + pageSize;
2592
-
2593
- page = rows.slice(pageStart, pageEnd);
2594
- }
2595
-
2596
- if (paginateExpandedRows) {
2597
- return page
2598
- }
2599
-
2600
- return expandRows(page, { manualExpandedKey, expanded, expandSubRows })
2601
- }, [
2602
- expandSubRows,
2603
- expanded,
2604
- manualExpandedKey,
2605
- manualPagination,
2606
- pageIndex,
2607
- pageSize,
2608
- paginateExpandedRows,
2609
- rows,
2610
- ]);
2611
-
2612
- const canPreviousPage = pageIndex > 0;
2613
- const canNextPage =
2614
- pageCount === -1 ? page.length >= pageSize : pageIndex < pageCount - 1;
2615
-
2616
- const gotoPage = React__default['default'].useCallback(
2617
- pageIndex => {
2618
- dispatch({ type: actions.gotoPage, pageIndex });
2619
- },
2620
- [dispatch]
2621
- );
2622
-
2623
- const previousPage = React__default['default'].useCallback(() => {
2624
- return gotoPage(old => old - 1)
2625
- }, [gotoPage]);
2626
-
2627
- const nextPage = React__default['default'].useCallback(() => {
2628
- return gotoPage(old => old + 1)
2629
- }, [gotoPage]);
2630
-
2631
- const setPageSize = React__default['default'].useCallback(
2632
- pageSize => {
2633
- dispatch({ type: actions.setPageSize, pageSize });
2634
- },
2635
- [dispatch]
2636
- );
2637
-
2638
- Object.assign(instance, {
2639
- pageOptions,
2640
- pageCount,
2641
- page,
2642
- canPreviousPage,
2643
- canNextPage,
2644
- gotoPage,
2645
- previousPage,
2646
- nextPage,
2647
- setPageSize,
2648
- });
2649
- }
2650
-
2651
- const reSplitAlphaNumeric = /([0-9]+)/gm;
2652
-
2653
- // Mixed sorting is slow, but very inclusive of many edge cases.
2654
- // It handles numbers, mixed alphanumeric combinations, and even
2655
- // null, undefined, and Infinity
2656
- const alphanumeric = (rowA, rowB, columnId) => {
2657
- let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
2658
-
2659
- // Force to strings (or "" for unsupported types)
2660
- a = toString(a);
2661
- b = toString(b);
2662
-
2663
- // Split on number groups, but keep the delimiter
2664
- // Then remove falsey split values
2665
- a = a.split(reSplitAlphaNumeric).filter(Boolean);
2666
- b = b.split(reSplitAlphaNumeric).filter(Boolean);
2667
-
2668
- // While
2669
- while (a.length && b.length) {
2670
- let aa = a.shift();
2671
- let bb = b.shift();
2672
-
2673
- const an = parseInt(aa, 10);
2674
- const bn = parseInt(bb, 10);
2675
-
2676
- const combo = [an, bn].sort();
2677
-
2678
- // Both are string
2679
- if (isNaN(combo[0])) {
2680
- if (aa > bb) {
2681
- return 1
2682
- }
2683
- if (bb > aa) {
2684
- return -1
2685
- }
2686
- continue
2687
- }
2688
-
2689
- // One is a string, one is a number
2690
- if (isNaN(combo[1])) {
2691
- return isNaN(an) ? -1 : 1
2692
- }
2693
-
2694
- // Both are numbers
2695
- if (an > bn) {
2696
- return 1
2697
- }
2698
- if (bn > an) {
2699
- return -1
2700
- }
2701
- }
2702
-
2703
- return a.length - b.length
2704
- };
2705
- function datetime(rowA, rowB, columnId) {
2706
- let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
2707
-
2708
- a = a.getTime();
2709
- b = b.getTime();
2710
-
2711
- return compareBasic(a, b)
2712
- }
2713
-
2714
- function basic(rowA, rowB, columnId) {
2715
- let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
2716
-
2717
- return compareBasic(a, b)
2718
- }
2719
-
2720
- function string(rowA, rowB, columnId) {
2721
- let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
2722
-
2723
- a = a.split('').filter(Boolean);
2724
- b = b.split('').filter(Boolean);
2725
-
2726
- while (a.length && b.length) {
2727
- let aa = a.shift();
2728
- let bb = b.shift();
2729
-
2730
- let alower = aa.toLowerCase();
2731
- let blower = bb.toLowerCase();
2732
-
2733
- // Case insensitive comparison until characters match
2734
- if (alower > blower) {
2735
- return 1
2736
- }
2737
- if (blower > alower) {
2738
- return -1
2739
- }
2740
- // If lowercase characters are identical
2741
- if (aa > bb) {
2742
- return 1
2743
- }
2744
- if (bb > aa) {
2745
- return -1
2746
- }
2747
- continue
2748
- }
2749
-
2750
- return a.length - b.length
2751
- }
2752
-
2753
- function number(rowA, rowB, columnId) {
2754
- let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
2755
-
2756
- const replaceNonNumeric = /[^0-9.]/gi;
2757
-
2758
- a = Number(String(a).replace(replaceNonNumeric, ''));
2759
- b = Number(String(b).replace(replaceNonNumeric, ''));
2760
-
2761
- return compareBasic(a, b)
2762
- }
2763
-
2764
- // Utils
2765
-
2766
- function compareBasic(a, b) {
2767
- return a === b ? 0 : a > b ? 1 : -1
2768
- }
2769
-
2770
- function getRowValuesByColumnID(row1, row2, columnId) {
2771
- return [row1.values[columnId], row2.values[columnId]]
2772
- }
2773
-
2774
- function toString(a) {
2775
- if (typeof a === 'number') {
2776
- if (isNaN(a) || a === Infinity || a === -Infinity) {
2777
- return ''
2778
- }
2779
- return String(a)
2780
- }
2781
- if (typeof a === 'string') {
2782
- return a
2783
- }
2784
- return ''
2785
- }
2786
-
2787
- var sortTypes = /*#__PURE__*/Object.freeze({
2788
- __proto__: null,
2789
- alphanumeric: alphanumeric,
2790
- datetime: datetime,
2791
- basic: basic,
2792
- string: string,
2793
- number: number
2794
- });
2795
-
2796
- // Actions
2797
- actions.resetSortBy = 'resetSortBy';
2798
- actions.setSortBy = 'setSortBy';
2799
- actions.toggleSortBy = 'toggleSortBy';
2800
- actions.clearSortBy = 'clearSortBy';
2801
-
2802
- defaultColumn.sortType = 'alphanumeric';
2803
- defaultColumn.sortDescFirst = false;
2804
-
2805
- const useSortBy = hooks => {
2806
- hooks.getSortByToggleProps = [defaultGetSortByToggleProps];
2807
- hooks.stateReducers.push(reducer);
2808
- hooks.useInstance.push(useInstance);
2809
- };
2810
-
2811
- useSortBy.pluginName = 'useSortBy';
2812
-
2813
- const defaultGetSortByToggleProps = (props, { instance, column }) => {
2814
- const { isMultiSortEvent = e => e.shiftKey } = instance;
2815
-
2816
- return [
2817
- props,
2818
- {
2819
- onClick: column.canSort
2820
- ? e => {
2821
- e.persist();
2822
- column.toggleSortBy(
2823
- undefined,
2824
- !instance.disableMultiSort && isMultiSortEvent(e)
2825
- );
2826
- }
2827
- : undefined,
2828
- style: {
2829
- cursor: column.canSort ? 'pointer' : undefined,
2830
- },
2831
- title: column.canSort ? 'Toggle SortBy' : undefined,
2832
- },
2833
- ]
2834
- };
2835
-
2836
- // Reducer
2837
- function reducer(state, action, previousState, instance) {
2838
- if (action.type === actions.init) {
2839
- return {
2840
- sortBy: [],
2841
- ...state,
2842
- }
2843
- }
2844
-
2845
- if (action.type === actions.resetSortBy) {
2846
- return {
2847
- ...state,
2848
- sortBy: instance.initialState.sortBy || [],
2849
- }
2850
- }
2851
-
2852
- if (action.type === actions.clearSortBy) {
2853
- const { sortBy } = state;
2854
- const newSortBy = sortBy.filter(d => d.id !== action.columnId);
2855
-
2856
- return {
2857
- ...state,
2858
- sortBy: newSortBy,
2859
- }
2860
- }
2861
-
2862
- if (action.type === actions.setSortBy) {
2863
- const { sortBy } = action;
2864
- return {
2865
- ...state,
2866
- sortBy,
2867
- }
2868
- }
2869
-
2870
- if (action.type === actions.toggleSortBy) {
2871
- const { columnId, desc, multi } = action;
2872
-
2873
- const {
2874
- allColumns,
2875
- disableMultiSort,
2876
- disableSortRemove,
2877
- disableMultiRemove,
2878
- maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
2879
- } = instance;
2880
-
2881
- const { sortBy } = state;
2882
-
2883
- // Find the column for this columnId
2884
- const column = allColumns.find(d => d.id === columnId);
2885
- const { sortDescFirst } = column;
2886
-
2887
- // Find any existing sortBy for this column
2888
- const existingSortBy = sortBy.find(d => d.id === columnId);
2889
- const existingIndex = sortBy.findIndex(d => d.id === columnId);
2890
- const hasDescDefined = typeof desc !== 'undefined' && desc !== null;
2891
-
2892
- let newSortBy = [];
2893
-
2894
- // What should we do with this sort action?
2895
- let sortAction;
2896
-
2897
- if (!disableMultiSort && multi) {
2898
- if (existingSortBy) {
2899
- sortAction = 'toggle';
2900
- } else {
2901
- sortAction = 'add';
2902
- }
2903
- } else {
2904
- // Normal mode
2905
- if (existingIndex !== sortBy.length - 1 || sortBy.length !== 1) {
2906
- sortAction = 'replace';
2907
- } else if (existingSortBy) {
2908
- sortAction = 'toggle';
2909
- } else {
2910
- sortAction = 'replace';
2911
- }
2912
- }
2913
-
2914
- // Handle toggle states that will remove the sortBy
2915
- if (
2916
- sortAction === 'toggle' && // Must be toggling
2917
- !disableSortRemove && // If disableSortRemove, disable in general
2918
- !hasDescDefined && // Must not be setting desc
2919
- (multi ? !disableMultiRemove : true) && // If multi, don't allow if disableMultiRemove
2920
- ((existingSortBy && // Finally, detect if it should indeed be removed
2921
- existingSortBy.desc &&
2922
- !sortDescFirst) ||
2923
- (!existingSortBy.desc && sortDescFirst))
2924
- ) {
2925
- sortAction = 'remove';
2926
- }
2927
-
2928
- if (sortAction === 'replace') {
2929
- newSortBy = [
2930
- {
2931
- id: columnId,
2932
- desc: hasDescDefined ? desc : sortDescFirst,
2933
- },
2934
- ];
2935
- } else if (sortAction === 'add') {
2936
- newSortBy = [
2937
- ...sortBy,
2938
- {
2939
- id: columnId,
2940
- desc: hasDescDefined ? desc : sortDescFirst,
2941
- },
2942
- ];
2943
- // Take latest n columns
2944
- newSortBy.splice(0, newSortBy.length - maxMultiSortColCount);
2945
- } else if (sortAction === 'toggle') {
2946
- // This flips (or sets) the
2947
- newSortBy = sortBy.map(d => {
2948
- if (d.id === columnId) {
2949
- return {
2950
- ...d,
2951
- desc: hasDescDefined ? desc : !existingSortBy.desc,
2952
- }
2953
- }
2954
- return d
2955
- });
2956
- } else if (sortAction === 'remove') {
2957
- newSortBy = sortBy.filter(d => d.id !== columnId);
2958
- }
2959
-
2960
- return {
2961
- ...state,
2962
- sortBy: newSortBy,
2963
- }
2964
- }
2965
- }
2966
-
2967
- function useInstance(instance) {
2968
- const {
2969
- data,
2970
- rows,
2971
- flatRows,
2972
- allColumns,
2973
- orderByFn = defaultOrderByFn,
2974
- sortTypes: userSortTypes,
2975
- manualSortBy,
2976
- defaultCanSort,
2977
- disableSortBy,
2978
- flatHeaders,
2979
- state: { sortBy },
2980
- dispatch,
2981
- plugins,
2982
- getHooks,
2983
- autoResetSortBy = true,
2984
- } = instance;
2985
-
2986
- ensurePluginOrder(
2987
- plugins,
2988
- ['useFilters', 'useGlobalFilter', 'useGroupBy', 'usePivotColumns'],
2989
- 'useSortBy'
2990
- );
2991
-
2992
- const setSortBy = React__default['default'].useCallback(
2993
- sortBy => {
2994
- dispatch({ type: actions.setSortBy, sortBy });
2995
- },
2996
- [dispatch]
2997
- );
2998
-
2999
- // Updates sorting based on a columnId, desc flag and multi flag
3000
- const toggleSortBy = React__default['default'].useCallback(
3001
- (columnId, desc, multi) => {
3002
- dispatch({ type: actions.toggleSortBy, columnId, desc, multi });
3003
- },
3004
- [dispatch]
3005
- );
3006
-
3007
- // use reference to avoid memory leak in #1608
3008
- const getInstance = useGetLatest(instance);
3009
-
3010
- // Add the getSortByToggleProps method to columns and headers
3011
- flatHeaders.forEach(column => {
3012
- const {
3013
- accessor,
3014
- canSort: defaultColumnCanSort,
3015
- disableSortBy: columnDisableSortBy,
3016
- id,
3017
- } = column;
3018
-
3019
- const canSort = accessor
3020
- ? getFirstDefined(
3021
- columnDisableSortBy === true ? false : undefined,
3022
- disableSortBy === true ? false : undefined,
3023
- true
3024
- )
3025
- : getFirstDefined(defaultCanSort, defaultColumnCanSort, false);
3026
-
3027
- column.canSort = canSort;
3028
-
3029
- if (column.canSort) {
3030
- column.toggleSortBy = (desc, multi) =>
3031
- toggleSortBy(column.id, desc, multi);
3032
-
3033
- column.clearSortBy = () => {
3034
- dispatch({ type: actions.clearSortBy, columnId: column.id });
3035
- };
3036
- }
3037
-
3038
- column.getSortByToggleProps = makePropGetter(
3039
- getHooks().getSortByToggleProps,
3040
- {
3041
- instance: getInstance(),
3042
- column,
3043
- }
3044
- );
3045
-
3046
- const columnSort = sortBy.find(d => d.id === id);
3047
- column.isSorted = !!columnSort;
3048
- column.sortedIndex = sortBy.findIndex(d => d.id === id);
3049
- column.isSortedDesc = column.isSorted ? columnSort.desc : undefined;
3050
- });
3051
-
3052
- const [sortedRows, sortedFlatRows] = React__default['default'].useMemo(() => {
3053
- if (manualSortBy || !sortBy.length) {
3054
- return [rows, flatRows]
3055
- }
3056
-
3057
- const sortedFlatRows = [];
3058
-
3059
- // Filter out sortBys that correspond to non existing columns
3060
- const availableSortBy = sortBy.filter(sort =>
3061
- allColumns.find(col => col.id === sort.id)
3062
- );
3063
-
3064
- const sortData = rows => {
3065
- // Use the orderByFn to compose multiple sortBy's together.
3066
- // This will also perform a stable sorting using the row index
3067
- // if needed.
3068
- const sortedData = orderByFn(
3069
- rows,
3070
- availableSortBy.map(sort => {
3071
- // Support custom sorting methods for each column
3072
- const column = allColumns.find(d => d.id === sort.id);
3073
-
3074
- if (!column) {
3075
- throw new Error(
3076
- `React-Table: Could not find a column with id: ${sort.id} while sorting`
3077
- )
3078
- }
3079
-
3080
- const { sortType } = column;
3081
-
3082
- // Look up sortBy functions in this order:
3083
- // column function
3084
- // column string lookup on user sortType
3085
- // column string lookup on built-in sortType
3086
- // default function
3087
- // default string lookup on user sortType
3088
- // default string lookup on built-in sortType
3089
- const sortMethod =
3090
- isFunction(sortType) ||
3091
- (userSortTypes || {})[sortType] ||
3092
- sortTypes[sortType];
3093
-
3094
- if (!sortMethod) {
3095
- throw new Error(
3096
- `React-Table: Could not find a valid sortType of '${sortType}' for column '${sort.id}'.`
3097
- )
3098
- }
3099
-
3100
- // Return the correct sortFn.
3101
- // This function should always return in ascending order
3102
- return (a, b) => sortMethod(a, b, sort.id, sort.desc)
3103
- }),
3104
- // Map the directions
3105
- availableSortBy.map(sort => {
3106
- // Detect and use the sortInverted option
3107
- const column = allColumns.find(d => d.id === sort.id);
3108
-
3109
- if (column && column.sortInverted) {
3110
- return sort.desc
3111
- }
3112
-
3113
- return !sort.desc
3114
- })
3115
- );
3116
-
3117
- // If there are sub-rows, sort them
3118
- sortedData.forEach(row => {
3119
- sortedFlatRows.push(row);
3120
- if (!row.subRows || row.subRows.length === 0) {
3121
- return
3122
- }
3123
- row.subRows = sortData(row.subRows);
3124
- });
3125
-
3126
- return sortedData
3127
- };
3128
-
3129
- return [sortData(rows), sortedFlatRows]
3130
- }, [
3131
- manualSortBy,
3132
- sortBy,
3133
- rows,
3134
- flatRows,
3135
- allColumns,
3136
- orderByFn,
3137
- userSortTypes,
3138
- ]);
3139
-
3140
- const getAutoResetSortBy = useGetLatest(autoResetSortBy);
3141
-
3142
- useMountedLayoutEffect(() => {
3143
- if (getAutoResetSortBy()) {
3144
- dispatch({ type: actions.resetSortBy });
3145
- }
3146
- }, [manualSortBy ? null : data]);
3147
-
3148
- Object.assign(instance, {
3149
- preSortedRows: rows,
3150
- preSortedFlatRows: flatRows,
3151
- sortedRows,
3152
- sortedFlatRows,
3153
- rows: sortedRows,
3154
- flatRows: sortedFlatRows,
3155
- setSortBy,
3156
- toggleSortBy,
3157
- });
3158
- }
3159
-
3160
- function defaultOrderByFn(arr, funcs, dirs) {
3161
- return [...arr].sort((rowA, rowB) => {
3162
- for (let i = 0; i < funcs.length; i += 1) {
3163
- const sortFn = funcs[i];
3164
- const desc = dirs[i] === false || dirs[i] === 'desc';
3165
- const sortInt = sortFn(rowA, rowB);
3166
- if (sortInt !== 0) {
3167
- return desc ? -sortInt : sortInt
3168
- }
3169
- }
3170
- return dirs[0] ? rowA.index - rowB.index : rowB.index - rowA.index
3171
- })
3172
- }
3173
-
3174
- var TableFooter = function (props) {
3175
- return (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
3176
- };
3177
-
3178
- var TableHeader = function (props) {
3179
- var children = props.children, restProps = __rest(props, ["children"]);
3180
- return React__default['default'].createElement("thead", __assign({}, restProps), children);
3181
- };
3182
-
3183
- var getWidth = function (props) {
3184
- var isActionColumn = props.column.isActionColumn, fullWidth = props.tableProps.fullWidth;
3185
- var width;
3186
- if (fullWidth && isActionColumn) {
3187
- width = '0.0000000001%';
3188
- }
3189
- if (fullWidth && !isActionColumn) {
3190
- width = '1%';
3191
- }
3192
- if (!fullWidth && isActionColumn) {
3193
- width = 72;
3194
- }
3195
- if (!fullWidth && !isActionColumn) {
3196
- width = undefined;
3197
- }
3198
- return width;
3199
- };
3200
- var useTableHeaderCellStyles = core.makeStyles(function (theme) { return ({
3201
- root: function (props) {
3202
- var width = getWidth(props);
3203
- return {
3204
- borderBottomStyle: 'solid',
3205
- borderBottomWidth: 2,
3206
- borderBottomColor: theme.palette.grey[100],
3207
- padding: theme.spacing(2),
3208
- textAlign: 'left',
3209
- fontWeight: 500,
3210
- width: width,
3211
- };
3212
- },
3213
- }); });
3214
-
3215
- var TableHeaderCell = function (props) {
3216
- var children = props.children, column = props.column; props.tableProps; var restProps = __rest(props, ["children", "column", "tableProps"]);
3217
- var root = useTableHeaderCellStyles(props).root;
3218
- var _a = core.useTheme(), palette = _a.palette, spacing = _a.spacing;
3219
- //@ts-expect-error @types/react-table issue
3220
- var canSort = column.canSort, isSorted = column.isSorted, isSortedDesc = column.isSortedDesc, isActionColumn = column.isActionColumn;
3221
- var showSortIndicator = canSort && !isActionColumn;
3222
- return (React__default['default'].createElement("th", __assign({ className: root }, restProps),
3223
- React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: spacing(1) },
3224
- children,
3225
- showSortIndicator && (React__default['default'].createElement(Icon, { icon: isSortedDesc ? SvgChevronDown : SvgChevronUp, color: isSorted ? palette.text.primary : palette.text.disabled, size: "large" })))));
3226
- };
3227
-
3228
- var TableHeaderRow = function (props) {
3229
- var children = props.children, restProps = __rest(props, ["children"]);
3230
- return React__default['default'].createElement("tr", __assign({}, restProps), children);
3231
- };
3232
-
3233
- var useTableRowStyles = core.makeStyles(function (theme) { return ({
3234
- root: function () { return ({
3235
- '&:nth-child(even)': {
3236
- backgroundColor: theme.palette.grey[100],
3237
- },
3238
- }); },
3239
- }); });
3240
-
3241
- var TableRow = function (props) {
3242
- var children = props.children, restProps = __rest(props, ["children"]);
3243
- var root = useTableRowStyles(props).root;
3244
- return (React__default['default'].createElement("tr", __assign({ className: root }, restProps), children));
3245
- };
3246
-
3247
- var TableBody = function (props) {
3248
- var children = props.children, restProps = __rest(props, ["children"]);
3249
- return React__default['default'].createElement("tbody", __assign({}, restProps), children);
3250
- };
3251
-
3252
- var useTableCellStyles = core.makeStyles(function (theme) { return ({
3253
- root: function () { return ({
3254
- padding: theme.spacing(2),
3255
- }); },
3256
- }); });
3257
-
3258
- var TableCell = function (props) {
3259
- var children = props.children, restProps = __rest(props, ["children"]);
3260
- var root = useTableCellStyles(props).root;
3261
- return (React__default['default'].createElement("td", __assign({ className: root }, restProps), children));
3262
- };
3263
-
3264
- var useTableStyles = core.makeStyles(function (_a) {
3265
- var typography = _a.typography;
3266
- return ({
3267
- root: function (_a) {
3268
- var fullWidth = _a.fullWidth;
3269
- return ({
3270
- display: fullWidth ? 'flex' : 'inline-flex',
3271
- flexDirection: 'column',
3272
- });
3273
- },
3274
- table: function (_a) {
3275
- var fullWidth = _a.fullWidth;
3276
- return (__assign(__assign({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography.body1));
3277
- },
3278
- tableWrap: function () { return ({
3279
- maxWidth: '100%',
3280
- overflowX: 'auto',
3281
- overflowY: 'hidden',
3282
- }); },
3283
- });
3284
- });
3285
-
3286
- var TableActionsCell = function (props) {
3287
- var _a = props.actions, primary = _a.primary, secondary = _a.secondary, intermediate = __rest(_a, ["primary", "secondary"]);
3288
- var tertiary = intermediate.tertiary, restActions = __rest(intermediate, ["tertiary"]);
3289
- var overflow = Object.keys(props.actions).length > 3;
3290
- var _b = React__default['default'].useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
3291
- var openMenu = function (event) {
3292
- setAnchorEl(event.currentTarget);
3293
- };
3294
- var closeMenu = function () {
3295
- setAnchorEl(null);
3296
- };
3297
- var handleItemClick = function (action) {
3298
- action(props.cell);
3299
- closeMenu();
3300
- };
3301
- return (React__default['default'].createElement(core.Box, { display: "flex" },
3302
- primary && primary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return primary.action(props.cell); } },
3303
- React__default['default'].createElement(Icon, { icon: primary.icon }))),
3304
- secondary && secondary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return secondary.action(props.cell); } },
3305
- React__default['default'].createElement(Icon, { icon: secondary.icon }))),
3306
- !overflow && tertiary && tertiary.icon && (React__default['default'].createElement(IconButton, { size: "small", onClick: function () { return tertiary.action(props.cell); } },
3307
- React__default['default'].createElement(Icon, { icon: tertiary.icon }))),
3308
- overflow && restActions && (React__default['default'].createElement(React__default['default'].Fragment, null,
3309
- React__default['default'].createElement(IconButton, { size: "small", onClick: openMenu },
3310
- React__default['default'].createElement(Icon, { icon: SvgMore })),
3311
- React__default['default'].createElement(Menu__default['default'], { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(__assign({ tertiary: tertiary }, restActions))
3312
- .filter(function (value) { return value; })
3313
- .map(function (_a, i) {
3314
- var label = _a.label, action = _a.action;
3315
- return (React__default['default'].createElement(MenuItem__default['default'], { key: i, onClick: function () { return handleItemClick(action); } }, label));
3316
- }))))));
3317
- };
3318
-
3319
- var makeColumns = function (config) {
3320
- var columns = config.columns, actions = config.actions, actionColumnId = config.actionColumnId;
3321
- var actionColumn;
3322
- var memoizedColumns = __spreadArray([], columns);
3323
- if (actions) {
3324
- var CellComponent = function (props) { return React__default['default'].createElement(TableActionsCell, __assign({}, props, { actions: actions })); };
3325
- actionColumn = {
3326
- id: actionColumnId,
3327
- Header: function () { return null; },
3328
- Cell: CellComponent,
3329
- };
3330
- memoizedColumns = __spreadArray(__spreadArray([], columns), [actionColumn]);
3331
- }
3332
- return memoizedColumns;
3333
- };
3334
-
3335
- /* eslint-disable react/jsx-key */
3336
- var Table = function (props) {
3337
- var actionColumnId = 'table-actions-column';
3338
- var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, enableMinHeight = props.enableMinHeight;
3339
- var classes = useTableStyles(props);
3340
- var columns = React.useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
3341
- var instance = useTable({ columns: columns, data: data, disableSortBy: !sortable }, useSortBy, usePagination);
3342
- var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, state = instance.state, rows = instance.rows;
3343
- var isPaginated = pageCount > 1;
3344
- var isEmpty = rows.length === 0;
3345
- var handlePagination = function (_e, pageNumber) {
3346
- gotoPage(pageNumber - 1);
3347
- };
3348
- return (React__default['default'].createElement(core.Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
3349
- React__default['default'].createElement(core.Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
3350
- React__default['default'].createElement("table", __assign({ className: classes.table }, getTableProps()),
3351
- React__default['default'].createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default['default'].createElement(TableHeaderCell, __assign({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign(__assign({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),
3352
- !isEmpty && !isLoading && (React__default['default'].createElement(TableBody, __assign({}, getTableBodyProps()), page.map(function (row) {
3353
- prepareRow(row);
3354
- return (React__default['default'].createElement(TableRow, __assign({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default['default'].createElement(TableCell, __assign({}, cell.getCellProps()), cell.render('Cell'))); })));
3355
- }))))),
3356
- isEmpty && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
3357
- EmptyImage && EmptyImage(),
3358
- React__default['default'].createElement(Typography, null, emptyMessage))),
3359
- isLoading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
3360
- React__default['default'].createElement(CircularProgress__default['default'], { size: 80, color: "inherit" }))),
3361
- isPaginated && !isLoading && (React__default['default'].createElement(TableFooter, null,
3362
- React__default['default'].createElement(lab.Pagination, { count: pageCount, page: state.pageIndex + 1, onChange: handlePagination })))));
3363
- };
3364
- Table.defaultProps = {
3365
- emptyMessage: 'No results.',
3366
- enableMinHeight: true,
3367
- };
3368
-
3369
1061
  var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
3370
1062
  root: {
3371
1063
  color: theme.palette.text.primary,
@@ -3860,7 +1552,6 @@ exports.PaperContent = PaperContent;
3860
1552
  exports.Radio = Radio;
3861
1553
  exports.SplitInput = SplitInput;
3862
1554
  exports.Switch = Switch;
3863
- exports.Table = Table;
3864
1555
  exports.ToggleButton = ToggleButton;
3865
1556
  exports.ToggleButtonGroup = ToggleButtonGroup;
3866
1557
  exports.Tooltip = Tooltip;