@oceanbase-odc/ob-react-data-grid
Version:
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like
1,130 lines (1,088 loc) • 161 kB
JavaScript
import React, { useRef, useLayoutEffect, useCallback, useMemo, useEffect, useState, memo, forwardRef, useContext, useImperativeHandle } from 'react';
import clsx from 'clsx';
import { isString, sortBy, toNumber, reverse, cloneDeep, toString, isEqual, isNil, throttle, debounce, isEmpty } from 'lodash';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
import inRange from 'lodash/inRange';
import { FilterOutlined, SwapLeftOutlined, StopOutlined } from '@ant-design/icons';
import { Space, Popover, Input, Checkbox, Button, Typography, message, Tooltip, Empty } from 'antd';
import { useDrag, useDrop } from 'react-dnd';
import copyToClipboard from 'copy-to-clipboard';
import { createPortal } from 'react-dom';
import Menu, { Item, SubMenu } from 'rc-menu';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$j = ".cj343x0{background-color:inherit;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);contain:strict;contain:size layout style paint;overflow:hidden;overflow:clip;padding:0 8px;position:relative;text-overflow:ellipsis;white-space:nowrap}.csofj7r{position:-webkit-sticky;position:sticky;z-index:1}.ch2wcw8{box-shadow:2px 0 5px -2px #8888884d}.c1wvphzh.rdg-cell.rdg-cell-selected{background:var(--row-selected-background-color);color:var(--selected-color)}";
styleInject(css_248z$j);
const cell = "cj343x0";
const cellClassname = `rdg-cell ${cell}`;
const cellFrozen = "csofj7r";
const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`;
const cellFrozenLast = "ch2wcw8";
const cellFrozenLastClassname = `rdg-cell-frozen-last ${cellFrozenLast}`;
const cellSelected = "c1wvphzh";
const cellSelectedClassname = `rdg-cell-selected ${cellSelected}`;
var css_248z$i = ".rnvodz5{--brand-blue1-color:#d6e4ff;--brand-blue2-color:#bae7ff;--brand-blue2-color-value:186,231,255;--brand-blue3-color:#91d5ff;--brand-blue5-color:#40a9ff;--brand-blue6-color:#006aff;--brand-blue7-color:#096dd9;--brand-blue7-color-value:9,109,217;--neutral-grey0-color-value:31,41,61;--neutral-grey1-color:#f7f9fb;--neutral-grey2-color:#f3f6fc;--neutral-grey3-color:#f0f2f5;--neutral-grey4-color:#e2e8f3;--neutral-White6-color:#ffffff0f;--neutral-White20-color:#434343;--neutral-White30-color:#ffffff4d;--neutral-White50-color:#ffffff80;--neutral-White65-color:#ffffffa6;--neutral-White85-color:#ffffffd9;--neutral-White100-color:#fff;--neutral-black45-color:#00000073;--function-green2-color:#d9f7be;--function-green3-color:#b7eb8f;--function-green6-color:#52c41a;--function-green6-color-value:82,196,26;--green-8-color-value:35,120,4;--function-gold2-color:#fff1b8;--function-gold2-color-value:255,241,184;--function-gold3-color:#ffe58f;--function-gold6-color:#faad14;--function-gold6-color-value:250,173,20;--function-gold8-color:#ad6800;--function-red2-color:#ffccc7;--function-red2-color-value:255,204,199;--function-red3-color:#ffa39e;--function-red3-color-value:255,163,158;--function-red6-color:#f5222d;--function-red6-color-value:245,34,45;--function-red8-color:#a8071a;--function-red8-color-value:168,7,26;--code-normal-color:#000000d9;--code-blue-color:#00f;--code-green-color:#09885a;--code-red-color:red;--icon-blue-color:#40a9ff;--icon-geekblue-color:#597ef7;--icon-cyan-color:#36cfc9;--icon-green-color:#73d13d;--icon-purple-color:#9254de;--icon-magenta-color:#f759ab;--icon-orange-color:#ffa940;--icon-yellow-color:#ffec3d;--background-normal-color:var(--neutral-grey3-color);--background-primary-color:var(--neutral-White100-color);--background-secondry-color:var(--neutral-White100-color);--background-tertraiy-color:var(--neutral-grey1-color);--navigation-background-color:var(--neutral-grey0-color);--tab-background-color:var(--neutral-grey2-color);--dropdown-background-color:var(--neutral-White100-color);--tooltips-background-color:#000000bf;--mask-color:#00000040;--hover-color:#0000000f;--divider-color:var(--neutral-grey4-color);--odc-border-color:var(--neutral-grey4-color);--text-color-primary:#132039;--text-color-secondary:#000000a6;--text-color-hint:#00000080;--text-color-placeholder:#0000004d;--text-color-inverse:#000;--text-color-link:var(--brand-blue6-color);--text-color-error:var(--function-red6-color);--icon-color-normal:#000000a6;--icon-color-focus:var(--brand-blue6-color);--icon-color-disable:#00000040;--icon-color-1:var(--icon-blue-color);--icon-color-2:var(--icon-green-color);--icon-color-3:var(--icon-orange-color);--icon-color-4:var(--icon-magenta-color);--icon-color-5:var(--icon-purple-color);--icon-color-6:var(--icon-cyan-color);--icon-color-7:var(--icon-yellow-color);--icon-color-8:var(--icon-geekblue-color);--table-border-color:var(--border-color);--table-header-background-color:var(--neutral-grey2-color);--table-focus-color:var(--brand-blue1-color);--table-hover-color:var(--brand-blue6-color);--table-new-color:rgba(var(--function-green6-color-value),0.25);--table-edit-color:rgba(var(--function-gold6-color-value),0.25);--table-delete-color:rgba(var(--function-red3-color-value),0.25);--code-common-color:var(--text-color-primary);--code-comment-color:var(--code-green-color);--code-keyword-color:var(--code-blue-color);--code-number-color:var(--code-red-color);--code-string-color:var(--code-red-color);--code-background-selected-color:rgba(var(--brand-blue2-color-value),0.65);--code-background-highlight-color:rgba(var(--function-gold2-color-value),0.65);--code-background-error-color:rgba(var(--function-red2-color-value),0.65);--selected-color:#fff;--color:var(--text-color-primary);--border-color:var(--odc-border-color);--background-color:var(--background-primary-color);--header-background-color:var(--table-header-background-color);--row-hover-background-color:var(--table-focus-color);--row-selected-background-color:var(--table-hover-color);--row-selected-cell-background-color:var(--table-hover-color);--row-selected-hover-background-color:var(--table-focus-color);--selection-color:#66afe9;--font-size:12px;background-color:var(--background-color);box-sizing:border-box;color:var(--color);contain:strict;contain:size layout style paint;content-visibility:auto;font-size:var(--font-size);height:350px;outline:1px solid var(--border-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rnvodz5.rdg-dark{--brand-blue1-color:#111d2c;--brand-blue2-color-value:27,47,68;--brand-blue2-color:#1b2f44;--brand-blue3-color:#203e5a;--brand-blue5-color:#1a66ac;--brand-blue6-color:#167cdb;--brand-blue7-color:#3895eb;--brand-blue7-color-value:56,149,235;--neutral-grey0-color-value:18,19,20;--neutral-grey1-color:#1c1d1f;--neutral-grey2-color:#26292b;--neutral-grey3-color:#2d3033;--neutral-grey4-color:#363a3d;--neutral-White6-color:#ffffff0f;--neutral-White20-color:#434343;--neutral-White30-color:#ffffff4d;--neutral-White50-color:#ffffff80;--neutral-White65-color:#ffffffa6;--neutral-White85-color:#ffffffd9;--neutral-White100-color:#fff;--neutral-black45-color:#00000073;--function-green2-color:#1d371266;--function-green3-color:#274916;--function-green6-color:#49aa19;--green-8-color-value:143,212,96;--function-gold2-color:#44311166;--function-gold3-color:#594214;--function-gold6-color:#d89614;--function-gold8-color:#d8961466;--function-red2-color:#43141866;--function-red3-color:#58181c;--function-red6-color:#d32029;--function-red8-color:#f3737066;--function-red8-color-value:243,115,112;--code-normal-color:#ffffffd9;--code-blue-color:#5099fb;--code-green-color:#98d782;--code-red-color:#e47d8d;--icon-blue-color:#509de6;--icon-geekblue-color:#5069e6;--icon-cyan-color:#59b3af;--icon-green-color:#81b350;--icon-purple-color:#a179f2;--icon-magenta-color:#d96ca5;--icon-orange-color:#d9924c;--icon-yellow-color:#e8d639;--background-normal-color:var(--neutral-grey2-color);--background-primary-color:var(--neutral-grey1-color);--background-secondry-color:var(--neutral-grey2-color);--background-tertraiy-color:var(--neutral-grey3-color);--navigation-background-color:var(--neutral-grey4-color);--tab-background-color:var(--neutral-grey4-color);--dropdown-background-color:var(--neutral-grey4-color);--tooltips-background-color:var(--neutral-grey4-color);--mask-color:#000000a6;--hover-color:#fff9;--divider-color:rgba(var(--neutral-grey0-color-value),0.65);--odc-border-color:var(--neutral-grey4-color);--text-color-primary:#ffffffd9;--text-color-secondary:#ffffffa6;--text-color-hint:#ffffff80;--text-color-placeholder:#ffffff4d;--text-color-inverse:#fff;--text-color-link:var(--brand-blue6-color);--text-color-error:var(--function-red6-color);--icon-color-normal:#ffffffa6;--icon-color-focus:var(--brand-blue6-color);--icon-color-disable:#ffffff4d;--icon-color-1:var(--icon-blue-color);--icon-color-2:var(--icon-green-color);--icon-color-3:var(--icon-orange-color);--icon-color-4:var(--icon-magenta-color);--icon-color-5:var(--icon-purple-color);--icon-color-6:var(--icon-cyan-color);--icon-color-7:var(--icon-yellow-color);--icon-color-8:var(--icon-geekblue-color);--table-border-color:var(--border-color);--table-header-background-color:var(--neutral-grey3-color);--table-focus-color:var(--brand-blue2-color);--table-hover-color:var(--brand-blue6-color);--table-new-color:rgba(var(--green-8-color-value),0.4);--table-edit-color:var(--function-gold8-color);--table-delete-color:var(--function-red8-color);--code-common-color:var(--text-color-primary);--code-comment-color:var(--code-green-color);--code-keyword-color:var(--code-blue-color);--code-number-color:var(--code-red-color);--code-string-color:var(--code-red-color);--code-background-selected-color:rgba(var(--brand-blue7-color-value),0.5);--code-background-highlight-color:rgba(var(--green-8-color-value),0.12);--code-background-error-color:rgba(var(--function-red8-color-value),0.12)}@supports not (contain:strict){.rnvodz5{position:relative;z-index:0}}.rnvodz5 *,.rnvodz5 :after,.rnvodz5 :before{box-sizing:inherit}.flqv91k{height:0;left:0;outline:0;position:-webkit-sticky;position:sticky;top:0;width:0}.v1lsfrzw.r1upfr80{cursor:move}";
styleInject(css_248z$i);
const root = "rnvodz5";
const rootClassname = `rdg ${root}`;
const focusSink = "flqv91k";
const focusSinkClassname = `rdg-focus-sink ${focusSink}`;
const viewportDragging = "v1lsfrzw";
const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`;
var css_248z$h = ".gajh8w5:not(.ry99me){background-color:var(--header-background-color)}.gajh8w5>.cj343x0:not(:last-child):not(.ch2wcw8){border-right:none}.g17pnute:after{bottom:0;box-shadow:inset 0 0 0 2px var(--selection-color);content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.g17pnute>.cj343x0:first-child{box-shadow:inset 2px 0 0 0 var(--selection-color)}";
styleInject(css_248z$h);
const groupRowSelected = "g17pnute";
const groupRowSelectedClassname = `rdg-group-row-selected ${groupRowSelected}`;
var css_248z$g = ".hz5s9zk{-ms-grid-columns:var(--template-columns);contain:strict;contain:size layout style paint;display:-ms-grid;display:grid;font-weight:700;grid-template-columns:var(--template-columns);position:-webkit-sticky;position:sticky;width:var(--row-width);z-index:3}.h194p35a{-ms-grid-rows:var(--header-row-height);grid-template-rows:var(--header-row-height);height:var(--header-row-height);line-height:var(--header-row-height);top:0;touch-action:none}.fy91evj{-ms-grid-rows:var(--filter-row-height);grid-template-rows:var(--filter-row-height);height:var(--filter-row-height);line-height:var(--filter-row-height);top:var(--header-row-height)}";
styleInject(css_248z$g);
const headerRowAndFilterRow = "hz5s9zk";
const headerRow = "h194p35a";
const headerRowClassname = `rdg-header-row ${headerRowAndFilterRow} ${headerRow}`;
var css_248z$f = ".r1upfr80{-ms-grid-rows:var(--row-height);-ms-grid-columns:var(--template-columns);background-color:var(--background-color);color:var(--color);contain:strict;contain:size layout style paint;display:-ms-grid;display:grid;grid-template-columns:var(--template-columns);grid-template-rows:var(--row-height);height:var(--row-height);left:0;line-height:var(--row-height);position:absolute;width:var(--row-width)}.r190mhd3.rdg-row{contain:none}.r139qu9m.rdg-row{background-color:var(--table-new-color)}.rm1sydw.rdg-row{background-color:var(--table-delete-color)}.ry99me.rdg-row-selected.rdg-row{background-color:var(--row-selected-background-color);color:var(--selected-color)}.ry99me.rdg-row-selected.rdg-row .rdg-cell{background-color:var(--row-selected-cell-background-color);color:var(--selected-color)}.sj8n0qv{-ms-grid-rows:var(--summary-row-height);grid-template-rows:var(--summary-row-height);height:var(--summary-row-height);line-height:var(--summary-row-height);position:-webkit-sticky;position:sticky;z-index:3}.lx6ugue .rdg-cell{border-bottom-width:2px}.duzpn72:before{background:var(--row-selected-background-color);content:\"\";height:2px;position:absolute;top:0;width:100%;z-index:1}.dvp3c88{opacity:.6}.r1n2ajof{height:100%;left:0;pointer-events:none;position:absolute;width:100%}.t1ncply6 .ant-popover-arrow{display:none}.t1ncply6 .ant-popover-inner-content{padding:0 0 0 10px}.t1ncply6 .ant-popover-inner{background-color:initial;box-shadow:unset}.t1ncply6.ant-popover{padding-top:0}.r13ljn0a.rdg-row>.rdg-cell div:first-child{font-weight:700}";
styleInject(css_248z$f);
const row = "r1upfr80";
const rowCellShowMenuClassname = "r190mhd3";
const rowClassname = `rdg-row ${row}`;
const rowIsAddClassname = "r139qu9m";
const rowIsDeleteClassname = "rm1sydw";
const rowSelected = "ry99me";
const rowSelectedClassname = `rdg-row-selected ${rowSelected}`;
const summaryRow = "sj8n0qv";
const lastSummaryRowClassname = "lx6ugue";
const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
const dropOverRowClassName = "duzpn72";
const dragingRowClassName = "dvp3c88";
const rdgDragPreviewClassname = "r1n2ajof";
const rowMainSelectClassname = "r13ljn0a";
function useFocusRef(isCellSelected) {
const ref = useRef(null);
useLayoutEffect(() => {
var _ref$current;
if (!isCellSelected) return;
(_ref$current = ref.current) == null || _ref$current.focus({
preventScroll: true
});
}, [isCellSelected]);
return ref;
}
var css_248z$e = ".c4l3n6v{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center;bottom:0;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;left:0;margin-right:1px;position:absolute;right:0;top:0}.c1bikpmb{all:unset;margin:0;width:0}.c1eyot7g{background-color:var(--background-color);border:2px solid var(--border-color);content:\"\";height:20px;width:20px}.c1bikpmb:checked+.c1eyot7g{background-color:var(--checkbox-color);box-shadow:inset 0 0 0 4px var(--background-color)}.c1bikpmb:focus+.c1eyot7g{border-color:var(--checkbox-focus-color)}.c1jlcvp4{cursor:default}.c1jlcvp4 .c1eyot7g{background-color:var(--checkbox-disabled-background-color);border-color:var(--checkbox-disabled-border-color)}";
styleInject(css_248z$e);
const checkboxLabel = "c4l3n6v";
const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`;
const checkboxInput = "c1bikpmb";
const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
const checkbox = "c1eyot7g";
const checkboxClassname = `rdg-checkbox ${checkbox}`;
const checkboxLabelDisabled = "c1jlcvp4";
const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`;
function SelectCellFormatter({
value,
tabIndex,
isCellSelected,
disabled,
onClick,
onChange,
aria
}) {
const inputRef = useFocusRef(isCellSelected);
function handleChange(e) {
onChange(e.target.checked, e.nativeEvent.shiftKey);
}
return /*#__PURE__*/jsxs("label", {
className: clsx(checkboxLabelClassname, disabled && checkboxLabelDisabledClassname),
children: [/*#__PURE__*/jsx("input", {
...aria,
tabIndex: tabIndex,
ref: inputRef,
type: "checkbox",
className: checkboxInputClassname,
disabled: disabled,
checked: value,
onChange: handleChange,
onClick: onClick
}), /*#__PURE__*/jsx("div", {
className: checkboxClassname
})]
});
}
const ValueFormatter = /*#__PURE__*/React.memo(function ValueFormatter(props) {
try {
return /*#__PURE__*/jsx(Fragment, {
children: props.row[props.column.key]
});
} catch (e) {
return null;
}
}, (prevProps, nextProps) => prevProps.row === nextProps.row && prevProps.column === nextProps.column);
var css_248z$d = ".g1vzro7t{outline:none}.c1fsqdic{stroke:currentColor;stroke-width:1.5px;fill:#0000;margin-left:4px;vertical-align:middle}.c1fsqdic>path{-webkit-transition:d .1s;transition:d .1s}";
styleInject(css_248z$d);
const groupCellContent = "g1vzro7t";
const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`;
const caret = "c1fsqdic";
const caretClassname = `rdg-caret ${caret}`;
function ToggleGroupFormatter({
groupKey,
isExpanded,
isCellSelected,
toggleGroup
}) {
const cellRef = useFocusRef(isCellSelected);
function handleKeyDown({
key
}) {
if (key === 'Enter') {
toggleGroup();
}
}
const d = isExpanded ? 'M1 1 L 7 7 L 13 1' : 'M1 7 L 7 1 L 13 7';
return /*#__PURE__*/jsxs("span", {
ref: cellRef,
className: groupCellContentClassname,
tabIndex: -1,
onKeyDown: handleKeyDown,
children: [groupKey, /*#__PURE__*/jsx("svg", {
viewBox: "0 0 14 8",
width: "14",
height: "8",
className: caretClassname,
children: /*#__PURE__*/jsx("path", {
d: d
})
})]
});
}
const nonInputKeys = new Set(['Unidentified', 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'FnLock', 'Meta', 'NumLock', 'ScrollLock', 'Shift', 'Tab', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', 'Insert', 'ContextMenu', 'Escape', 'Pause', 'Play', 'PrintScreen', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12']);
function isCtrlKeyHeldDown(e) {
return (e.ctrlKey || e.metaKey) && e.key !== 'Control';
}
function isDefaultCellInput(event) {
return !nonInputKeys.has(event.key);
}
function onEditorNavigation({
key,
target
}) {
if (key === 'Tab' && (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
return target.matches('.rdg-editor-container > :only-child, .rdg-editor-container > label:only-child > :only-child');
}
return false;
}
function isCtrlDown(event) {
var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
return isMac ? event.metaKey : event.ctrlKey;
}
function isCellEditable({
column,
row
}) {
return (column == null ? void 0 : column.editor) != null && (typeof (column == null ? void 0 : column.editable) === 'function' ? column == null ? void 0 : column.editable(row) : column == null ? void 0 : column.editable) !== false;
}
function getNextSelectedCellPosition({
cellNavigationMode,
columns,
rows,
nextPosition
}) {
const rowsCount = rows.length;
let position = nextPosition;
if (cellNavigationMode !== 'NONE') {
const {
columnIdx,
rowIdx
} = nextPosition;
const columnsCount = columns.length;
const isAfterLastColumn = columnIdx === columnsCount;
const isBeforeFirstColumn = columnIdx === -1;
if (isAfterLastColumn) {
if (cellNavigationMode === 'CHANGE_ROW') {
const isLastRow = rowIdx === rowsCount - 1;
if (!isLastRow) {
position = {
columnIdx: 0,
rowIdx: rowIdx + 1
};
}
} else {
position = {
rowIdx,
columnIdx: 0
};
}
} else if (isBeforeFirstColumn) {
if (cellNavigationMode === 'CHANGE_ROW') {
const isFirstRow = rowIdx === 0;
if (!isFirstRow) {
position = {
rowIdx: rowIdx - 1,
columnIdx: columnsCount - 1
};
}
} else {
position = {
rowIdx,
columnIdx: columnsCount - 1
};
}
}
}
return position;
}
function canExitGrid({
cellNavigationMode,
columns,
rowsCount,
selectedRange: {
rowIdx,
columnIdx
},
shiftKey
}) {
if (cellNavigationMode === 'NONE' || cellNavigationMode === 'CHANGE_ROW') {
const atLastCellInRow = columnIdx === columns.length - 1;
const atFirstCellInRow = columnIdx === 0;
const atLastRow = rowIdx === rowsCount - 1;
const atFirstRow = rowIdx === 0;
return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow;
}
return false;
}
function getCellStyle(column) {
return {
gridColumnStart: column.idx + 1,
left: column.frozen ? `var(--frozen-left-${column.key})` : undefined
};
}
function getCellClassname(column, ...extraClasses) {
return clsx(cellClassname, ...extraClasses, column.frozen && cellFrozenClassname, column.isLastFrozenColumn && cellFrozenLastClassname);
}
const generateUniqKey = function () {
let key = 0;
return function (suffixStr = '') {
key = key + 1;
return `${key}-${Date.now()}-${~~(Math.random() * 10000)}-${suffixStr || ''}`;
};
}();
var css_248z$c = ".r17o28l0{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-align-items:center;align-items:center;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:12px;-webkit-justify-content:flex-end;justify-content:flex-end;padding-right:5px}.snfadq1{background:var(--row-selected-hover-background-color);color:var(--color)}";
styleInject(css_248z$c);
const rowIndexCellClassName$1 = "r17o28l0";
const selectedClassName = "snfadq1";
const RowIndexCellFormatter = function (props) {
const {
isRowSelected,
onRowSelectionChange,
rowIdx
} = props;
const onClick = useCallback(e => {
onRowSelectionChange(!isRowSelected, e.nativeEvent.shiftKey, isCtrlDown(e));
}, [isRowSelected, onRowSelectionChange]);
return /*#__PURE__*/jsx("div", {
onClick: onClick,
className: `${rowIndexCellClassName$1} ${isRowSelected ? selectedClassName : ''}`,
children: rowIdx + 1
});
};
var css_248z$b = ".s49g3v8.rdg-cell.rdg-cell-frozen{background-color:var(--header-background-color);color:var(--color);padding:0}.s49g3v8.rdg-cell.rdg-cell-frozen:hover{color:var(--color)!important}.rgvub85.rdg-cell.s49g3v8{background-color:var(--row-hover-background-color)}";
styleInject(css_248z$b);
const SELECT_COLUMN_KEY = 'select-row';
const selectCellClassName$1 = "s49g3v8";
const rowCellSelectClassName = "rgvub85";
const SelectColumn = {
key: SELECT_COLUMN_KEY,
name: '',
width: 70,
resizable: false,
sortable: false,
clickable: false,
frozen: true,
cellClass: (row, isRowCellSelected) => {
return clsx(selectCellClassName$1, isRowCellSelected && rowCellSelectClassName);
},
headerRenderer(props) {
return /*#__PURE__*/jsx("div", {
style: {
width: '100%',
height: '100%'
}
});
},
formatter: RowIndexCellFormatter
};
var css_248z$a = ".thwclf{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:var(--background-color);border:2px solid #ccc;box-sizing:border-box;color:var(--color);font-family:inherit;font-size:var(--font-size);height:100%;padding:0 6px;vertical-align:top;width:100%}.thwclf:focus{border-color:var(--selection-color);outline:none}.thwclf::-webkit-input-placeholder{color:#999;opacity:1}.thwclf::-moz-placeholder{color:#999;opacity:1}.thwclf:-ms-input-placeholder{color:#999;opacity:1}.thwclf::placeholder{color:#999;opacity:1}";
styleInject(css_248z$a);
const textEditor$1 = "thwclf";
const textEditorClassname$1 = `rdg-text-editor ${textEditor$1}`;
function ReadOnlyEditor({
row,
column,
onClose
}) {
return /*#__PURE__*/jsx("input", {
readOnly: true,
className: textEditorClassname$1,
value: (row == null ? void 0 : row[column.key]) || '',
onBlur: () => onClose(true)
});
}
function useCalculatedColumns({
rawColumns,
columnWidths,
viewportWidth,
scrollLeft,
defaultColumnOptions,
rawGroupBy,
enableVirtualization,
rowsCount,
readonly
}) {
var _defaultColumnOptions, _defaultColumnOptions2, _defaultColumnOptions3, _defaultColumnOptions4;
const minColumnWidth = (_defaultColumnOptions = defaultColumnOptions == null ? void 0 : defaultColumnOptions.minWidth) != null ? _defaultColumnOptions : 80;
const defaultFormatter = (_defaultColumnOptions2 = defaultColumnOptions == null ? void 0 : defaultColumnOptions.formatter) != null ? _defaultColumnOptions2 : ValueFormatter;
const defaultSortable = (_defaultColumnOptions3 = defaultColumnOptions == null ? void 0 : defaultColumnOptions.sortable) != null ? _defaultColumnOptions3 : true;
const defaultResizable = (_defaultColumnOptions4 = defaultColumnOptions == null ? void 0 : defaultColumnOptions.resizable) != null ? _defaultColumnOptions4 : false;
const selectColumnWidth = Math.floor(Math.floor(Math.log(rowsCount || 1) / Math.log(10)) * 10 + 35);
const {
columns,
lastFrozenColumnIndex,
groupBy
} = useMemo(() => {
const groupBy = [];
let lastFrozenColumnIndex = -1;
const columns = rawColumns.map(rawColumn => {
var _rawGroupBy$includes, _rawColumn$sortable, _rawColumn$resizable, _rawColumn$clickable, _rawColumn$formatter;
const rowGroup = (_rawGroupBy$includes = rawGroupBy == null ? void 0 : rawGroupBy.includes(rawColumn.key)) != null ? _rawGroupBy$includes : false;
const frozen = rowGroup || rawColumn.frozen || false;
const column = {
...rawColumn,
idx: 0,
frozen,
isLastFrozenColumn: false,
rowGroup,
sortable: (_rawColumn$sortable = rawColumn.sortable) != null ? _rawColumn$sortable : defaultSortable,
resizable: (_rawColumn$resizable = rawColumn.resizable) != null ? _rawColumn$resizable : defaultResizable,
clickable: (_rawColumn$clickable = rawColumn.clickable) != null ? _rawColumn$clickable : true,
formatter: (_rawColumn$formatter = rawColumn.formatter) != null ? _rawColumn$formatter : defaultFormatter,
editor: readonly ? ReadOnlyEditor : rawColumn.editor
};
if (rawColumn.key === SELECT_COLUMN_KEY) {
column.width = selectColumnWidth;
}
if (rowGroup) {
var _column$groupFormatte;
(_column$groupFormatte = column.groupFormatter) != null ? _column$groupFormatte : column.groupFormatter = ToggleGroupFormatter;
}
if (frozen) {
lastFrozenColumnIndex++;
}
return column;
});
columns.sort(({
key: aKey,
frozen: frozenA
}, {
key: bKey,
frozen: frozenB
}) => {
if (aKey === SELECT_COLUMN_KEY) return -1;
if (bKey === SELECT_COLUMN_KEY) return 1;
if (rawGroupBy != null && rawGroupBy.includes(aKey)) {
if (rawGroupBy.includes(bKey)) {
return rawGroupBy.indexOf(aKey) - rawGroupBy.indexOf(bKey);
}
return -1;
}
if (rawGroupBy != null && rawGroupBy.includes(bKey)) return 1;
if (frozenA) {
if (frozenB) return 0;
return -1;
}
if (frozenB) return 1;
return 0;
});
columns.forEach((column, idx) => {
column.idx = idx;
});
if (lastFrozenColumnIndex !== -1) {
columns[lastFrozenColumnIndex].isLastFrozenColumn = true;
}
return {
columns,
lastFrozenColumnIndex,
groupBy
};
}, [rawColumns, defaultFormatter, defaultResizable, defaultSortable, rawGroupBy, rowsCount, readonly]);
const {
layoutCssVars,
totalColumnWidth,
totalFrozenColumnWidth,
columnMetrics
} = useMemo(() => {
const columnMetrics = new Map();
let left = 0;
let totalColumnWidth = 0;
let totalFrozenColumnWidth = 0;
let templateColumns = '';
let allocatedWidth = 0;
let unassignedColumnsCount = 0;
for (const column of columns) {
let width = getSpecifiedWidth(column, columnWidths, viewportWidth);
if (width === undefined) {
unassignedColumnsCount++;
} else {
width = clampColumnWidth(width, column, minColumnWidth);
allocatedWidth += width;
columnMetrics.set(column, {
width,
left: 0
});
}
}
const unallocatedWidth = viewportWidth - allocatedWidth - 1;
const floorWidth = Math.floor(unallocatedWidth / unassignedColumnsCount);
const lastValue = Math.floor(unallocatedWidth - floorWidth * (unassignedColumnsCount - 1));
let unallocatedColumnWidth = [];
if (unassignedColumnsCount > 0) {
unallocatedColumnWidth = new Array(unassignedColumnsCount - 1).fill(floorWidth);
unallocatedColumnWidth.push(lastValue);
}
for (const column of columns) {
let width;
if (columnMetrics.has(column)) {
const columnMetric = columnMetrics.get(column);
columnMetric.left = left;
({
width
} = columnMetric);
} else {
width = clampColumnWidth(unallocatedColumnWidth.pop(), column, minColumnWidth);
columnMetrics.set(column, {
width,
left
});
}
totalColumnWidth += width;
left += width;
templateColumns += `${width}px `;
}
if (lastFrozenColumnIndex !== -1) {
const columnMetric = columnMetrics.get(columns[lastFrozenColumnIndex]);
totalFrozenColumnWidth = columnMetric.left + columnMetric.width;
}
const layoutCssVars = {
'--template-columns': templateColumns
};
for (let i = 0; i <= lastFrozenColumnIndex; i++) {
const column = columns[i];
layoutCssVars[`--frozen-left-${column.key}`] = `${columnMetrics.get(column).left}px`;
}
return {
layoutCssVars,
totalColumnWidth,
totalFrozenColumnWidth,
columnMetrics
};
}, [columnWidths, columns, viewportWidth, minColumnWidth, lastFrozenColumnIndex]);
const [colOverscanStartIdx, colOverscanEndIdx, colVisibleStartIdx, colVisibleEndIdx] = useMemo(() => {
if (!enableVirtualization) {
return [0, columns.length - 1];
}
const viewportLeft = scrollLeft + totalFrozenColumnWidth;
const viewportRight = scrollLeft + viewportWidth;
const lastColIdx = columns.length - 1;
const firstUnfrozenColumnIdx = Math.min(lastFrozenColumnIndex + 1, lastColIdx);
if (viewportLeft >= viewportRight) {
return [firstUnfrozenColumnIdx, firstUnfrozenColumnIdx];
}
let colVisibleStartIdx = firstUnfrozenColumnIdx;
while (colVisibleStartIdx < lastColIdx) {
const {
left,
width
} = columnMetrics.get(columns[colVisibleStartIdx]);
if (left + width > viewportLeft) {
break;
}
colVisibleStartIdx++;
}
let colVisibleEndIdx = colVisibleStartIdx;
while (colVisibleEndIdx < lastColIdx) {
const {
left,
width
} = columnMetrics.get(columns[colVisibleEndIdx]);
if (left + width >= viewportRight) {
break;
}
colVisibleEndIdx++;
}
const colOverscanStartIdx = Math.max(firstUnfrozenColumnIdx, colVisibleStartIdx - 10);
const colOverscanEndIdx = Math.min(lastColIdx, colVisibleEndIdx + 10);
return [colOverscanStartIdx, colOverscanEndIdx, colVisibleStartIdx, colVisibleEndIdx];
}, [columnMetrics, columns, lastFrozenColumnIndex, scrollLeft, totalFrozenColumnWidth, viewportWidth, enableVirtualization]);
return {
columns,
colOverscanStartIdx,
colOverscanEndIdx,
layoutCssVars,
columnMetrics,
totalColumnWidth,
lastFrozenColumnIndex,
totalFrozenColumnWidth,
groupBy,
colVisibleStartIdx,
colVisibleEndIdx
};
}
function getSpecifiedWidth({
key,
width
}, columnWidths, viewportWidth) {
if (columnWidths.has(key)) {
return columnWidths.get(key);
}
if (typeof width === 'number') {
return width;
}
if (typeof width === 'string' && /^\d+%$/.test(width)) {
return Math.floor(viewportWidth * parseInt(width, 10) / 100);
}
return undefined;
}
function clampColumnWidth(width, {
minWidth,
maxWidth,
key
}, minColumnWidth) {
if (key === SELECT_COLUMN_KEY) {
return width;
}
width = Math.max(width, minWidth != null ? minWidth : minColumnWidth);
if (typeof maxWidth === 'number') {
return Math.min(width, maxWidth);
}
return width;
}
function useClickOutside(onClick) {
const frameRequestRef = useRef();
function cancelAnimationFrameRequest() {
if (typeof frameRequestRef.current === 'number') {
cancelAnimationFrame(frameRequestRef.current);
frameRequestRef.current = undefined;
}
}
const onClickRef = useRef(() => {
throw new Error('Cannot call an event handler while rendering.');
});
useEffect(() => {
onClickRef.current = onClick;
});
useEffect(() => {
function onOutsideClick() {
frameRequestRef.current = undefined;
onClickRef.current();
}
function onWindowCaptureClick() {
cancelAnimationFrameRequest();
frameRequestRef.current = requestAnimationFrame(onOutsideClick);
}
window.addEventListener('click', onWindowCaptureClick, {
capture: true
});
return () => {
window.removeEventListener('click', onWindowCaptureClick, {
capture: true
});
cancelAnimationFrameRequest();
};
}, []);
return cancelAnimationFrameRequest;
}
const ResizeObserver = window.ResizeObserver || ResizeObserver$1;
function useGridDimensions() {
const gridRef = useRef(null);
const [gridWidth, setGridWidth] = useState(1);
const [gridHeight, setGridHeight] = useState(1);
useLayoutEffect(() => {
if (ResizeObserver == null) return;
const resizeObserver = new ResizeObserver(() => {
const {
clientWidth,
clientHeight
} = gridRef.current;
setGridWidth(clientWidth);
setGridHeight(clientHeight);
});
resizeObserver.observe(gridRef.current);
return () => {
resizeObserver.disconnect();
};
}, []);
return [gridRef, gridWidth, gridHeight];
}
function useViewportColumns({
columns,
colOverscanStartIdx,
colOverscanEndIdx
}) {
const startIdx = colOverscanStartIdx;
return useMemo(() => {
const viewportColumns = [];
for (let colIdx = 0; colIdx <= colOverscanEndIdx; colIdx++) {
const column = columns[colIdx];
if (colIdx < startIdx && !column.frozen) continue;
viewportColumns.push(column);
}
return viewportColumns;
}, [startIdx, colOverscanEndIdx, columns]);
}
const RENDER_BACTCH_SIZE = 8;
function useViewportRows({
rawRows,
rawColumns,
rowHeight,
clientHeight,
scrollTop,
enableVirtualization,
sortInfo,
rowFilters,
searchKey
}) {
const rowsCount = rawRows.length;
const filterRows = useCallback(rawRows => {
const filterColumnKeys = Object.keys(rowFilters).filter(columnKey => {
var _rowFilters$columnKey;
return (_rowFilters$columnKey = rowFilters[columnKey]) == null ? void 0 : _rowFilters$columnKey.size;
});
if (!filterColumnKeys.length && !searchKey) return rawRows;
return rawRows.filter(row => {
let isPass = true;
if (searchKey) {
let hit = false;
for (const columnName of Object.keys(row)) {
const columnValue = row[columnName] || '';
if (isString(columnValue) && columnValue.toLowerCase().indexOf(searchKey == null ? void 0 : searchKey.toLowerCase()) > -1) {
hit = true;
break;
}
}
if (!hit) {
return false;
}
}
for (const columnKey of filterColumnKeys) {
var _rowFilters$columnKey2;
let cellValue = row[columnKey];
if (cellValue === null) {
cellValue = FILTER_NULL_KEY;
} else if (typeof cellValue === 'string' && !cellValue.trim()) {
cellValue = FILTER_EMPTY_KEY;
}
if (!((_rowFilters$columnKey2 = rowFilters[columnKey]) != null && _rowFilters$columnKey2.has(cellValue))) {
isPass = false;
break;
}
}
return isPass;
});
}, [rowFilters, searchKey, rawColumns]);
const sortRows = useCallback(sortedRawRows => {
if (sortInfo.columnKey && Array.isArray(sortedRawRows) && sortInfo.direction !== "NONE") {
var _column$dataType;
const columnKey = sortInfo.columnKey;
const column = rawColumns == null ? void 0 : rawColumns.find(c => c.key === columnKey);
const columnType = (_column$dataType = column == null ? void 0 : column.dataType) != null ? _column$dataType : "string";
sortedRawRows = sortBy(sortedRawRows, row => {
const value = row[columnKey];
if (columnType === "number") {
return toNumber(value);
}
return value;
});
if (sortInfo.direction === "DESC") {
sortedRawRows = reverse(sortedRawRows);
}
}
return sortedRawRows;
}, [sortInfo]);
const rows = useMemo(() => {
return sortRows(filterRows(rawRows));
}, [rawRows, searchKey, sortInfo, rowFilters]);
if (!enableVirtualization) {
return {
rowOverscanStartIdx: 0,
rowOverscanEndIdx: rows.length - 1,
rows,
rowsCount
};
}
const overscanThreshold = 10;
const rowVisibleStartIdx = Math.floor(scrollTop / rowHeight);
const rowVisibleEndIdx = Math.min(rows.length - 1, Math.floor((scrollTop + clientHeight) / rowHeight));
const rowOverscanStartIdx = Math.max(0, Math.floor((rowVisibleStartIdx - overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
const rowOverscanEndIdx = Math.min(rows.length - 1, Math.ceil((rowVisibleEndIdx + overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
return {
rowOverscanStartIdx,
rowOverscanEndIdx,
rowVisibleStartIdx,
rowVisibleEndIdx,
rows,
rowsCount
};
}
function useLatestFunc(fn) {
const ref = useRef(fn);
useEffect(() => {
ref.current = fn;
});
return useCallback((...args) => {
ref.current(...args);
}, []);
}
function useMouse(ref, isMouseDown) {
const [isMouseInElement, setIsMouseInElement] = useState(false);
const [mouseLeaveEvent, setMouseLeaveEvent] = useState(null);
useEffect(() => {
function onMouseLeave(e) {
setIsMouseInElement(false);
setMouseLeaveEvent(e);
}
function onMouseEnter(e) {
setIsMouseInElement(true);
setMouseLeaveEvent(null);
}
if (ref.current && isMouseDown) {
ref.current.addEventListener('mouseout', onMouseLeave);
ref.current.addEventListener('mouseenter', onMouseEnter);
}
return () => {
var _ref$current, _ref$current2;
(_ref$current = ref.current) == null || _ref$current.removeEventListener('mouseout', onMouseLeave);
(_ref$current2 = ref.current) == null || _ref$current2.removeEventListener('mouseenter', onMouseEnter);
};
}, [ref.current, isMouseDown]);
return {
isMouseInElement,
mouseLeaveEvent
};
}
var RangeMode;
(function (RangeMode) {
RangeMode["SELECT"] = "SELECT";
RangeMode["EDIT"] = "EDIT";
})(RangeMode || (RangeMode = {}));
const INVALID_IDX = -1;
const defaultSelectedRange = Object.freeze({
rowIdx: INVALID_IDX,
columnIdx: INVALID_IDX,
endRowIdx: INVALID_IDX,
endColumnIdx: INVALID_IDX,
mode: RangeMode.SELECT
});
function isRangeSelected(range) {
return range !== defaultSelectedRange;
}
function isCellInRange(columnIdx, rowIdx, range) {
const beginColumnIdx = Math.min(range.columnIdx, range.endColumnIdx);
const endColumnIdx = Math.max(range.columnIdx, range.endColumnIdx);
const beginRowIdx = Math.min(range.rowIdx, range.endRowIdx);
const endRowIdx = Math.max(range.rowIdx, range.endRowIdx);
if (inRange(columnIdx, beginColumnIdx, endColumnIdx + 1) && inRange(rowIdx, beginRowIdx, endRowIdx + 1)) return true;
return false;
}
function useSelection(rows, columns, isCellWithinRange, rowKeyGetter, onSelectChange) {
const [selectedRange, setSelectedRange] = useState(defaultSelectedRange);
const [selectedColumns, setSelectColumns] = useState(new Set());
const [selectedRows, setSelectedRows] = useState(new Set());
const startIdxRef = useRef(0);
const isSelectedRangeEditable = useMemo(() => {
return isCellWithinRange(selectedRange) && isCellEditable({
row: rows[selectedRange.rowIdx],
column: columns[selectedRange.columnIdx]
});
}, [selectedRange, isCellWithinRange, rows, columns]);
const selectRow = useCallback(({
rowIdx,
isShiftClick,
isCtrlClick
}) => {
var _selectedRows$has;
const row = rows[rowIdx];
const rowKey = rowKeyGetter(row);
const checked = (_selectedRows$has = selectedRows == null ? void 0 : selectedRows.has(rowKey)) != null ? _selectedRows$has : false;
const nextSelectedRows = new Set(selectedRows);
if (isCtrlClick) {
if (!checked) {
nextSelectedRows.add(rowKey);
} else {
nextSelectedRows.delete(rowKey);
}
} else if (isShiftClick) {
const endIdx = rowIdx;
const minIndex = Math.min(startIdxRef.current, endIdx);
const maxIndex = Math.max(startIdxRef.current, endIdx);
nextSelectedRows.clear();
for (let i = minIndex; i <= maxIndex; i++) {
nextSelectedRows.add(rowKeyGetter(rows[i]));
}
} else {
nextSelectedRows.clear();
if (!checked) {
nextSelectedRows.add(rowKey);
startIdxRef.current = rowIdx;
}
}
setSelectColumns(new Set());
setSelectedRows(nextSelectedRows);
setSelectedRange(defaultSelectedRange);
onSelectChange == null || onSelectChange([...nextSelectedRows], []);
}, [rows, rowKeyGetter, selectedRows, startIdxRef, onSelectChange]);
const selectColumn = useCallback(({
columnIdx,
isShiftClick,
isCtrlClick
}) => {
var _columns$columnIdx, _selectedColumns$has;
const key = (_columns$columnIdx = columns[columnIdx]) == null ? void 0 : _columns$columnIdx.key;
if (!key) {
return;
}
const checked = (_selectedColumns$has = selectedColumns == null ? void 0 : selectedColumns.has(key)) != null ? _selectedColumns$has : false;
const nextSelectedColumns = new Set(selectedColumns);
if (isCtrlClick) {
if (!checked) {
nextSelectedColumns.add(key);
} else {
nextSelectedColumns.delete(key);
}
} else if (isShiftClick) {
const endIdx = columnIdx;
const minIndex = Math.min(startIdxRef.current, endIdx);
const maxIndex = Math.max(startIdxRef.current, endIdx);
nextSelectedColumns.clear();
for (let i = minIndex; i <= maxIndex; i++) {
var _columns$i;
if ((_columns$i = columns[i]) != null && _columns$i.key) {
nextSelectedColumns.add(columns[i].key);
}
}
} else {
nextSelectedColumns.clear();
if (!checked) {
nextSelectedColumns.add(key);
startIdxRef.current = columnIdx;
}
}
setSelectColumns(nextSelectedColumns);
if (columnIdx !== 0) {
setSelectedRows(new Set());
}
setSelectedRange(defaultSelectedRange);
onSelectChange == null || onSelectChange([], [...nextSelectedColumns]);
}, [columns, selectedColumns, startIdxRef, onSelectChange]);
const selectCell = useCallback((position, isShiftClick = false, enableEditor = false) => {
if (!isCellWithinRange(position)) return;
if (enableEditor && isSelectedRangeEditable) {
setSelectedRange({
...position,
mode: RangeMode.EDIT,
key: null
});
} else {
if (isShiftClick) {
const {
endColumnIdx,
endRowIdx
} = position;
setSelectedRange({
...selectedRange,
endColumnIdx,
endRowIdx,
mode: RangeMode.SELECT
});
} else {
setSelectedRange({
...position,
mode: RangeMode.SELECT
});
}
}
setSelectColumns(new Set());
if (![-1, 0].includes(position.columnIdx)) {
setSelectedRows(new Set());
}
if (position.rowIdx < 0) {
onSelectChange == null || onSelectChange([]);
} else {
const {
rowIdx,
endRowIdx,
columnIdx,
endColumnIdx
} = position;
onSelectChange == null || onSelectChange((rows == null ? void 0 : rows.slice(Math.min(rowIdx, endRowIdx), Math.max(rowIdx, endRowIdx) + 1).map(row => rowKeyGetter(row))) || [], columns == null ? void 0 : columns.slice(Math.min(columnIdx, endColumnIdx), Math.max(columnIdx, endColumnIdx) + 1).map(column => column.key));
}
}, [isCellWithinRange, selectedRange, rows, isSelectedRangeEditable, onSelectChange]);
const selectAllRows = useCallback(() => {
if (!(rows != null && rows.length)) {
return;
}
const rowIndexs = rows.map(row => rowKeyGetter(row));
const columnIndexs = columns.map(column => column.key);
const newSelectedRows = new Set(rowIndexs);
const newSelectedColumns = new Set(columnIndexs);
setSelectedRows(newSelectedRows);
setSelectColumns(newSelectedColumns);
setSelectedRange({
...defaultSelectedRange,
columnIdx: 0,
rowIdx: 0,
endColumnIdx: columns.length - 1,
endRowIdx: rows.length - 1
});
onSelectChange == null || onSelectChange([...newSelectedRows], [...newSelectedColumns]);
}, [rows, columns]);
const handleSelect = useLatestFunc(useCallback(data => {
const {
rowIdx,
columnIdx,
isShiftClick = false,
isCtrlClick = false,
isUpdateIndex = true,
enableEditor = false
} = data;
if (rowIdx === -1 || columnIdx === -1) {
if (rowIdx === -1 && columnIdx === -1) {
selectAllRows();
} else if (rowIdx === -1) {
selectColumn({
columnIdx,
isShiftClick,
isCtrlClick
});
} else {
selectRow({
rowIdx,
isShiftClick,
isCtrlClick
});
}
} else {
const _selectedRange = {
...selectedRange,
endColumnIdx: columnIdx,
endRowIdx: rowIdx
};
if (isUpdateIndex) {
_selectedRange.columnIdx = columnIdx;
_selectedRange.rowIdx = rowIdx;
}
selectCell(_selectedRange, false, enableEditor);
}
}, [selectAllRows, selectColumn, selectRow, selectedRange, selectCell]));
return {
selectedRange,
selectedRows,
selectedColumns,
isSelectedRangeEditable,
handleSelect
};
}
function usePaste(options) {
const {
gridContext,
patchRows,
pasteFormatter
} = options;
return text => {
const {
rows,
columns,
rowKeyName,
rowKeyGetter,
selectedRows,
selectedColumns,
selectedRange
} = gridContext;
const columnLength = columns.length - 1;
const contentStartColIdx = columns.findIndex(col => col.key !== SELECT_COLUMN_KEY);
const csvArray = parseCSV(text);
const updatedRows = [];
const insertedRows = [];
function produceRow(row, start, end, csvRow) {
const draftRow = cloneDeep(row);
while (start <= end && csvRow.length) {
let colValue = csvRow.shift();
const column = columns[start];
if (isCellEditable({
row,
column
})) {
draftRow[column.key] = pasteFormatter ? pasteFormatter(row, column, colValue) : colValue;
}
start++;
}
return draftRow;
}
function insertRows(csvArray, rowProducer) {
if (!csvArray.length) return;
csvArray.forEach(csvRow => {
insertedRows.push(rowProducer(csvRow));
});
}
if (selectedRows != null && selectedRows.size) {
let rowBeginIdx = Math.min(...rows.map((row, idx) => {
return selectedRows.has(rowKeyGetter(row)) ? idx : Number.MAX_SAFE_INTEGER;
}));
let i = rowBeginIdx;
for (; i < rows.length; i++) {
const csvRow = csvArray.shift();
if (!csvRow) break;
const editedRow = produceRow(rows[i], contentStartColIdx, columnLength, csvRow);
updatedRows.push(editedRow);
}
if (i === rows.length && csvArray.length) {
insertRows(csvArray, csvRow => produceRow({}, contentStartColIdx, columnLength, csvRow));
}
} else if (selectedColumns.size) {
const columnBeginIdx = columns.findIndex(column => {
return selectedColumns.has(column.key);
});
csvArray.forEach((csvRow, rowIdx) => {
if (!rows[rowIdx]) return;
if (columnBeginIdx !== -1) {
updatedRows.push(produceRow(rows[rowIdx], columnBeginIdx, columns.length - 1, csvRow));
}
});
} else if (isRangeSelected(selectedRange)) {
const startIdx = Math.min(selectedRange.columnIdx, selectedRange.endColumnIdx);
let endIdx = Math.max(selectedRange.columnIdx, selectedRange.endColumnIdx);
let startRowIdx = Math.min(selectedRange.rowIdx, selectedRange.endRowIdx);
let endRowIdx = Math.max(selectedRange.rowIdx, selectedRange.endRowIdx);
if (startIdx === endIdx && startRowIdx === endRowIdx) {
endRowIdx = rows.length - 1;
endIdx = columns.length - 1;
}
while (startRowIdx <= endRowIdx) {
const draftRow = cloneDeep(rows[startRowIdx]);
const csvRow = csvArray.shift();
if (csvRow) {