@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
320 lines (317 loc) • 15.5 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/esm/typeof";
var _excluded = ["collapsible", "extra", "expandIcon", "icon", "title", "variant", "defaultActive", "empty", "columns", "disabled", "readOnly", "addOneFieldDefault", "disableRemoveWhenOneField", "maxFileds", "name", "addParams", "className", "onRemove", "fieldRemoveButton", "style", "defaultExpandAllRows", "indentSize", "childrenColumnName", "rowHoverable"],
_excluded2 = ["label", "name", "render", "dependencies", "rules", "align", "ellipsis", "fixed", "responsive", "shouldCellUpdate", "width", "className"],
_excluded3 = ["key"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { PlusOutlined } from '@ant-design/icons';
import { Icon } from '@lobehub/ui';
import { Button, Flex, Form, Table, Tooltip } from 'antd';
import { Trash2 } from 'lucide-react';
import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
import Typography from "../../Typography";
import { CollapseGroup } from "../../CollapseGroup";
import { FormCollapseListFieldsWatcher } from "./FieldsWatcher";
import { useFormCollapseListHooks } from "./hooks";
import { useStyles } from "./style";
import { FIELD_KEY_PATH, TEXT_INPUT_COMPOENT_TYPES, toRowKey } from "./utils";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Text = Typography.Text;
var FieldText = function FieldText(props) {
var id = props.id,
value = props.value;
if (_typeof(value) === 'object') {
console.warn("".concat(id, " => ").concat(value));
return '-';
}
return /*#__PURE__*/_jsx("span", {
children: value
});
};
export var FormCollapseList = /*#__PURE__*/memo(function (_ref) {
var collapsible = _ref.collapsible,
extra = _ref.extra,
expandIcon = _ref.expandIcon,
icon = _ref.icon,
title = _ref.title,
variant = _ref.variant,
defaultActive = _ref.defaultActive,
_ref$empty = _ref.empty,
empty = _ref$empty === void 0 ? '点击右上角 + 添加 ' : _ref$empty,
_ref$columns = _ref.columns,
columns = _ref$columns === void 0 ? [] : _ref$columns,
disabled = _ref.disabled,
readOnly = _ref.readOnly,
addOneFieldDefault = _ref.addOneFieldDefault,
disableRemoveWhenOneField = _ref.disableRemoveWhenOneField,
maxFileds = _ref.maxFileds,
name = _ref.name,
addParams = _ref.addParams,
className = _ref.className,
onRemove = _ref.onRemove,
_ref$fieldRemoveButto = _ref.fieldRemoveButton,
fieldRemoveButton = _ref$fieldRemoveButto === void 0 ? true : _ref$fieldRemoveButto,
style = _ref.style,
defaultExpandAllRows = _ref.defaultExpandAllRows,
_ref$indentSize = _ref.indentSize,
indentSize = _ref$indentSize === void 0 ? 16 : _ref$indentSize,
_ref$childrenColumnNa = _ref.childrenColumnName,
childrenColumnName = _ref$childrenColumnNa === void 0 ? 'children' : _ref$childrenColumnNa,
_ref$rowHoverable = _ref.rowHoverable,
rowHoverable = _ref$rowHoverable === void 0 ? true : _ref$rowHoverable,
formListProps = _objectWithoutProperties(_ref, _excluded);
var _useStyles = useStyles(),
cx = _useStyles.cx,
styles = _useStyles.styles;
var listAdd = useRef(null);
var form = Form.useFormInstance();
var _useFormCollapseListH = useFormCollapseListHooks(name, childrenColumnName, columns),
values = _useFormCollapseListH.values,
updateValues = _useFormCollapseListH.updateValues,
expandedRowKeys = _useFormCollapseListH.expandedRowKeys,
setExpandedRowKeys = _useFormCollapseListH.setExpandedRowKeys,
fieldValuesToDataSource = _useFormCollapseListH.fieldValuesToDataSource,
getFormListOperation = _useFormCollapseListH.getFormListOperation,
getFieldPath = _useFormCollapseListH.getFieldPath,
firstColumnFormItemName = _useFormCollapseListH.firstColumnFormItemName;
var _useMemo = useMemo(function () {
return fieldValuesToDataSource(values);
}, [fieldValuesToDataSource, values]),
dataSource = _useMemo.dataSource;
var isTreeMode = useMemo(function () {
return dataSource === null || dataSource === void 0 ? void 0 : dataSource.some(function (d) {
return d[childrenColumnName];
});
}, [childrenColumnName, dataSource]);
// 设置初始值以及在 readOnly 变化时更新 values
useEffect(function () {
updateValues();
}, [updateValues, readOnly]);
// 设置默认展开的 keys
useEffect(function () {
var fields = form.getFieldValue(name);
var _fieldValuesToDataSou = fieldValuesToDataSource(fields),
allExpandRowKeys = _fieldValuesToDataSou.allExpandRowKeys;
if (defaultExpandAllRows) {
setExpandedRowKeys(allExpandRowKeys);
}
}, [defaultExpandAllRows, fieldValuesToDataSource, form, name, setExpandedRowKeys]);
var getAddParams = useCallback(function () {
if (!addParams) {
return [];
}
var params = typeof addParams === 'function' ? addParams() : addParams;
return [params.defaultValue, params.insertIndex];
}, [addParams]);
var handleOnRemove = useCallback(function (fieldName) {
var value = form.getFieldValue([name, fieldName]);
return onRemove === null || onRemove === void 0 ? void 0 : onRemove(value);
}, [form, name, onRemove]);
// 默认增加一行的处理
useEffect(function () {
var _form$getFieldValue;
if (addOneFieldDefault && (!(form !== null && form !== void 0 && form.getFieldValue(name)) || (form === null || form === void 0 || (_form$getFieldValue = form.getFieldValue(name)) === null || _form$getFieldValue === void 0 ? void 0 : _form$getFieldValue.length) === 0)) {
var _listAdd$current;
(_listAdd$current = listAdd.current) === null || _listAdd$current === void 0 || _listAdd$current.call.apply(_listAdd$current, [listAdd].concat(_toConsumableArray(getAddParams())));
// Scroll and focus new item which is just added
setTimeout(function () {
form.focusField([name, 0, firstColumnFormItemName]);
}, 200);
}
}, [addOneFieldDefault, getAddParams, form, name, firstColumnFormItemName, updateValues]);
return /*#__PURE__*/_jsxs(CollapseGroup, {
extra: extra === undefined ? name && !readOnly && /*#__PURE__*/_jsx(Tooltip, {
title: maxFileds && "\u6700\u591A\u6DFB\u52A0 ".concat(maxFileds, " \u9879"),
children: /*#__PURE__*/_jsx(Button, {
disabled: disabled || !!(maxFileds && (values === null || values === void 0 ? void 0 : values.length) === maxFileds),
icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
onClick: function onClick(e) {
var _listAdd$current2;
e.stopPropagation();
(_listAdd$current2 = listAdd.current) === null || _listAdd$current2 === void 0 || _listAdd$current2.call.apply(_listAdd$current2, [listAdd].concat(_toConsumableArray(getAddParams())));
// Scroll and focus new item which is just added
setTimeout(function () {
form.focusField([name, form.getFieldValue(name).length - 1, firstColumnFormItemName]);
}, 200);
},
size: "small",
type: "text"
})
}) : extra,
className: className,
collapsible: collapsible,
expandIcon: expandIcon,
icon: icon,
title: title,
variant: variant,
defaultActive: defaultActive,
style: style,
children: [!isTreeMode && /*#__PURE__*/_jsx(FormCollapseListFieldsWatcher, {
name: name,
update: updateValues
}), name ? /*#__PURE__*/_jsx(Form.List, _objectSpread(_objectSpread({
name: name
}, formListProps), {}, {
children: function children(fields, operation) {
var add = operation.add,
remove = operation.remove;
listAdd.current = function (defaultValue, insertIndex) {
add(defaultValue, insertIndex);
updateValues();
};
// @Todo: support sort
return /*#__PURE__*/_jsx(Table, {
className: styles.list,
columns: [].concat(_toConsumableArray(columns.map(function (_ref2) {
var label = _ref2.label,
itemName = _ref2.name,
fieldRender = _ref2.render,
dependencies = _ref2.dependencies,
rules = _ref2.rules,
align = _ref2.align,
ellipsis = _ref2.ellipsis,
fixed = _ref2.fixed,
responsive = _ref2.responsive,
shouldCellUpdate = _ref2.shouldCellUpdate,
width = _ref2.width,
className = _ref2.className,
itemProps = _objectWithoutProperties(_ref2, _excluded2);
return {
title: label,
dataIndex: itemName,
align: align,
ellipsis: ellipsis,
fixed: fixed,
responsive: responsive,
shouldCellUpdate: shouldCellUpdate,
width: width,
render: function render(text, record, index) {
var field = fields[index] || {};
var fieldName = field.name;
var fieldKeyPath = record[FIELD_KEY_PATH];
var fieldPath = [name].concat(_toConsumableArray(getFieldPath(fieldKeyPath)));
var parentFieldPath = fieldPath.slice(0, -1);
var key = field.key,
restField = _objectWithoutProperties(field, _excluded3);
var children = fieldRender === null || fieldRender === void 0 ? void 0 : fieldRender(fieldName !== null && fieldName !== void 0 ? fieldName : fieldKeyPath.at(-1), index, getFormListOperation(operation, record), fieldPath);
if (!itemName) {
return /*#__PURE__*/_jsx(Flex, {
align: "center",
className: cx(styles.noFormItem, className),
children: children
});
}
if (children !== undefined && _typeof(children) !== 'object') {
return /*#__PURE__*/_jsx(Flex, {
align: "center",
className: cx(styles.noFormItem, className),
children: children.toString()
});
}
var chidrenProps = {};
if (disabled !== undefined) {
chidrenProps.disabled = disabled;
}
if (readOnly === true) {
var _props, _type;
chidrenProps.disabled = true;
if (children !== null && children !== void 0 && (_props = children.props) !== null && _props !== void 0 && _props.showCount) {
chidrenProps.showCount = undefined;
}
if (TEXT_INPUT_COMPOENT_TYPES.includes(children === null || children === void 0 || (_type = children.type) === null || _type === void 0 ? void 0 : _type.displayName)) {
return /*#__PURE__*/_jsx(Flex, {
align: "center",
className: cx(styles.readOnlyItem, className),
children: text !== null && text !== void 0 ? text : /*#__PURE__*/_jsx(Text, {
type: "secondary",
children: "-"
})
});
}
}
return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread(_objectSpread({
className: className
}, restField), {}, {
dependencies: typeof dependencies === 'function' ? dependencies(parentFieldPath, index) : dependencies,
name: getFieldPath(fieldKeyPath, itemName)
// label={getFieldPath(fieldKeyPath, itemName).join('/')}
,
rules: typeof rules === 'function' ? rules(parentFieldPath, index) : rules
}, itemProps), {}, {
children: children ? ( /*#__PURE__*/React.cloneElement(children, chidrenProps)) : /*#__PURE__*/_jsx(FieldText, {})
}), key);
}
};
})), [!readOnly && fieldRemoveButton !== false && {
title: '',
dataIndex: 'del',
render: function render(_text, _record, index) {
var field = fields[index];
if (!field) {
return;
}
var fieldName = field.name;
return /*#__PURE__*/_jsx(Form.Item, {
children: /*#__PURE__*/_jsx(Button, {
disabled: disabled || disableRemoveWhenOneField && fields.length === 1,
icon: /*#__PURE__*/_jsx(Icon, {
icon: Trash2
}),
onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var isRemove;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return handleOnRemove(fieldName);
case 2:
isRemove = _context.sent;
if (isRemove !== false) {
remove(fieldName);
updateValues();
}
case 4:
case "end":
return _context.stop();
}
}, _callee);
})),
type: "text"
})
});
}
}]).filter(function (c) {
return !!c;
}),
dataSource: dataSource,
expandable: {
expandedRowKeys: expandedRowKeys,
childrenColumnName: childrenColumnName,
onExpandedRowsChange: function onExpandedRowsChange(expandedKeys) {
setExpandedRowKeys(expandedKeys);
}
},
indentSize: indentSize,
locale: {
emptyText: empty
},
pagination: false,
rowHoverable: rowHoverable,
rowKey: function rowKey(row) {
return toRowKey(row[FIELD_KEY_PATH]);
},
size: "small"
});
}
})) : /*#__PURE__*/_jsx("div", {
className: styles.empty,
children: empty
})]
});
});