@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
158 lines • 7.85 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import { Form } from 'antd';
import { cloneDeep } from 'lodash-es';
import { useCallback, useMemo, useState } from 'react';
import { FIELD_KEY_PATH, toRowKey } from "./utils";
export var useFormCollapseListHooks = function useFormCollapseListHooks(name, childrenColumnName, columns) {
var _useMemo;
var form = Form.useFormInstance();
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
values = _useState2[0],
_setValues = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
expandedRowKeys = _useState4[0],
setExpandedRowKeys = _useState4[1];
var updateValues = useCallback(function () {
return _setValues(form.getFieldValue(name));
}, [form, name]);
var firstColumnFormItemName = (_useMemo = useMemo(function () {
return columns.find(function (item) {
return !!item.name && !item.noStyle;
});
}, [columns])) === null || _useMemo === void 0 ? void 0 : _useMemo.name;
var fieldValuesToDataSource = useCallback(function (fields) {
if (!name) {
return {
dataSource: [],
allExpandRowKeys: []
};
}
var allExpandRowKeys = [];
var _setFieldPath = function _setFieldPath(field, index, path) {
var item = cloneDeep(field);
if (!item) {
item = _defineProperty({}, FIELD_KEY_PATH, []);
}
item[FIELD_KEY_PATH] = [].concat(_toConsumableArray(path), [index]);
if (item[childrenColumnName] && Array.isArray(item[childrenColumnName])) {
allExpandRowKeys.push(toRowKey(item[FIELD_KEY_PATH]));
item[childrenColumnName] = item[childrenColumnName].map(function (child, index) {
return _setFieldPath(child, index, item[FIELD_KEY_PATH]);
});
}
return item;
};
return {
dataSource: (fields === null || fields === void 0 ? void 0 : fields.map(function (field, index) {
return _setFieldPath(field, index, []);
})) || [],
allExpandRowKeys: allExpandRowKeys
};
}, [childrenColumnName, name]);
var getFieldPath = useCallback(function (fieldKeyPath, fieldName) {
var fieldPath = [];
var _iterator = _createForOfIteratorHelper(fieldKeyPath.entries()),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var _step$value = _slicedToArray(_step.value, 2),
index = _step$value[0],
key = _step$value[1];
if (index === fieldKeyPath.length - 1) {
fieldPath.push(key);
if (fieldName) {
fieldPath.push(fieldName);
}
} else {
fieldPath.push(key, childrenColumnName);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return fieldPath;
}, [childrenColumnName]);
var getFormListOperation = useCallback(function (operation, record) {
var fieldKeyPath = record[FIELD_KEY_PATH];
return {
add: function add(defaultValue, insertIndex) {
var fieldPath = getFieldPath(fieldKeyPath);
var fieldName = [name].concat(_toConsumableArray(fieldPath), [childrenColumnName]);
var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
var index = insertIndex !== null && insertIndex !== void 0 ? insertIndex : fieldValue.length;
fieldValue.splice(index, 0, defaultValue);
form.setFieldValue(fieldName, fieldValue);
if (firstColumnFormItemName) {
var fileNamePath = [].concat(_toConsumableArray(fieldName), [index, firstColumnFormItemName]);
// Scroll and focus new item which is just added
setTimeout(function () {
form.focusField(fileNamePath);
}, 200);
}
setExpandedRowKeys(_toConsumableArray(new Set([].concat(_toConsumableArray(expandedRowKeys), [toRowKey(fieldKeyPath)]))));
updateValues();
},
remove: function remove(index) {
if (fieldKeyPath.length <= 1) {
operation.remove(index);
updateValues();
return;
}
var fieldName = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath).slice(0, -1)));
var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
var indexs = [];
if (Array.isArray(index)) {
indexs.push.apply(indexs, _toConsumableArray(index));
} else {
indexs.push(index);
}
var newFieldValue = fieldValue.filter(function (_, _index) {
return !indexs.includes(_index);
});
form.setFieldValue(fieldName, newFieldValue.length > 0 ? newFieldValue : undefined);
updateValues();
},
move: function move(from, to) {
if (fieldKeyPath.length <= 1) {
return operation.move(from, to);
}
var fieldName = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath).slice(0, -1)));
var fieldValue = cloneDeep(form.getFieldValue(fieldName)) || [];
// 检查索引是否有效
if (from < 0 || to < 0 || from >= fieldValue.length || to >= fieldValue.length) {
console.warn(new Error('索引超出数组范围'));
return;
}
// 使用数组解构交换两个元素
var _ref = [fieldValue[to], fieldValue[from]];
fieldValue[from] = _ref[0];
fieldValue[to] = _ref[1];
form.setFieldValue(fieldName, fieldValue);
updateValues();
},
update: function update() {
return updateValues();
}
};
}, [childrenColumnName, expandedRowKeys, firstColumnFormItemName, form, getFieldPath, name, updateValues]);
return {
values: values,
updateValues: updateValues,
expandedRowKeys: expandedRowKeys,
setExpandedRowKeys: setExpandedRowKeys,
fieldValuesToDataSource: fieldValuesToDataSource,
getFieldPath: getFieldPath,
getFormListOperation: getFormListOperation,
// 首个表单输入列 (用于新增表达后 foucs 等)
firstColumnFormItemName: firstColumnFormItemName
};
};