899 lines
40 KiB
JavaScript
899 lines
40 KiB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
|
|
import _toArray from "@babel/runtime/helpers/esm/toArray";
|
|
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
var _excluded = ["map_row_parentKey"],
|
|
_excluded2 = ["map_row_parentKey", "map_row_key"],
|
|
_excluded3 = ["map_row_key"];
|
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { LoadingOutlined } from '@ant-design/icons';
|
|
import { useIntl } from '@ant-design/pro-provider';
|
|
import { Form, Popconfirm, message } from 'antd';
|
|
import useLazyKVMap from "antd/es/table/hooks/useLazyKVMap";
|
|
import useMergedState from "rc-util/es/hooks/useMergedState";
|
|
import get from "rc-util/es/utils/get";
|
|
import set from "rc-util/es/utils/set";
|
|
import { noteOnce } from "rc-util/es/warning";
|
|
import React, { createRef, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
import { useDebounceFn, useRefFunction } from '..';
|
|
import { ProFormContext } from "../components/ProFormContext";
|
|
import { useDeepCompareEffectDebounce } from "../hooks/useDeepCompareEffect";
|
|
import { usePrevious } from "../hooks/usePrevious";
|
|
import { merge } from "../merge";
|
|
import { useMountMergeState } from "../useMountMergeState";
|
|
|
|
/**
|
|
* 兼容antd@4 和 antd@5 的warning
|
|
* @param messageStr
|
|
*/
|
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
var warning = function warning(messageStr) {
|
|
// @ts-ignore
|
|
return (message.warn || message.warning)(messageStr);
|
|
};
|
|
export var recordKeyToString = function recordKeyToString(rowKey) {
|
|
if (Array.isArray(rowKey)) return rowKey.join(',');
|
|
return rowKey;
|
|
};
|
|
/**
|
|
* 使用map 来删除数据，性能一般 但是准确率比较高
|
|
*
|
|
* @param keyProps
|
|
* @param action
|
|
*/
|
|
export function editableRowByKey(keyProps, action) {
|
|
var _recordKeyToString;
|
|
var getRowKey = keyProps.getRowKey,
|
|
row = keyProps.row,
|
|
data = keyProps.data,
|
|
_keyProps$childrenCol = keyProps.childrenColumnName,
|
|
childrenColumnName = _keyProps$childrenCol === void 0 ? 'children' : _keyProps$childrenCol;
|
|
var key = (_recordKeyToString = recordKeyToString(keyProps.key)) === null || _recordKeyToString === void 0 ? void 0 : _recordKeyToString.toString();
|
|
var kvMap = new Map();
|
|
|
|
/**
|
|
* 打平这个数组
|
|
*
|
|
* @param records
|
|
* @param parentKey
|
|
*/
|
|
function dig(records, map_row_parentKey, map_row_index) {
|
|
records.forEach(function (record, index) {
|
|
var eachIndex = (map_row_index || 0) * 10 + index;
|
|
var recordKey = getRowKey(record, eachIndex).toString();
|
|
// children 取在前面方便拼的时候按照反顺序放回去
|
|
if (record && _typeof(record) === 'object' && childrenColumnName in record) {
|
|
dig(record[childrenColumnName] || [], recordKey, eachIndex);
|
|
}
|
|
var newRecord = _objectSpread(_objectSpread({}, record), {}, {
|
|
map_row_key: recordKey,
|
|
children: undefined,
|
|
map_row_parentKey: map_row_parentKey
|
|
});
|
|
delete newRecord.children;
|
|
if (!map_row_parentKey) {
|
|
delete newRecord.map_row_parentKey;
|
|
}
|
|
kvMap.set(recordKey, newRecord);
|
|
});
|
|
}
|
|
if (action === 'top') {
|
|
kvMap.set(key, _objectSpread(_objectSpread({}, kvMap.get(key)), row));
|
|
}
|
|
dig(data);
|
|
if (action === 'update') {
|
|
kvMap.set(key, _objectSpread(_objectSpread({}, kvMap.get(key)), row));
|
|
}
|
|
if (action === 'delete') {
|
|
kvMap.delete(key);
|
|
}
|
|
var fill = function fill(map) {
|
|
var kvArrayMap = new Map();
|
|
var kvSource = [];
|
|
var fillNewRecord = function fillNewRecord() {
|
|
var fillChildren = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
map.forEach(function (value) {
|
|
if (value.map_row_parentKey && !value.map_row_key) {
|
|
var map_row_parentKey = value.map_row_parentKey,
|
|
rest = _objectWithoutProperties(value, _excluded);
|
|
if (!kvArrayMap.has(map_row_parentKey)) {
|
|
kvArrayMap.set(map_row_parentKey, []);
|
|
}
|
|
if (fillChildren) {
|
|
var _kvArrayMap$get;
|
|
(_kvArrayMap$get = kvArrayMap.get(map_row_parentKey)) === null || _kvArrayMap$get === void 0 || _kvArrayMap$get.push(rest);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
fillNewRecord(action === 'top');
|
|
map.forEach(function (value) {
|
|
if (value.map_row_parentKey && value.map_row_key) {
|
|
var _kvArrayMap$get2;
|
|
var map_row_parentKey = value.map_row_parentKey,
|
|
map_row_key = value.map_row_key,
|
|
rest = _objectWithoutProperties(value, _excluded2);
|
|
if (kvArrayMap.has(map_row_key)) {
|
|
rest[childrenColumnName] = kvArrayMap.get(map_row_key);
|
|
}
|
|
if (!kvArrayMap.has(map_row_parentKey)) {
|
|
kvArrayMap.set(map_row_parentKey, []);
|
|
}
|
|
(_kvArrayMap$get2 = kvArrayMap.get(map_row_parentKey)) === null || _kvArrayMap$get2 === void 0 || _kvArrayMap$get2.push(rest);
|
|
}
|
|
});
|
|
fillNewRecord(action === 'update');
|
|
map.forEach(function (value) {
|
|
if (!value.map_row_parentKey) {
|
|
var map_row_key = value.map_row_key,
|
|
rest = _objectWithoutProperties(value, _excluded3);
|
|
if (map_row_key && kvArrayMap.has(map_row_key)) {
|
|
var item = _objectSpread(_objectSpread({}, rest), {}, _defineProperty({}, childrenColumnName, kvArrayMap.get(map_row_key)));
|
|
kvSource.push(item);
|
|
return;
|
|
}
|
|
kvSource.push(rest);
|
|
}
|
|
});
|
|
return kvSource;
|
|
};
|
|
return fill(kvMap);
|
|
}
|
|
|
|
/**
|
|
* 保存按钮的dom
|
|
*
|
|
* @param ActionRenderConfig
|
|
*/
|
|
export function SaveEditableAction(_ref, ref) {
|
|
var recordKey = _ref.recordKey,
|
|
onSave = _ref.onSave,
|
|
row = _ref.row,
|
|
children = _ref.children,
|
|
newLineConfig = _ref.newLineConfig,
|
|
editorType = _ref.editorType,
|
|
tableName = _ref.tableName;
|
|
var context = useContext(ProFormContext);
|
|
var form = Form.useFormInstance();
|
|
var _useMountMergeState = useMountMergeState(false),
|
|
_useMountMergeState2 = _slicedToArray(_useMountMergeState, 2),
|
|
loading = _useMountMergeState2[0],
|
|
setLoading = _useMountMergeState2[1];
|
|
var save = useRefFunction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
var _context$getFieldForm, isMapEditor, namePath, fields, _recordKey, recordKeyPath, curValue, data, res;
|
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
while (1) switch (_context.prev = _context.next) {
|
|
case 0:
|
|
_context.prev = 0;
|
|
isMapEditor = editorType === 'Map'; // 为了兼容类型为 array 的 dataIndex,当 recordKey 是一个数组时，用于获取表单值的 key 只取第一项，
|
|
// 从表单中获取回来之后，再根据 namepath 获取具体的某个字段并设置
|
|
namePath = [tableName, Array.isArray(recordKey) ? recordKey[0] : recordKey].map(function (key) {
|
|
return key === null || key === void 0 ? void 0 : key.toString();
|
|
}).flat(1).filter(Boolean);
|
|
setLoading(true);
|
|
_context.next = 6;
|
|
return form.validateFields(namePath, {
|
|
recursive: true
|
|
});
|
|
case 6:
|
|
fields = (context === null || context === void 0 || (_context$getFieldForm = context.getFieldFormatValue) === null || _context$getFieldForm === void 0 ? void 0 : _context$getFieldForm.call(context, namePath)) || form.getFieldValue(namePath); // 处理 dataIndex 为数组的情况
|
|
if (Array.isArray(recordKey) && recordKey.length > 1) {
|
|
// 获取 namepath
|
|
_recordKey = _toArray(recordKey), recordKeyPath = _recordKey.slice(1); // 将目标值获取出来并设置到 fields 当中
|
|
curValue = get(fields, recordKeyPath);
|
|
set(fields, recordKeyPath, curValue);
|
|
}
|
|
data = isMapEditor ? set({}, namePath, fields) : fields; // 获取数据并保存
|
|
_context.next = 11;
|
|
return onSave === null || onSave === void 0 ? void 0 : onSave(recordKey,
|
|
// 如果是 map 模式，fields 就是一个值，所以需要set 到对象中
|
|
// 数据模式 fields 是一个对象，所以不需要
|
|
merge({}, row, data), row, newLineConfig);
|
|
case 11:
|
|
res = _context.sent;
|
|
setLoading(false);
|
|
return _context.abrupt("return", res);
|
|
case 16:
|
|
_context.prev = 16;
|
|
_context.t0 = _context["catch"](0);
|
|
// eslint-disable-next-line no-console
|
|
console.log(_context.t0);
|
|
setLoading(false);
|
|
throw _context.t0;
|
|
case 21:
|
|
case "end":
|
|
return _context.stop();
|
|
}
|
|
}, _callee, null, [[0, 16]]);
|
|
})));
|
|
|
|
// 保存数据
|
|
useImperativeHandle(ref, function () {
|
|
return {
|
|
save: save
|
|
};
|
|
}, [save]);
|
|
return /*#__PURE__*/_jsxs("a", {
|
|
onClick: ( /*#__PURE__*/function () {
|
|
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(e) {
|
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
while (1) switch (_context2.prev = _context2.next) {
|
|
case 0:
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
_context2.prev = 2;
|
|
_context2.next = 5;
|
|
return save();
|
|
case 5:
|
|
_context2.next = 9;
|
|
break;
|
|
case 7:
|
|
_context2.prev = 7;
|
|
_context2.t0 = _context2["catch"](2);
|
|
case 9:
|
|
case "end":
|
|
return _context2.stop();
|
|
}
|
|
}, _callee2, null, [[2, 7]]);
|
|
}));
|
|
return function (_x) {
|
|
return _ref3.apply(this, arguments);
|
|
};
|
|
}()),
|
|
children: [loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
|
|
style: {
|
|
marginInlineEnd: 8
|
|
}
|
|
}) : null, children || '保存']
|
|
}, "save");
|
|
}
|
|
/**
|
|
* 删除按钮 dom
|
|
*
|
|
* @param ActionRenderConfig
|
|
*/
|
|
export var DeleteEditableAction = function DeleteEditableAction(_ref4) {
|
|
var recordKey = _ref4.recordKey,
|
|
onDelete = _ref4.onDelete,
|
|
preEditRowRef = _ref4.preEditRowRef,
|
|
row = _ref4.row,
|
|
children = _ref4.children,
|
|
deletePopconfirmMessage = _ref4.deletePopconfirmMessage;
|
|
var _useMountMergeState3 = useMountMergeState(function () {
|
|
return false;
|
|
}),
|
|
_useMountMergeState4 = _slicedToArray(_useMountMergeState3, 2),
|
|
loading = _useMountMergeState4[0],
|
|
setLoading = _useMountMergeState4[1];
|
|
var _onConfirm = useRefFunction( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
var res;
|
|
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
while (1) switch (_context3.prev = _context3.next) {
|
|
case 0:
|
|
_context3.prev = 0;
|
|
setLoading(true);
|
|
_context3.next = 4;
|
|
return onDelete === null || onDelete === void 0 ? void 0 : onDelete(recordKey, row);
|
|
case 4:
|
|
res = _context3.sent;
|
|
setLoading(false);
|
|
return _context3.abrupt("return", res);
|
|
case 9:
|
|
_context3.prev = 9;
|
|
_context3.t0 = _context3["catch"](0);
|
|
// eslint-disable-next-line no-console
|
|
console.log(_context3.t0);
|
|
setLoading(false);
|
|
return _context3.abrupt("return", null);
|
|
case 14:
|
|
_context3.prev = 14;
|
|
if (preEditRowRef) preEditRowRef.current = null;
|
|
return _context3.finish(14);
|
|
case 17:
|
|
case "end":
|
|
return _context3.stop();
|
|
}
|
|
}, _callee3, null, [[0, 9, 14, 17]]);
|
|
})));
|
|
return children !== false ? /*#__PURE__*/_jsx(Popconfirm, {
|
|
title: deletePopconfirmMessage,
|
|
onConfirm: function onConfirm() {
|
|
return _onConfirm();
|
|
},
|
|
children: /*#__PURE__*/_jsxs("a", {
|
|
children: [loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
|
|
style: {
|
|
marginInlineEnd: 8
|
|
}
|
|
}) : null, children || '删除']
|
|
})
|
|
}, "delete") : null;
|
|
};
|
|
var CancelEditableAction = function CancelEditableAction(props) {
|
|
var recordKey = props.recordKey,
|
|
tableName = props.tableName,
|
|
newLineConfig = props.newLineConfig,
|
|
editorType = props.editorType,
|
|
onCancel = props.onCancel,
|
|
cancelEditable = props.cancelEditable,
|
|
row = props.row,
|
|
cancelText = props.cancelText,
|
|
preEditRowRef = props.preEditRowRef;
|
|
var context = useContext(ProFormContext);
|
|
var form = Form.useFormInstance();
|
|
return /*#__PURE__*/_jsx("a", {
|
|
onClick: ( /*#__PURE__*/function () {
|
|
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(e) {
|
|
var _context$getFieldForm2;
|
|
var isMapEditor, namePath, fields, record, res, _props$onDelete;
|
|
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
while (1) switch (_context4.prev = _context4.next) {
|
|
case 0:
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
isMapEditor = editorType === 'Map';
|
|
namePath = [tableName, recordKey].flat(1).filter(Boolean);
|
|
fields = (context === null || context === void 0 || (_context$getFieldForm2 = context.getFieldFormatValue) === null || _context$getFieldForm2 === void 0 ? void 0 : _context$getFieldForm2.call(context, namePath)) || (form === null || form === void 0 ? void 0 : form.getFieldValue(namePath));
|
|
record = isMapEditor ? set({}, namePath, fields) : fields;
|
|
_context4.next = 8;
|
|
return onCancel === null || onCancel === void 0 ? void 0 : onCancel(recordKey, record, row, newLineConfig);
|
|
case 8:
|
|
res = _context4.sent;
|
|
_context4.next = 11;
|
|
return cancelEditable(recordKey);
|
|
case 11:
|
|
if (!((preEditRowRef === null || preEditRowRef === void 0 ? void 0 : preEditRowRef.current) !== null)) {
|
|
_context4.next = 15;
|
|
break;
|
|
}
|
|
form.setFieldsValue(set({}, namePath, preEditRowRef === null || preEditRowRef === void 0 ? void 0 : preEditRowRef.current));
|
|
_context4.next = 17;
|
|
break;
|
|
case 15:
|
|
_context4.next = 17;
|
|
return (_props$onDelete = props.onDelete) === null || _props$onDelete === void 0 ? void 0 : _props$onDelete.call(props, recordKey, row);
|
|
case 17:
|
|
if (preEditRowRef) preEditRowRef.current = null;
|
|
return _context4.abrupt("return", res);
|
|
case 19:
|
|
case "end":
|
|
return _context4.stop();
|
|
}
|
|
}, _callee4);
|
|
}));
|
|
return function (_x2) {
|
|
return _ref6.apply(this, arguments);
|
|
};
|
|
}()),
|
|
children: cancelText || '取消'
|
|
}, "cancel");
|
|
};
|
|
export function defaultActionRender(row, config) {
|
|
var recordKey = config.recordKey,
|
|
newLineConfig = config.newLineConfig,
|
|
saveText = config.saveText,
|
|
deleteText = config.deleteText;
|
|
var SaveEditableActionRef = /*#__PURE__*/forwardRef(SaveEditableAction);
|
|
var saveRef = /*#__PURE__*/createRef();
|
|
return {
|
|
save: /*#__PURE__*/_jsx(SaveEditableActionRef, _objectSpread(_objectSpread({}, config), {}, {
|
|
row: row,
|
|
ref: saveRef,
|
|
children: saveText
|
|
}), 'save' + recordKey),
|
|
saveRef: saveRef,
|
|
delete: (newLineConfig === null || newLineConfig === void 0 ? void 0 : newLineConfig.options.recordKey) !== recordKey ? /*#__PURE__*/_jsx(DeleteEditableAction, _objectSpread(_objectSpread({}, config), {}, {
|
|
row: row,
|
|
children: deleteText
|
|
}), 'delete' + recordKey) : undefined,
|
|
cancel: /*#__PURE__*/_jsx(CancelEditableAction, _objectSpread(_objectSpread({}, config), {}, {
|
|
row: row
|
|
}), 'cancel' + recordKey)
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 一个方便的hooks 用于维护编辑的状态
|
|
*
|
|
* @param props
|
|
*/
|
|
export function useEditableArray(props) {
|
|
// Internationalization
|
|
var intl = useIntl();
|
|
|
|
/**
|
|
* 点击开始编辑之前的保存数据用的
|
|
*/
|
|
var preEditRowRef = useRef(null);
|
|
var _useState = useState(undefined),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
newLineRecordCache = _useState2[0],
|
|
setNewLineRecordCache = _useState2[1];
|
|
var resetMapRef = function resetMapRef() {
|
|
var map = new Map();
|
|
//存在children时会覆盖Map的key,导致使用数组索引查找key错误
|
|
var loopGetKey = function loopGetKey(dataSource, parentKey) {
|
|
dataSource === null || dataSource === void 0 || dataSource.forEach(function (record, index) {
|
|
var _recordKeyToString2;
|
|
var key = parentKey === undefined || parentKey === null ? index.toString() : parentKey + '_' + index.toString();
|
|
map.set(key, recordKeyToString(props.getRowKey(record, -1)));
|
|
map.set((_recordKeyToString2 = recordKeyToString(props.getRowKey(record, -1))) === null || _recordKeyToString2 === void 0 ? void 0 : _recordKeyToString2.toString(), key);
|
|
if (props.childrenColumnName && record !== null && record !== void 0 && record[props.childrenColumnName]) {
|
|
loopGetKey(record[props.childrenColumnName], key);
|
|
}
|
|
});
|
|
};
|
|
loopGetKey(props.dataSource);
|
|
return map;
|
|
};
|
|
var initDataSourceKeyIndexMap = useMemo(function () {
|
|
return resetMapRef();
|
|
}, []);
|
|
var dataSourceKeyIndexMapRef = useRef(initDataSourceKeyIndexMap);
|
|
var newLineRecordRef = useRef(undefined);
|
|
useDeepCompareEffectDebounce(function () {
|
|
dataSourceKeyIndexMapRef.current = resetMapRef();
|
|
}, [props.dataSource]);
|
|
|
|
// 这里这么做是为了存上次的状态，不然每次存一下再拿
|
|
newLineRecordRef.current = newLineRecordCache;
|
|
var editableType = props.type || 'single';
|
|
var _useLazyKVMap = useLazyKVMap(props.dataSource, 'children', props.getRowKey),
|
|
_useLazyKVMap2 = _slicedToArray(_useLazyKVMap, 1),
|
|
getRecordByKey = _useLazyKVMap2[0];
|
|
var _useMergedState = useMergedState([], {
|
|
value: props.editableKeys,
|
|
onChange: props.onChange ? function (keys) {
|
|
var _props$onChange, _keys$filter, _keys$map$filter;
|
|
props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, // 计算编辑的key
|
|
(_keys$filter = keys === null || keys === void 0 ? void 0 : keys.filter(function (key) {
|
|
return key !== undefined;
|
|
})) !== null && _keys$filter !== void 0 ? _keys$filter : [], // 计算编辑的行
|
|
(_keys$map$filter = keys === null || keys === void 0 ? void 0 : keys.map(function (key) {
|
|
return getRecordByKey(key);
|
|
}).filter(function (key) {
|
|
return key !== undefined;
|
|
})) !== null && _keys$map$filter !== void 0 ? _keys$map$filter : []);
|
|
} : undefined
|
|
}),
|
|
_useMergedState2 = _slicedToArray(_useMergedState, 2),
|
|
editableKeys = _useMergedState2[0],
|
|
setEditableRowKeys = _useMergedState2[1];
|
|
|
|
/** 一个用来标志的set 提供了方便的 api 来去重什么的 */
|
|
var editableKeysSet = useMemo(function () {
|
|
var keys = editableType === 'single' ? editableKeys === null || editableKeys === void 0 ? void 0 : editableKeys.slice(0, 1) : editableKeys;
|
|
return new Set(keys);
|
|
}, [(editableKeys || []).join(','), editableType]);
|
|
var editableKeysRef = usePrevious(editableKeys);
|
|
|
|
/** 这行是不是编辑状态 */
|
|
var isEditable = useRefFunction(function (row) {
|
|
var _props$getRowKey, _props$getRowKey$toSt, _props$getRowKey2, _props$getRowKey2$toS;
|
|
// 为了兼容一下name 模式的 indexKey，所以需要判断两次，一次是index，一次是没有 index 的
|
|
var recordKeyOrIndex = (_props$getRowKey = props.getRowKey(row, row.index)) === null || _props$getRowKey === void 0 || (_props$getRowKey$toSt = _props$getRowKey.toString) === null || _props$getRowKey$toSt === void 0 ? void 0 : _props$getRowKey$toSt.call(_props$getRowKey);
|
|
// 这里是不设置 index 的地方
|
|
var recordKey = (_props$getRowKey2 = props.getRowKey(row, -1)) === null || _props$getRowKey2 === void 0 || (_props$getRowKey2$toS = _props$getRowKey2.toString) === null || _props$getRowKey2$toS === void 0 ? void 0 : _props$getRowKey2$toS.call(_props$getRowKey2);
|
|
|
|
// 都转化为了字符串，不然 number 和 string
|
|
var stringEditableKeys = editableKeys === null || editableKeys === void 0 ? void 0 : editableKeys.map(function (key) {
|
|
return key === null || key === void 0 ? void 0 : key.toString();
|
|
});
|
|
var stringEditableKeysRef = (editableKeysRef === null || editableKeysRef === void 0 ? void 0 : editableKeysRef.map(function (key) {
|
|
return key === null || key === void 0 ? void 0 : key.toString();
|
|
})) || [];
|
|
var preIsEditable = props.tableName && !!(stringEditableKeysRef !== null && stringEditableKeysRef !== void 0 && stringEditableKeysRef.includes(recordKey)) || !!(stringEditableKeysRef !== null && stringEditableKeysRef !== void 0 && stringEditableKeysRef.includes(recordKeyOrIndex));
|
|
return {
|
|
recordKey: recordKey,
|
|
isEditable: props.tableName && (stringEditableKeys === null || stringEditableKeys === void 0 ? void 0 : stringEditableKeys.includes(recordKey)) || (stringEditableKeys === null || stringEditableKeys === void 0 ? void 0 : stringEditableKeys.includes(recordKeyOrIndex)),
|
|
preIsEditable: preIsEditable
|
|
};
|
|
});
|
|
|
|
/**
|
|
* 进入编辑状态
|
|
*
|
|
* @param recordKey
|
|
*/
|
|
var startEditable = useRefFunction(function (recordKey, record) {
|
|
var _ref7, _props$dataSource;
|
|
// 如果是单行的话，不允许多行编辑
|
|
if (editableKeysSet.size > 0 && editableType === 'single' && props.onlyOneLineEditorAlertMessage !== false) {
|
|
warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
|
|
return false;
|
|
}
|
|
editableKeysSet.add(recordKey);
|
|
setEditableRowKeys(Array.from(editableKeysSet));
|
|
|
|
// 这里是为了存上次的状态,不然取消的时候就丢掉了
|
|
preEditRowRef.current = (_ref7 = record !== null && record !== void 0 ? record : (_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.find(function (recordData, index) {
|
|
return props.getRowKey(recordData, index) === recordKey;
|
|
})) !== null && _ref7 !== void 0 ? _ref7 : null;
|
|
return true;
|
|
});
|
|
|
|
/**
|
|
* 退出编辑状态
|
|
*
|
|
* @param recordKey
|
|
*/
|
|
var cancelEditable = useRefFunction( /*#__PURE__*/function () {
|
|
var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(recordKey, needReTry) {
|
|
var relayKey, key;
|
|
return _regeneratorRuntime().wrap(function _callee5$(_context5) {
|
|
while (1) switch (_context5.prev = _context5.next) {
|
|
case 0:
|
|
relayKey = recordKeyToString(recordKey).toString();
|
|
key = dataSourceKeyIndexMapRef.current.get(relayKey);
|
|
/** 如果没找到key，转化一下再去找 */
|
|
if (!(!editableKeysSet.has(relayKey) && key && (needReTry !== null && needReTry !== void 0 ? needReTry : true) && props.tableName)) {
|
|
_context5.next = 5;
|
|
break;
|
|
}
|
|
cancelEditable(key, false);
|
|
return _context5.abrupt("return");
|
|
case 5:
|
|
/** 如果这个是 new Line 直接删除 */
|
|
if (newLineRecordCache && newLineRecordCache.options.recordKey === recordKey) {
|
|
setNewLineRecordCache(undefined);
|
|
}
|
|
editableKeysSet.delete(relayKey);
|
|
editableKeysSet.delete(recordKeyToString(recordKey));
|
|
setEditableRowKeys(Array.from(editableKeysSet));
|
|
return _context5.abrupt("return", true);
|
|
case 10:
|
|
case "end":
|
|
return _context5.stop();
|
|
}
|
|
}, _callee5);
|
|
}));
|
|
return function (_x3, _x4) {
|
|
return _ref8.apply(this, arguments);
|
|
};
|
|
}());
|
|
var propsOnValuesChange = useDebounceFn( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
|
|
var _props$onValuesChange;
|
|
var _len,
|
|
rest,
|
|
_key,
|
|
_args6 = arguments;
|
|
return _regeneratorRuntime().wrap(function _callee6$(_context6) {
|
|
while (1) switch (_context6.prev = _context6.next) {
|
|
case 0:
|
|
for (_len = _args6.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
rest[_key] = _args6[_key];
|
|
}
|
|
//@ts-ignore
|
|
(_props$onValuesChange = props.onValuesChange) === null || _props$onValuesChange === void 0 || _props$onValuesChange.call.apply(_props$onValuesChange, [props].concat(rest));
|
|
case 2:
|
|
case "end":
|
|
return _context6.stop();
|
|
}
|
|
}, _callee6);
|
|
})), 64);
|
|
var onValuesChange = useRefFunction(function (value, values) {
|
|
var _Object$keys$pop;
|
|
if (!props.onValuesChange) {
|
|
return;
|
|
}
|
|
var dataSource = props.dataSource;
|
|
|
|
// 这里是把正在编辑中的所有表单数据都修改掉
|
|
// 不然会用 props 里面的 dataSource，数据只有正在编辑中的
|
|
// Object.keys(get(values, [props.tableName || ''].flat(1)) || values).forEach((recordKey) => {
|
|
editableKeys === null || editableKeys === void 0 || editableKeys.forEach(function (eachRecordKey) {
|
|
if ((newLineRecordCache === null || newLineRecordCache === void 0 ? void 0 : newLineRecordCache.options.recordKey) === eachRecordKey) return;
|
|
var recordKey = eachRecordKey.toString();
|
|
// 如果数据在这个 form 中没有展示，也不显示
|
|
var editRow = get(values, [props.tableName || '', recordKey].flat(1).filter(function (key) {
|
|
return key || key === 0;
|
|
}));
|
|
if (!editRow) return;
|
|
dataSource = editableRowByKey({
|
|
data: dataSource,
|
|
getRowKey: props.getRowKey,
|
|
row: editRow,
|
|
key: recordKey,
|
|
childrenColumnName: props.childrenColumnName || 'children'
|
|
}, 'update');
|
|
});
|
|
var relayValue = value;
|
|
var recordKey = (_Object$keys$pop = Object.keys(relayValue || {}).pop()) === null || _Object$keys$pop === void 0 ? void 0 : _Object$keys$pop.toString();
|
|
|
|
//从form 和 cache 中取得数据
|
|
var newLineRecordData = _objectSpread(_objectSpread({}, newLineRecordCache === null || newLineRecordCache === void 0 ? void 0 : newLineRecordCache.defaultValue), get(values, [props.tableName || '', recordKey.toString()].flat(1).filter(function (key) {
|
|
return key || key === 0;
|
|
})));
|
|
|
|
/** 如果已经在 dataSource 中存在了，直接 find */
|
|
var editRow = dataSourceKeyIndexMapRef.current.has(recordKeyToString(recordKey)) ? dataSource.find(function (item, index) {
|
|
var _props$getRowKey3;
|
|
var key = (_props$getRowKey3 = props.getRowKey(item, index)) === null || _props$getRowKey3 === void 0 ? void 0 : _props$getRowKey3.toString();
|
|
return key === recordKey;
|
|
}) : newLineRecordData;
|
|
propsOnValuesChange.run(editRow || newLineRecordData, dataSource);
|
|
});
|
|
var saveRefsMap = useRef(new Map());
|
|
useEffect(function () {
|
|
// 确保只保留编辑状态的，其它的都删除掉
|
|
saveRefsMap.current.forEach(function (ref, key) {
|
|
if (!editableKeysSet.has(key)) {
|
|
saveRefsMap.current.delete(key);
|
|
}
|
|
});
|
|
}, [saveRefsMap, editableKeysSet]);
|
|
/**
|
|
* 保存编辑行
|
|
*
|
|
* @param recordKey
|
|
* @param needReTry
|
|
*/
|
|
var saveEditable = useRefFunction( /*#__PURE__*/function () {
|
|
var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(recordKey, needReTry) {
|
|
var relayKey, key, saveRef, _saveRef$current;
|
|
return _regeneratorRuntime().wrap(function _callee7$(_context7) {
|
|
while (1) switch (_context7.prev = _context7.next) {
|
|
case 0:
|
|
relayKey = recordKeyToString(recordKey);
|
|
key = dataSourceKeyIndexMapRef.current.get(recordKey.toString());
|
|
/** 如果没找到key，转化一下再去找 */
|
|
if (!(!editableKeysSet.has(relayKey) && key && (needReTry !== null && needReTry !== void 0 ? needReTry : true) && props.tableName)) {
|
|
_context7.next = 6;
|
|
break;
|
|
}
|
|
_context7.next = 5;
|
|
return saveEditable(key, false);
|
|
case 5:
|
|
return _context7.abrupt("return", _context7.sent);
|
|
case 6:
|
|
saveRef = saveRefsMap.current.get(relayKey) || saveRefsMap.current.get(relayKey.toString());
|
|
_context7.prev = 7;
|
|
_context7.next = 10;
|
|
return saveRef === null || saveRef === void 0 || (_saveRef$current = saveRef.current) === null || _saveRef$current === void 0 ? void 0 : _saveRef$current.save();
|
|
case 10:
|
|
_context7.next = 15;
|
|
break;
|
|
case 12:
|
|
_context7.prev = 12;
|
|
_context7.t0 = _context7["catch"](7);
|
|
return _context7.abrupt("return", false);
|
|
case 15:
|
|
editableKeysSet.delete(relayKey);
|
|
editableKeysSet.delete(relayKey.toString());
|
|
setEditableRowKeys(Array.from(editableKeysSet));
|
|
return _context7.abrupt("return", true);
|
|
case 19:
|
|
case "end":
|
|
return _context7.stop();
|
|
}
|
|
}, _callee7, null, [[7, 12]]);
|
|
}));
|
|
return function (_x5, _x6) {
|
|
return _ref10.apply(this, arguments);
|
|
};
|
|
}());
|
|
|
|
/**
|
|
* 同时只能支持一行,取消之后数据消息，不会触发 dataSource
|
|
*
|
|
* @param row
|
|
* @param options
|
|
* @name 增加新的行
|
|
*/
|
|
var addEditRecord = useRefFunction(function (row, options) {
|
|
if (options !== null && options !== void 0 && options.parentKey && !dataSourceKeyIndexMapRef.current.has(recordKeyToString(options === null || options === void 0 ? void 0 : options.parentKey).toString())) {
|
|
console.warn("can't find record by key", options === null || options === void 0 ? void 0 : options.parentKey);
|
|
return false;
|
|
}
|
|
// 暂时不支持多行新增
|
|
if (newLineRecordRef.current && props.onlyAddOneLineAlertMessage !== false) {
|
|
warning(props.onlyAddOneLineAlertMessage || intl.getMessage('editableTable.onlyAddOneLine', '只能新增一行'));
|
|
return false;
|
|
}
|
|
// 如果是单行的话，不允许多行编辑
|
|
if (editableKeysSet.size > 0 && editableType === 'single' && props.onlyOneLineEditorAlertMessage !== false) {
|
|
warning(props.onlyOneLineEditorAlertMessage || intl.getMessage('editableTable.onlyOneLineEditor', '只能同时编辑一行'));
|
|
return false;
|
|
}
|
|
// 防止多次渲染
|
|
var recordKey = props.getRowKey(row, -1);
|
|
if (!recordKey && recordKey !== 0) {
|
|
noteOnce(!!recordKey, '请设置 recordCreatorProps.record 并返回一个唯一的key \n https://procomponents.ant.design/components/editable-table#editable-%E6%96%B0%E5%BB%BA%E8%A1%8C');
|
|
throw new Error('请设置 recordCreatorProps.record 并返回一个唯一的key');
|
|
}
|
|
editableKeysSet.add(recordKey);
|
|
setEditableRowKeys(Array.from(editableKeysSet));
|
|
|
|
// 如果是dataSource 新增模式的话，取消再开始编辑，
|
|
// 这样就可以把新增到 dataSource的数据进入编辑模式了
|
|
// [a,b,cache] => [a,b,c]
|
|
if ((options === null || options === void 0 ? void 0 : options.newRecordType) === 'dataSource' || props.tableName) {
|
|
var _recordKeyToString3;
|
|
var actionProps = {
|
|
data: props.dataSource,
|
|
getRowKey: props.getRowKey,
|
|
row: _objectSpread(_objectSpread({}, row), {}, {
|
|
map_row_parentKey: options !== null && options !== void 0 && options.parentKey ? (_recordKeyToString3 = recordKeyToString(options === null || options === void 0 ? void 0 : options.parentKey)) === null || _recordKeyToString3 === void 0 ? void 0 : _recordKeyToString3.toString() : undefined
|
|
}),
|
|
key: recordKey,
|
|
childrenColumnName: props.childrenColumnName || 'children'
|
|
};
|
|
props.setDataSource(editableRowByKey(actionProps, (options === null || options === void 0 ? void 0 : options.position) === 'top' ? 'top' : 'update'));
|
|
} else {
|
|
setNewLineRecordCache({
|
|
defaultValue: row,
|
|
options: _objectSpread(_objectSpread({}, options), {}, {
|
|
recordKey: recordKey
|
|
})
|
|
});
|
|
}
|
|
return true;
|
|
});
|
|
var saveText = (props === null || props === void 0 ? void 0 : props.saveText) || intl.getMessage('editableTable.action.save', '保存');
|
|
var deleteText = (props === null || props === void 0 ? void 0 : props.deleteText) || intl.getMessage('editableTable.action.delete', '删除');
|
|
var cancelText = (props === null || props === void 0 ? void 0 : props.cancelText) || intl.getMessage('editableTable.action.cancel', '取消');
|
|
var actionSaveRef = useRefFunction( /*#__PURE__*/function () {
|
|
var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(recordKey, editRow, originRow, newLine) {
|
|
var _props$onSave, _recordKeyToString4, _options$parentKey;
|
|
var res, _ref12, options, actionProps;
|
|
return _regeneratorRuntime().wrap(function _callee8$(_context8) {
|
|
while (1) switch (_context8.prev = _context8.next) {
|
|
case 0:
|
|
_context8.next = 2;
|
|
return props === null || props === void 0 || (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, recordKey, editRow, originRow, newLine);
|
|
case 2:
|
|
res = _context8.sent;
|
|
_context8.next = 5;
|
|
return cancelEditable(recordKey);
|
|
case 5:
|
|
_ref12 = newLine || newLineRecordRef.current || {}, options = _ref12.options;
|
|
if (!(!(options !== null && options !== void 0 && options.parentKey) && (options === null || options === void 0 ? void 0 : options.recordKey) === recordKey)) {
|
|
_context8.next = 9;
|
|
break;
|
|
}
|
|
if ((options === null || options === void 0 ? void 0 : options.position) === 'top') {
|
|
props.setDataSource([editRow].concat(_toConsumableArray(props.dataSource)));
|
|
} else {
|
|
props.setDataSource([].concat(_toConsumableArray(props.dataSource), [editRow]));
|
|
}
|
|
return _context8.abrupt("return", res);
|
|
case 9:
|
|
actionProps = {
|
|
data: props.dataSource,
|
|
getRowKey: props.getRowKey,
|
|
row: options ? _objectSpread(_objectSpread({}, editRow), {}, {
|
|
map_row_parentKey: (_recordKeyToString4 = recordKeyToString((_options$parentKey = options === null || options === void 0 ? void 0 : options.parentKey) !== null && _options$parentKey !== void 0 ? _options$parentKey : '')) === null || _recordKeyToString4 === void 0 ? void 0 : _recordKeyToString4.toString()
|
|
}) : editRow,
|
|
key: recordKey,
|
|
childrenColumnName: props.childrenColumnName || 'children'
|
|
};
|
|
props.setDataSource(editableRowByKey(actionProps, (options === null || options === void 0 ? void 0 : options.position) === 'top' ? 'top' : 'update'));
|
|
_context8.next = 13;
|
|
return cancelEditable(recordKey);
|
|
case 13:
|
|
return _context8.abrupt("return", res);
|
|
case 14:
|
|
case "end":
|
|
return _context8.stop();
|
|
}
|
|
}, _callee8);
|
|
}));
|
|
return function (_x7, _x8, _x9, _x10) {
|
|
return _ref11.apply(this, arguments);
|
|
};
|
|
}());
|
|
var actionDeleteRef = useRefFunction( /*#__PURE__*/function () {
|
|
var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(recordKey, editRow) {
|
|
var _props$onDelete2;
|
|
var actionProps, res;
|
|
return _regeneratorRuntime().wrap(function _callee9$(_context9) {
|
|
while (1) switch (_context9.prev = _context9.next) {
|
|
case 0:
|
|
actionProps = {
|
|
data: props.dataSource,
|
|
getRowKey: props.getRowKey,
|
|
row: editRow,
|
|
key: recordKey,
|
|
childrenColumnName: props.childrenColumnName || 'children'
|
|
};
|
|
_context9.next = 3;
|
|
return props === null || props === void 0 || (_props$onDelete2 = props.onDelete) === null || _props$onDelete2 === void 0 ? void 0 : _props$onDelete2.call(props, recordKey, editRow);
|
|
case 3:
|
|
res = _context9.sent;
|
|
_context9.next = 6;
|
|
return cancelEditable(recordKey, false);
|
|
case 6:
|
|
props.setDataSource(editableRowByKey(actionProps, 'delete'));
|
|
return _context9.abrupt("return", res);
|
|
case 8:
|
|
case "end":
|
|
return _context9.stop();
|
|
}
|
|
}, _callee9);
|
|
}));
|
|
return function (_x11, _x12) {
|
|
return _ref13.apply(this, arguments);
|
|
};
|
|
}());
|
|
var actionCancelRef = useRefFunction( /*#__PURE__*/function () {
|
|
var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10(recordKey, editRow, originRow, newLine) {
|
|
var _props$onCancel;
|
|
var res;
|
|
return _regeneratorRuntime().wrap(function _callee10$(_context10) {
|
|
while (1) switch (_context10.prev = _context10.next) {
|
|
case 0:
|
|
_context10.next = 2;
|
|
return props === null || props === void 0 || (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, recordKey, editRow, originRow, newLine);
|
|
case 2:
|
|
res = _context10.sent;
|
|
return _context10.abrupt("return", res);
|
|
case 4:
|
|
case "end":
|
|
return _context10.stop();
|
|
}
|
|
}, _callee10);
|
|
}));
|
|
return function (_x13, _x14, _x15, _x16) {
|
|
return _ref14.apply(this, arguments);
|
|
};
|
|
}());
|
|
|
|
// 如果传入了自定义的actionRender，使用useRefFunction以确保内部的事件处理函数可以访问最新的state
|
|
var existCustomActionRender = props.actionRender && typeof props.actionRender === 'function';
|
|
var customActionRender = existCustomActionRender ? props.actionRender : function () {};
|
|
var customActionRenderRef = useRefFunction(customActionRender);
|
|
var actionRender = function actionRender(row) {
|
|
var key = props.getRowKey(row, row.index);
|
|
var config = {
|
|
saveText: saveText,
|
|
cancelText: cancelText,
|
|
deleteText: deleteText,
|
|
addEditRecord: addEditRecord,
|
|
recordKey: key,
|
|
cancelEditable: cancelEditable,
|
|
index: row.index,
|
|
tableName: props.tableName,
|
|
newLineConfig: newLineRecordCache,
|
|
onCancel: actionCancelRef,
|
|
onDelete: actionDeleteRef,
|
|
onSave: actionSaveRef,
|
|
editableKeys: editableKeys,
|
|
setEditableRowKeys: setEditableRowKeys,
|
|
preEditRowRef: preEditRowRef,
|
|
deletePopconfirmMessage: props.deletePopconfirmMessage || "".concat(intl.getMessage('deleteThisLine', '删除此项'), "?")
|
|
};
|
|
var renderResult = defaultActionRender(row, config);
|
|
// 缓存一下saveRef
|
|
if (props.tableName) {
|
|
saveRefsMap.current.set(dataSourceKeyIndexMapRef.current.get(recordKeyToString(key)) || recordKeyToString(key), renderResult.saveRef);
|
|
} else {
|
|
saveRefsMap.current.set(recordKeyToString(key), renderResult.saveRef);
|
|
}
|
|
if (existCustomActionRender) return customActionRenderRef(row, config, {
|
|
save: renderResult.save,
|
|
delete: renderResult.delete,
|
|
cancel: renderResult.cancel
|
|
});
|
|
return [renderResult.save, renderResult.delete, renderResult.cancel];
|
|
};
|
|
return {
|
|
editableKeys: editableKeys,
|
|
setEditableRowKeys: setEditableRowKeys,
|
|
isEditable: isEditable,
|
|
actionRender: actionRender,
|
|
startEditable: startEditable,
|
|
cancelEditable: cancelEditable,
|
|
addEditRecord: addEditRecord,
|
|
saveEditable: saveEditable,
|
|
newLineRecord: newLineRecordCache,
|
|
preEditableKeys: editableKeysRef,
|
|
onValuesChange: onValuesChange,
|
|
getRealIndex: props.getRealIndex
|
|
};
|
|
} |