@antv/s2-react
Version:
use S2 with react
126 lines • 5.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditCell = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const SpreadSheetContext_1 = require("../../../../../context/SpreadSheetContext");
const hooks_1 = require("../../../../../hooks");
const invokeComponent_1 = require("../../../../../utils/invokeComponent");
require("./index.less");
function EditCellComponent(props) {
const { params, resolver } = props;
const s2 = (0, SpreadSheetContext_1.useSpreadSheetInstance)();
const { cell, onDataCellEditStart, onDataCellEditEnd, CustomComponent } = params;
const { left, top, width, height } = react_1.default.useMemo(() => {
var _a;
const rect = (_a = s2.getCanvasElement()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
return {
left: window.scrollX + rect.left,
top: window.scrollY + rect.top,
width: rect.width,
height: rect.height,
};
}, [s2]);
const { x: cellLeft, y: cellTop, width: cellWidth, height: cellHeight, } = react_1.default.useMemo(() => {
const scroll = s2.facet.getScrollOffset();
const cellMeta = (0, lodash_1.pick)(cell === null || cell === void 0 ? void 0 : cell.getMeta(), ['x', 'y', 'width', 'height']);
if ((0, lodash_1.isNil)(cellMeta.x) || (0, lodash_1.isNil)(cellMeta.y)) {
return {
x: 0,
y: 0,
width: 0,
height: 0,
};
}
const sampleColNode = s2.facet.getColNodes()[0];
const sampleColNodeHeight = (sampleColNode === null || sampleColNode === void 0 ? void 0 : sampleColNode.height) || 0;
cellMeta.x -= scroll.scrollX || 0;
cellMeta.y -= (scroll.scrollY || 0) - sampleColNodeHeight;
return cellMeta;
}, [cell, s2]);
const [inputVal, setInputVal] = react_1.default.useState(() => cell.getFieldValue());
const inputRef = react_1.default.useRef(null);
const containerRef = react_1.default.useRef(null);
const onSave = () => tslib_1.__awaiter(this, void 0, void 0, function* () {
var _a;
const { rowIndex, valueField, id } = cell.getMeta();
const displayData = s2.dataSet.getDisplayDataSet();
displayData[rowIndex][valueField] = inputVal;
// 编辑后的值作为格式化后的结果, formatter 不再触发, 避免二次格式化
(_a = s2.dataSet.displayFormattedValueMap) === null || _a === void 0 ? void 0 : _a.set(id, inputVal);
yield s2.render();
const editedMeta = (0, s2_1.customMerge)(cell.getMeta(), {
fieldValue: inputVal,
data: {
[valueField]: inputVal,
},
});
onDataCellEditEnd === null || onDataCellEditEnd === void 0 ? void 0 : onDataCellEditEnd(editedMeta, cell);
resolver(true);
});
const onKeyDown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
onSave();
}
};
// 让输入框聚焦时光标在文字的末尾
const onFocus = (e) => {
e.target.selectionStart = e.target.value.length;
e.target.selectionEnd = e.target.value.length;
};
const styleProps = react_1.default.useMemo(() => {
return {
left: cellLeft,
top: cellTop,
width: cellWidth,
height: cellHeight,
zIndex: 1000,
};
}, []);
const onChangeValue = react_1.default.useCallback((val) => {
setInputVal(val);
}, []);
const onChange = react_1.default.useCallback((e) => {
onChangeValue(e.target.value);
}, [onChangeValue]);
react_1.default.useEffect(() => {
onDataCellEditStart === null || onDataCellEditStart === void 0 ? void 0 : onDataCellEditStart(cell.getMeta(), cell);
setTimeout(() => {
var _a, _b;
// 防止触发表格全选
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.click();
// 开启 preventScroll, 防止页面有滚动条时触发滚动
(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
});
}, []);
return (react_1.default.createElement("div", { ref: containerRef, style: {
zIndex: 500,
position: 'absolute',
overflow: 'hidden',
left,
top,
width,
height,
} }, CustomComponent ? (react_1.default.createElement(CustomComponent, { cell: cell, spreadsheet: s2, value: inputVal, style: styleProps, onChange: onChangeValue, onSave: onSave })) : (react_1.default.createElement("textarea", { required: true, style: styleProps, className: `${s2_1.S2_PREFIX_CLS}-edit-cell`, value: inputVal, ref: inputRef, onChange: onChange, onBlur: onSave, onKeyDown: onKeyDown, onFocus: onFocus }))));
}
exports.EditCell = react_1.default.memo((props) => {
const { CustomComponent } = props;
const s2 = (0, SpreadSheetContext_1.useSpreadSheetInstance)();
const onEditCell = react_1.default.useCallback((event) => {
(0, invokeComponent_1.invokeComponent)({
component: EditCellComponent,
params: {
cell: s2.getCell(event.target),
CustomComponent,
},
s2,
});
}, [CustomComponent, s2]);
(0, hooks_1.useS2Event)(s2_1.S2Event.DATA_CELL_DOUBLE_CLICK, onEditCell, s2);
return null;
});
exports.EditCell.displayName = 'EditCell';
//# sourceMappingURL=index.js.map