@tanstack/table-core
Version:
Headless UI for building powerful tables & datagrids for TS/JS.
272 lines (266 loc) • 11.5 kB
JavaScript
/**
* table-core
*
* Copyright (c) TanStack
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
;
var utils = require('../utils.js');
var document = require('../utils/document.js');
var ColumnVisibility = require('./ColumnVisibility.js');
//
//
const defaultColumnSizing = {
size: 150,
minSize: 20,
maxSize: Number.MAX_SAFE_INTEGER
};
const getDefaultColumnSizingInfoState = () => ({
startOffset: null,
startSize: null,
deltaOffset: null,
deltaPercentage: null,
isResizingColumn: false,
columnSizingStart: []
});
const ColumnSizing = {
getDefaultColumnDef: () => {
return defaultColumnSizing;
},
getInitialState: state => {
return {
columnSizing: {},
columnSizingInfo: getDefaultColumnSizingInfoState(),
...state
};
},
getDefaultOptions: table => {
return {
columnResizeMode: 'onEnd',
columnResizeDirection: 'ltr',
onColumnSizingChange: utils.makeStateUpdater('columnSizing', table),
onColumnSizingInfoChange: utils.makeStateUpdater('columnSizingInfo', table)
};
},
createColumn: (column, table) => {
column.getSize = () => {
var _column$columnDef$min, _ref, _column$columnDef$max;
const columnSize = table.getState().columnSizing[column.id];
return Math.min(Math.max((_column$columnDef$min = column.columnDef.minSize) != null ? _column$columnDef$min : defaultColumnSizing.minSize, (_ref = columnSize != null ? columnSize : column.columnDef.size) != null ? _ref : defaultColumnSizing.size), (_column$columnDef$max = column.columnDef.maxSize) != null ? _column$columnDef$max : defaultColumnSizing.maxSize);
};
column.getStart = utils.memo(position => [position, ColumnVisibility._getVisibleLeafColumns(table, position), table.getState().columnSizing], (position, columns) => columns.slice(0, column.getIndex(position)).reduce((sum, column) => sum + column.getSize(), 0), utils.getMemoOptions(table.options, 'debugColumns', 'getStart'));
column.getAfter = utils.memo(position => [position, ColumnVisibility._getVisibleLeafColumns(table, position), table.getState().columnSizing], (position, columns) => columns.slice(column.getIndex(position) + 1).reduce((sum, column) => sum + column.getSize(), 0), utils.getMemoOptions(table.options, 'debugColumns', 'getAfter'));
column.resetSize = () => {
table.setColumnSizing(_ref2 => {
let {
[column.id]: _,
...rest
} = _ref2;
return rest;
});
};
column.getCanResize = () => {
var _column$columnDef$ena, _table$options$enable;
return ((_column$columnDef$ena = column.columnDef.enableResizing) != null ? _column$columnDef$ena : true) && ((_table$options$enable = table.options.enableColumnResizing) != null ? _table$options$enable : true);
};
column.getIsResizing = () => {
return table.getState().columnSizingInfo.isResizingColumn === column.id;
};
},
createHeader: (header, table) => {
header.getSize = () => {
let sum = 0;
const recurse = header => {
if (header.subHeaders.length) {
header.subHeaders.forEach(recurse);
} else {
var _header$column$getSiz;
sum += (_header$column$getSiz = header.column.getSize()) != null ? _header$column$getSiz : 0;
}
};
recurse(header);
return sum;
};
header.getStart = () => {
if (header.index > 0) {
const prevSiblingHeader = header.headerGroup.headers[header.index - 1];
return prevSiblingHeader.getStart() + prevSiblingHeader.getSize();
}
return 0;
};
header.getResizeHandler = _contextDocument => {
const column = table.getColumn(header.column.id);
const canResize = column == null ? void 0 : column.getCanResize();
return e => {
if (!column || !canResize) {
return;
}
e.persist == null || e.persist();
if (isTouchStartEvent(e)) {
// lets not respond to multiple touches (e.g. 2 or 3 fingers)
if (e.touches && e.touches.length > 1) {
return;
}
}
const startSize = header.getSize();
const columnSizingStart = header ? header.getLeafHeaders().map(d => [d.column.id, d.column.getSize()]) : [[column.id, column.getSize()]];
const clientX = isTouchStartEvent(e) ? Math.round(e.touches[0].clientX) : e.clientX;
const newColumnSizing = {};
const updateOffset = (eventType, clientXPos) => {
if (typeof clientXPos !== 'number') {
return;
}
table.setColumnSizingInfo(old => {
var _old$startOffset, _old$startSize;
const deltaDirection = table.options.columnResizeDirection === 'rtl' ? -1 : 1;
const deltaOffset = (clientXPos - ((_old$startOffset = old == null ? void 0 : old.startOffset) != null ? _old$startOffset : 0)) * deltaDirection;
const deltaPercentage = Math.max(deltaOffset / ((_old$startSize = old == null ? void 0 : old.startSize) != null ? _old$startSize : 0), -0.999999);
old.columnSizingStart.forEach(_ref3 => {
let [columnId, headerSize] = _ref3;
newColumnSizing[columnId] = Math.round(Math.max(headerSize + headerSize * deltaPercentage, 0) * 100) / 100;
});
return {
...old,
deltaOffset,
deltaPercentage
};
});
if (table.options.columnResizeMode === 'onChange' || eventType === 'end') {
table.setColumnSizing(old => ({
...old,
...newColumnSizing
}));
}
};
const onMove = clientXPos => updateOffset('move', clientXPos);
const onEnd = clientXPos => {
updateOffset('end', clientXPos);
table.setColumnSizingInfo(old => ({
...old,
isResizingColumn: false,
startOffset: null,
startSize: null,
deltaOffset: null,
deltaPercentage: null,
columnSizingStart: []
}));
};
const contextDocument = document.safelyAccessDocument(_contextDocument);
const mouseEvents = {
moveHandler: e => onMove(e.clientX),
upHandler: e => {
contextDocument == null || contextDocument.removeEventListener('mousemove', mouseEvents.moveHandler);
contextDocument == null || contextDocument.removeEventListener('mouseup', mouseEvents.upHandler);
onEnd(e.clientX);
}
};
const touchEvents = {
moveHandler: e => {
if (e.cancelable) {
e.preventDefault();
e.stopPropagation();
}
onMove(e.touches[0].clientX);
return false;
},
upHandler: e => {
var _e$touches$;
contextDocument == null || contextDocument.removeEventListener('touchmove', touchEvents.moveHandler);
contextDocument == null || contextDocument.removeEventListener('touchend', touchEvents.upHandler);
if (e.cancelable) {
e.preventDefault();
e.stopPropagation();
}
onEnd((_e$touches$ = e.touches[0]) == null ? void 0 : _e$touches$.clientX);
}
};
const passiveIfSupported = passiveEventSupported() ? {
passive: false
} : false;
if (isTouchStartEvent(e)) {
contextDocument == null || contextDocument.addEventListener('touchmove', touchEvents.moveHandler, passiveIfSupported);
contextDocument == null || contextDocument.addEventListener('touchend', touchEvents.upHandler, passiveIfSupported);
} else {
contextDocument == null || contextDocument.addEventListener('mousemove', mouseEvents.moveHandler, passiveIfSupported);
contextDocument == null || contextDocument.addEventListener('mouseup', mouseEvents.upHandler, passiveIfSupported);
}
table.setColumnSizingInfo(old => ({
...old,
startOffset: clientX,
startSize,
deltaOffset: 0,
deltaPercentage: 0,
columnSizingStart,
isResizingColumn: column.id
}));
};
};
},
createTable: table => {
table.setColumnSizing = updater => table.options.onColumnSizingChange == null ? void 0 : table.options.onColumnSizingChange(updater);
table.setColumnSizingInfo = updater => table.options.onColumnSizingInfoChange == null ? void 0 : table.options.onColumnSizingInfoChange(updater);
table.resetColumnSizing = defaultState => {
var _table$initialState$c;
table.setColumnSizing(defaultState ? {} : (_table$initialState$c = table.initialState.columnSizing) != null ? _table$initialState$c : {});
};
table.resetHeaderSizeInfo = defaultState => {
var _table$initialState$c2;
table.setColumnSizingInfo(defaultState ? getDefaultColumnSizingInfoState() : (_table$initialState$c2 = table.initialState.columnSizingInfo) != null ? _table$initialState$c2 : getDefaultColumnSizingInfoState());
};
table.getTotalSize = () => {
var _table$getHeaderGroup, _table$getHeaderGroup2;
return (_table$getHeaderGroup = (_table$getHeaderGroup2 = table.getHeaderGroups()[0]) == null ? void 0 : _table$getHeaderGroup2.headers.reduce((sum, header) => {
return sum + header.getSize();
}, 0)) != null ? _table$getHeaderGroup : 0;
};
table.getLeftTotalSize = () => {
var _table$getLeftHeaderG, _table$getLeftHeaderG2;
return (_table$getLeftHeaderG = (_table$getLeftHeaderG2 = table.getLeftHeaderGroups()[0]) == null ? void 0 : _table$getLeftHeaderG2.headers.reduce((sum, header) => {
return sum + header.getSize();
}, 0)) != null ? _table$getLeftHeaderG : 0;
};
table.getCenterTotalSize = () => {
var _table$getCenterHeade, _table$getCenterHeade2;
return (_table$getCenterHeade = (_table$getCenterHeade2 = table.getCenterHeaderGroups()[0]) == null ? void 0 : _table$getCenterHeade2.headers.reduce((sum, header) => {
return sum + header.getSize();
}, 0)) != null ? _table$getCenterHeade : 0;
};
table.getRightTotalSize = () => {
var _table$getRightHeader, _table$getRightHeader2;
return (_table$getRightHeader = (_table$getRightHeader2 = table.getRightHeaderGroups()[0]) == null ? void 0 : _table$getRightHeader2.headers.reduce((sum, header) => {
return sum + header.getSize();
}, 0)) != null ? _table$getRightHeader : 0;
};
}
};
let passiveSupported = null;
function passiveEventSupported() {
if (typeof passiveSupported === 'boolean') return passiveSupported;
let supported = false;
try {
const options = {
get passive() {
supported = true;
return false;
}
};
const noop = () => {};
window.addEventListener('test', noop, options);
window.removeEventListener('test', noop);
} catch (err) {
supported = false;
}
passiveSupported = supported;
return passiveSupported;
}
function isTouchStartEvent(e) {
return e.type === 'touchstart';
}
exports.ColumnSizing = ColumnSizing;
exports.defaultColumnSizing = defaultColumnSizing;
exports.passiveEventSupported = passiveEventSupported;
//# sourceMappingURL=ColumnSizing.js.map