@flatbiz/antd
Version:
776 lines (757 loc) • 36.1 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import _PlusOutlined from '@ant-design/icons/es/icons/PlusOutlined.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { b as _objectSpread2, a as _slicedToArray, _ as _objectWithoutProperties, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { useMemo, useState, useEffect, Fragment, useRef, isValidElement } from 'react';
import { Form, Checkbox, InputNumber, Radio, Tag, Space, Button, message, Table } from 'antd';
import { toArray, arrayField2LabelValue, isUndefinedOrNull } from '@flatbiz/utils';
import { B as ButtonWrapper } from './button-wrapper-BGjkUPpk.js';
import { T as TextSymbolWrapper } from './symbol-DcM8okBP.js';
import { T as TipsWrapper } from './tips-wrapper-DvbgHMwl.js';
import { isArray } from '@dimjs/lang/is-array';
import { F as FormItemHidden } from './form-item-hidden-BtQvJEx7.js';
import { extend } from '@dimjs/utils/extend/extend';
import { useMemoizedFn } from 'ahooks';
import { t as tableCellRender } from './cell-render-CTYJNYaY.js';
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
import { D as DatePickerWrapper } from './date-BRcPn0kr.js';
import { D as DateRangePickerWrapper } from './date-range-picker-wrapper-CIlffuw2.js';
import { I as InputWrapper } from './input-wrapper-BlzWXhi9.js';
import { S as SelectorWrapper } from './selector-wrapper-BQPBflNE.js';
import { S as SwitchWrapper } from './switch-wrapper-4CaXzwYq.js';
import { isBoolean } from '@dimjs/lang/is-boolean';
import { isNumber } from '@dimjs/lang/is-number';
import { isString } from '@dimjs/lang/is-string';
import { I as InputTextAreaWrapper } from './input-text-area-wrapper-xOYbr_W-.js';
import { U as UploadWrapper } from './upload-wrapper-DmZglNR4.js';
import _DeleteOutlined from '@ant-design/icons/es/icons/DeleteOutlined.js';
var getEditable = function getEditable(editable, tableRowIndex) {
return typeof editable === 'boolean' ? editable : editable === null || editable === void 0 ? void 0 : editable({
tableRowIndex: tableRowIndex
});
};
var CheckboxGroupFormItemContent = function CheckboxGroupFormItemContent(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
editable = _props$fieldConfig.editable,
render = _props$fieldConfig.render;
var editableComptProps = editableConfig.editableComptProps;
var options = useMemo(function () {
return editableComptProps.options || [];
}, [editableComptProps.options]);
var onChange = useMemoizedFn(function (value) {
var _props$onChange, _editableComptProps$o;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, value);
(_editableComptProps$o = editableComptProps.onChange) === null || _editableComptProps$o === void 0 || _editableComptProps$o.call(editableComptProps, value);
});
if (editable) {
return /*#__PURE__*/jsx(Checkbox.Group, _objectSpread2(_objectSpread2({}, editableComptProps), {}, {
value: props.value,
onChange: onChange
}));
}
return /*#__PURE__*/jsx("span", {
className: "editable-checkbox-group-view",
children: render ? render(props.value, options) : tableCellRender.selectorCell(options)(props.value)
});
};
var CheckboxGroupFormItem = function CheckboxGroupFormItem(props) {
var formItemProps = props.fieldConfig.formItemProps;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-checkbox-group-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(CheckboxGroupFormItemContent, _objectSpread2({}, props))
}));
};
var DatePickerWrapperFormItem = function DatePickerWrapperFormItem(props) {
var _props$fieldConfig = props.fieldConfig,
formItemProps = _props$fieldConfig.formItemProps,
editableConfig = _props$fieldConfig.editableConfig;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-date-picker-wraper-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(DatePickerWrapper, _objectSpread2({
allowClear: true
}, editableConfig.editableComptProps))
}));
};
var FormItemContent$2 = function FormItemContent(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
editable = _props$fieldConfig.editable,
render = _props$fieldConfig.render;
var editableComptProps = editableConfig.editableComptProps;
var onChange = useMemoizedFn(function (data) {
var _props$onChange, _editableComptProps$o;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, data);
editableComptProps === null || editableComptProps === void 0 || (_editableComptProps$o = editableComptProps.onChange) === null || _editableComptProps$o === void 0 || _editableComptProps$o.call(editableComptProps, data);
});
var viewLabel = useMemo(function () {
var value = toArray(props.value);
if (editable) return undefined;
return value.join('~');
}, [editable, props.value]);
if (editable) {
return /*#__PURE__*/jsx(DateRangePickerWrapper, _objectSpread2(_objectSpread2({
allowClear: true
}, editableComptProps), {}, {
value: props.value,
onChange: onChange
}));
}
return /*#__PURE__*/jsx("span", {
className: "editable-date-range-picker-view",
children: render ? render(props.value) : viewLabel
});
};
var DateRangePickerWrapperFormItem = function DateRangePickerWrapperFormItem(props) {
var formItemProps = props.fieldConfig.formItemProps;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-date-range-picker-wraper-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(FormItemContent$2, _objectSpread2({}, props))
}));
};
var InputFormItem = function InputFormItem(props) {
var _props$fieldConfig = props.fieldConfig,
formItemProps = _props$fieldConfig.formItemProps,
editableConfig = _props$fieldConfig.editableConfig;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
children: /*#__PURE__*/jsx(InputWrapper, _objectSpread2({
allowClear: true
}, editableConfig.editableComptProps))
}));
};
var InputNumberFormItem = function InputNumberFormItem(props) {
var _props$fieldConfig = props.fieldConfig,
formItemProps = _props$fieldConfig.formItemProps,
editableConfig = _props$fieldConfig.editableConfig;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-input-number-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(InputNumber, _objectSpread2({}, editableConfig.editableComptProps))
}));
};
var RadioGroupFormItemContent = function RadioGroupFormItemContent(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
editable = _props$fieldConfig.editable,
render = _props$fieldConfig.render;
var editableComptProps = editableConfig.editableComptProps;
var options = useMemo(function () {
return editableComptProps.options || [];
}, [editableComptProps.options]);
var onChange = useMemoizedFn(function (e) {
var _props$onChange, _editableComptProps$o;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e.target.value);
(_editableComptProps$o = editableComptProps.onChange) === null || _editableComptProps$o === void 0 || _editableComptProps$o.call(editableComptProps, e);
});
if (editable) {
return /*#__PURE__*/jsx(Radio.Group, _objectSpread2(_objectSpread2({}, editableComptProps), {}, {
value: props.value,
onChange: onChange
}));
}
return /*#__PURE__*/jsx("span", {
className: "editable-radio-group-view",
children: render ? render(props.value, options) : tableCellRender.selectorCell(options)(props.value)
});
};
var RadioGroupFormItem = function RadioGroupFormItem(props) {
var formItemProps = props.fieldConfig.formItemProps;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-radio-group-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(RadioGroupFormItemContent, _objectSpread2({}, props))
}));
};
var FormItemContent$1 = function FormItemContent(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
editable = _props$fieldConfig.editable,
render = _props$fieldConfig.render;
var editableComptProps = editableConfig.editableComptProps;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
selectorList = _useState2[0],
setSelectorList = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
viewLabelList = _useState4[0],
setviewLabelList = _useState4[1];
useEffect(function () {
if (!editable) {
var value = toArray(props.value);
if (selectorList.length === 0) {
setviewLabelList(value === null || value === void 0 ? void 0 : value.map(function (item) {
return {
label: item,
value: item
};
}));
}
var returnList = [];
value === null || value === void 0 || value.forEach(function (item) {
var target = selectorList.find(function (temp) {
return temp.value === item;
});
returnList.push(target ? target : {
label: String(item),
value: item
});
});
setviewLabelList(returnList);
}
}, [editable, editableComptProps.fieldNames, props.value, selectorList]);
var onSelectorListAllChange = useMemoizedFn(function (dataList) {
setSelectorList(arrayField2LabelValue(dataList || [], editableComptProps.fieldNames));
});
var onChange = useMemoizedFn(function (value, selectList) {
var _props$onChange, _editableComptProps$o;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, value);
(_editableComptProps$o = editableComptProps.onChange) === null || _editableComptProps$o === void 0 || _editableComptProps$o.call(editableComptProps, value, selectList);
});
if (editable) {
return /*#__PURE__*/jsx(SelectorWrapper, _objectSpread2(_objectSpread2({}, editableComptProps), {}, {
value: props.value,
onChange: onChange,
onSelectorListAllChange: onSelectorListAllChange
}));
}
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx("div", {
style: {
display: 'none'
},
children: /*#__PURE__*/jsx(SelectorWrapper, _objectSpread2(_objectSpread2({}, editableComptProps), {}, {
onSelectorListAllChange: onSelectorListAllChange
}))
}), /*#__PURE__*/jsx("span", {
className: "editable-selector-view",
children: render ? render(props.value, selectorList) : viewLabelList.map(function (tag, index) {
return /*#__PURE__*/jsx(Tag, {
color: 'geekblue',
children: tag.label
}, index);
})
})]
});
};
var SelectorWrapperFormItem = function SelectorWrapperFormItem(props) {
var formItemProps = props.fieldConfig.formItemProps;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-selector-wrapper-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(FormItemContent$1, _objectSpread2({}, props))
}));
};
var FormItemContent = function FormItemContent(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
editable = _props$fieldConfig.editable,
render = _props$fieldConfig.render;
var editableComptProps = editableConfig.editableComptProps;
var onChange = useMemoizedFn(function (data) {
var _props$onChange, _editableComptProps$o;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, data);
editableComptProps === null || editableComptProps === void 0 || (_editableComptProps$o = editableComptProps.onChange) === null || _editableComptProps$o === void 0 || _editableComptProps$o.call(editableComptProps, data);
});
var viewData = useMemo(function () {
var defaultCheckedText = editableComptProps.checkedChildren || '是';
var defaultUnCheckedText = editableComptProps.unCheckedChildren || '否';
return {
checkedText: defaultCheckedText,
unCheckedText: defaultUnCheckedText
};
}, [editableComptProps.checkedChildren, editableComptProps.unCheckedChildren]);
if (editable) {
return /*#__PURE__*/jsx(SwitchWrapper, _objectSpread2(_objectSpread2({}, editableComptProps), {}, {
value: props.value,
onChange: onChange
}));
}
if (render) {
return /*#__PURE__*/jsx("span", {
className: "editable-switch-wrapper-view",
children: render(props.value)
});
}
return /*#__PURE__*/jsx("span", {
className: "editable-switch-wrapper-view",
children: editableComptProps.checkedValue == props.value ? /*#__PURE__*/jsx(Tag, {
color: "geekblue",
style: {
marginRight: 0
},
children: viewData.checkedText
}) : /*#__PURE__*/jsx(Tag, {
style: {
marginRight: 0
},
children: viewData.unCheckedText
})
});
};
var SwitchWrapperFormItem = function SwitchWrapperFormItem(props) {
var formItemProps = props.fieldConfig.formItemProps;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-switch-wrapper-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(FormItemContent, _objectSpread2({}, props))
}));
};
var FormItemTextContent = function FormItemTextContent(props) {
var _props$fieldConfig2, _props$fieldConfig3, _props$fieldConfig3$r;
var value = useMemo(function () {
var _props$fieldConfig;
if ((_props$fieldConfig = props.fieldConfig) !== null && _props$fieldConfig !== void 0 && _props$fieldConfig.render) return undefined;
var isBaseData = isString(props.value) || isNumber(props.value) || isBoolean(props.value) || !props.value;
if (!isBaseData) {
console.warn("Form.List name:\u3010".concat(props.name, "\u3011\u6570\u636E\u3010").concat(JSON.stringify(props.value), "\u3011\u4E0D\u80FD\u6E32\u67D3\u5728\u9875\u9762\u4E2D"));
}
return isBaseData ? props.value : undefined;
}, [(_props$fieldConfig2 = props.fieldConfig) === null || _props$fieldConfig2 === void 0 ? void 0 : _props$fieldConfig2.render, props.name, props.value]);
var viewText = ((_props$fieldConfig3 = props.fieldConfig) === null || _props$fieldConfig3 === void 0 || (_props$fieldConfig3$r = _props$fieldConfig3.render) === null || _props$fieldConfig3$r === void 0 ? void 0 : _props$fieldConfig3$r.call(_props$fieldConfig3, props.value)) || value;
return /*#__PURE__*/jsx("span", {
children: viewText
});
};
var TextFormItem = function TextFormItem(props) {
return /*#__PURE__*/jsx(Form.Item, {
noStyle: true,
name: props.name,
children: /*#__PURE__*/jsx(FormItemTextContent, {
name: props.name,
fieldConfig: props.fieldConfig
})
});
};
var TextAreaFormItem = function TextAreaFormItem(props) {
var _props$fieldConfig = props.fieldConfig,
formItemProps = _props$fieldConfig.formItemProps,
editableConfig = _props$fieldConfig.editableConfig;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
children: /*#__PURE__*/jsx(InputTextAreaWrapper, _objectSpread2({}, editableConfig.editableComptProps))
}));
};
var _excluded$1 = ["children"];
var UploadWrapperFormItemContent = function UploadWrapperFormItemContent(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
render = _props$fieldConfig.render,
editable = _props$fieldConfig.editable;
var _editableComptProps = editableConfig.editableComptProps,
children = _editableComptProps.children,
otherProps = _objectWithoutProperties(_editableComptProps, _excluded$1);
if (editable) {
return /*#__PURE__*/jsx(UploadWrapper, _objectSpread2(_objectSpread2({
listType: "text"
}, otherProps), {}, {
value: props.value,
onChange: props.onChange,
children: children
}));
}
return /*#__PURE__*/jsx("div", {
className: "upload-wrapper-selector-view",
children: render ? render(props.value) : /*#__PURE__*/jsx(UploadWrapper, _objectSpread2(_objectSpread2({
listType: "text"
}, otherProps), {}, {
value: props.value,
disabled: true
}))
});
};
var UploadWrapperFormItem = function UploadWrapperFormItem(props) {
var formItemProps = props.fieldConfig.formItemProps;
return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({}, formItemProps), {}, {
name: props.name,
className: classNames('editable-upload-wrapper-form-item', formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.className),
children: /*#__PURE__*/jsx(UploadWrapperFormItemContent, _objectSpread2({}, props))
}));
};
var FormItemAdapter = function FormItemAdapter(props) {
var _props$fieldConfig = props.fieldConfig,
editableConfig = _props$fieldConfig.editableConfig,
editable = _props$fieldConfig.editable;
var newEditable = getEditable(editable, props.tableRowIndex);
var fieldConfig = extend({}, props.fieldConfig, {
editable: newEditable
});
var commomProps = {
name: props.name,
fieldConfig: fieldConfig
};
if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'input' && newEditable) {
return /*#__PURE__*/jsx(InputFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'inputNumber' && newEditable) {
return /*#__PURE__*/jsx(InputNumberFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'textArea' && newEditable) {
return /*#__PURE__*/jsx(TextAreaFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'datePickerWrapper' && newEditable) {
return /*#__PURE__*/jsx(DatePickerWrapperFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'dateRangePickerWrapper') {
return /*#__PURE__*/jsx(DateRangePickerWrapperFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'selectorWrapper') {
return /*#__PURE__*/jsx(SelectorWrapperFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'checkboxGroup') {
return /*#__PURE__*/jsx(CheckboxGroupFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'radioGroup') {
return /*#__PURE__*/jsx(RadioGroupFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'uploadWrapper') {
return /*#__PURE__*/jsx(UploadWrapperFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'switchWrapper') {
return /*#__PURE__*/jsx(SwitchWrapperFormItem, _objectSpread2({}, commomProps));
} else if ((editableConfig === null || editableConfig === void 0 ? void 0 : editableConfig.type) === 'custom') {
return editableConfig.editableComptProps({
name: props.name,
editable: newEditable,
completeName: props.completeName,
tableRowIndex: props.tableRowIndex
});
}
return /*#__PURE__*/jsx(TextFormItem, _objectSpread2({}, commomProps));
};
var FormList = function FormList(props) {
var from = Form.useFormInstance();
var _props$formListConfig = props.formListConfig,
onFormListBeforeRender = _props$formListConfig.onFormListBeforeRender,
editableConfigList = _props$formListConfig.editableConfigList,
onFormListAfterRender = _props$formListConfig.onFormListAfterRender,
onFormListItemBeforeRender = _props$formListConfig.onFormListItemBeforeRender,
onFormListItemAfterRender = _props$formListConfig.onFormListItemAfterRender,
deleteOperateRender = _props$formListConfig.deleteOperateRender;
return /*#__PURE__*/jsx(Form.List, {
name: props.name,
children: function children(fields, _ref) {
var add = _ref.add,
_remove = _ref.remove;
return /*#__PURE__*/jsxs(Fragment$1, {
children: [onFormListBeforeRender ? onFormListBeforeRender({
tableRowIndex: props.tableRowIndex,
add: add,
get value() {
return from.getFieldValue(props.completeName);
}
}) : null, fields.map(function (fieldChild, index) {
var hasEditable = editableConfigList.find(function (item) {
return getEditable(item.editable, props.tableRowIndex);
});
var className = classNames('editable-inner-formlist-item', "editable-inner-formlist-item-".concat(props.name[1]), {
'editable-inner-formlist-item_preview': !hasEditable
});
return /*#__PURE__*/jsxs("div", {
className: className,
children: [onFormListItemBeforeRender === null || onFormListItemBeforeRender === void 0 ? void 0 : onFormListItemBeforeRender({
add: add,
remove: function remove() {
_remove(index);
},
formListItemIndex: index,
tableRowIndex: props.tableRowIndex,
get value() {
return from.getFieldValue([].concat(_toConsumableArray(props.completeName), [fieldChild.name]));
}
}), /*#__PURE__*/jsxs(Space, {
children: [editableConfigList.map(function (fieldItem, index) {
return /*#__PURE__*/jsx(FormItemAdapter, {
name: [fieldChild.name, fieldItem.fieldName],
fieldConfig: fieldItem,
tableRowIndex: props.tableRowIndex,
completeName: [].concat(_toConsumableArray(props.completeName), [fieldChild.name])
}, index);
}), hasEditable ? /*#__PURE__*/jsx(DeleteFormListItem, {
deleteOperateRender: deleteOperateRender,
remove: function remove() {
_remove(index);
},
index: index
}) : undefined]
}), onFormListItemAfterRender === null || onFormListItemAfterRender === void 0 ? void 0 : onFormListItemAfterRender({
add: add,
formListItemIndex: index,
tableRowIndex: props.tableRowIndex,
remove: function remove() {
_remove(index);
},
get value() {
return from.getFieldValue([].concat(_toConsumableArray(props.completeName), [fieldChild.name]));
}
})]
}, index);
}), onFormListAfterRender ? onFormListAfterRender({
tableRowIndex: props.tableRowIndex,
add: add,
get value() {
return from.getFieldValue(props.completeName);
}
}) : null]
});
}
});
};
var DeleteFormListItem = function DeleteFormListItem(props) {
return /*#__PURE__*/jsx(Form.Item, {
children: props.deleteOperateRender ? props.deleteOperateRender({
remove: props.remove,
formListItemIndex: props.index
}) : /*#__PURE__*/jsx(Button, {
type: "link",
danger: true,
icon: /*#__PURE__*/jsx(_DeleteOutlined, {}),
onClick: props.remove,
children: "\u5220\u9664"
})
});
};
var FormListItem = function FormListItem(props) {
if (props.fieldConfig) {
if (isArray(props.fieldConfig['editableConfigList'])) {
var formListConfig = props.fieldConfig;
return /*#__PURE__*/jsx(FormList, {
name: props.name,
completeName: props.completeName,
formListConfig: formListConfig,
tableRowIndex: props.tableRowIndex
});
} else {
var _props$hiddenFieldLis;
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(FormItemAdapter, {
name: props.name,
fieldConfig: props.fieldConfig,
tableRowIndex: props.tableRowIndex,
completeName: props.completeName
}), (_props$hiddenFieldLis = props.hiddenFieldList) === null || _props$hiddenFieldLis === void 0 ? void 0 : _props$hiddenFieldLis.map(function (item, index) {
return /*#__PURE__*/jsx(FormItemHidden, {
name: [props.tableRowIndex].concat(_toConsumableArray(toArray(item.dataIndex)))
}, index);
})]
});
}
}
return /*#__PURE__*/jsx(TextFormItem, {
name: props.name
});
};
var _excluded = ["fieldConfig", "renderMiddleware", "tableChildrenColumnRender", "title", "tipsWrapperProps", "required", "align"];
/**
* 可编辑表格（通过FormList实现）
* @deprecated 已过期，请使用 EditableTablePro 组件
* demo：https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable1
* ```
* 1. 表格数据必须要有唯一值字段，通过属性uidFieldKey设置
* 2. 通过 tableProps 设置Table属性，table size默认：small
* 3. Table children column 不可编辑
* 4. 当存在折叠children数据时，组件会在children中内置_isChildrenItem字段
* 5. 可通过tableChildrenColumnRender自定义渲染 table children column 显示
* 6. 4.5.0版本移除 ref.getTableItemDataByFormListItemKey 功能，可选择表格参考（https://fex.qa.tcshuke.com/docs/admin/main/table/row-editable2）
* ```
*/
var EditableTable = function EditableTable(props) {
var form = Form.useFormInstance();
var formListFieldsRef = useRef([]);
var columnsIncludeUidKey = useMemo(function () {
var hasUid = props.columns.find(function (item) {
return item['dataIndex'] === props.uidFieldKey;
});
return !!hasUid;
}, [props.columns, props.uidFieldKey]);
var columns = useMemo(function () {
if (!props.columns) return [];
return props.columns.map(function (columnItem) {
var fieldConfig = columnItem.fieldConfig,
renderMiddleware = columnItem.renderMiddleware,
tableChildrenColumnRender = columnItem.tableChildrenColumnRender,
title = columnItem.title,
tipsWrapperProps = columnItem.tipsWrapperProps,
required = columnItem.required,
align = columnItem.align,
otherColumnItem = _objectWithoutProperties(columnItem, _excluded);
var support = /*#__PURE__*/isValidElement(title) || typeof title === 'string';
var titleRender;
if (tipsWrapperProps && support) {
if (typeof tipsWrapperProps === 'string') {
titleRender = /*#__PURE__*/jsx(TipsWrapper, {
tipType: "popover",
popoverProps: {
content: tipsWrapperProps
},
children: title
});
} else {
titleRender = /*#__PURE__*/jsx(TipsWrapper, _objectSpread2(_objectSpread2({}, tipsWrapperProps), {}, {
children: title
}));
}
}
// else if (tooltip) {
// titleRender = <TableTitleTooltip title={title as string} tooltip={tooltip} />;
// }
else {
titleRender = title;
}
return _objectSpread2(_objectSpread2({
title: required ? /*#__PURE__*/jsx(TextSymbolWrapper, {
style: {
marginLeft: align === 'center' ? undefined : 10
},
text: titleRender,
position: "before",
symbolType: "required"
}) : titleRender,
onCell: function onCell() {
var _props$tableProps;
return {
valign: ((_props$tableProps = props.tableProps) === null || _props$tableProps === void 0 ? void 0 : _props$tableProps.cellVerticalAlign) || 'middle'
};
}
}, otherColumnItem), {}, {
render: function render(value, record, index) {
if (record['_isChildrenItem']) {
if (tableChildrenColumnRender) {
return tableChildrenColumnRender(value, record, index);
}
return value;
}
var tableRowName = [].concat(_toConsumableArray(toArray(props.name)), [record.name]);
var completeName = columnItem.dataIndex ? [].concat(_toConsumableArray(tableRowName), [columnItem.dataIndex]) : tableRowName;
var customRender = renderMiddleware === null || renderMiddleware === void 0 ? void 0 : renderMiddleware({
name: completeName,
tableRowIndex: record.name,
operation: record.operation,
tableRowName: tableRowName,
index: index,
getTableRowData: function getTableRowData() {
if (props.completeName) {
return form.getFieldValue([].concat(_toConsumableArray(props.completeName), [record.name]));
}
return form.getFieldValue(tableRowName);
}
});
if (customRender) {
return customRender;
}
var fieldConfigActual = typeof fieldConfig === 'function' ? fieldConfig({
name: completeName,
tableRowIndex: record.name,
tableRowName: tableRowName,
getTableRowData: function getTableRowData() {
if (props.completeName) {
return form.getFieldValue([].concat(_toConsumableArray(props.completeName), [record.name]));
}
return form.getFieldValue(tableRowName);
}
}) : fieldConfig;
var hiddenFieldList = toArray(columnItem.hiddenField);
if (!columnsIncludeUidKey && index === 0) {
hiddenFieldList = hiddenFieldList.concat([{
dataIndex: props.uidFieldKey
}]);
}
return /*#__PURE__*/jsx(FormListItem, {
name: columnItem.dataIndex ? [record.name, columnItem.dataIndex] : [record.name],
completeName: completeName,
fieldConfig: fieldConfigActual,
tableRowIndex: record.name,
hiddenFieldList: hiddenFieldList
});
}
});
});
}, [props.columns, props.tableProps, props.name, props.completeName, props.uidFieldKey, columnsIncludeUidKey, form]);
var formListDataSource = Form.useWatch(props.completeName ? props.completeName : props.name, form);
useEffect(function () {
var names = toArray(props.name);
if (/^\d+$/.test("".concat(names === null || names === void 0 ? void 0 : names[0])) && props.completeName === undefined) {
void message.error('当前Editable处在FormList内部，必须赋值completeName参数');
}
}, [props.completeName, props.name]);
return /*#__PURE__*/jsx("div", {
className: classNames('editable-table', {
'et-empty-show-large': props.emptyShowSize === 'large'
}, props.className),
style: props.style,
children: /*#__PURE__*/jsx(Form.List, {
name: props.name,
rules: props.rules,
children: function children(fields, formListOperation, _ref) {
var errors = _ref.errors;
formListFieldsRef.current = fields;
return /*#__PURE__*/jsxs("div", {
style: {
borderRadius: '6px',
border: errors !== null && errors !== void 0 && errors.length ? '1px solid #ff4d4f' : '1px solid transparent'
},
children: [props.onTableBeforeRender ? props.onTableBeforeRender(formListOperation, fields.length) : null, /*#__PURE__*/jsx(Table, _objectSpread2(_objectSpread2({
scroll: {
x: 'max-content'
},
pagination: false,
size: "small"
}, props.tableProps), {}, {
rowKey: function rowKey(record) {
var _target;
var completeName = props.completeName || [];
var names = toArray(props.name);
var prevName = completeName.length ? completeName : names;
var target;
if (record['_isChildrenItem']) {
target = form.getFieldValue([].concat(_toConsumableArray(prevName), [record['_parentIndex'], 'children', record['_index']]));
} else {
target = form.getFieldValue([].concat(_toConsumableArray(prevName), [record['_index']]));
}
var key = (_target = target) === null || _target === void 0 ? void 0 : _target[props.uidFieldKey];
if (isUndefinedOrNull(key)) {
console.warn("EditableTable \u901A\u8FC7\u5165\u53C2uidFieldKey\uFF1A".concat(props.uidFieldKey, "\uFF0C\u672A\u83B7\u53D6\u5230\u8868\u683C\u884C\u552F\u4E00\u503C\u6570\u636E"));
}
return key;
},
dataSource: fields.map(function (item, index) {
var _formListDataSource$i;
var children = formListDataSource === null || formListDataSource === void 0 || (_formListDataSource$i = formListDataSource[item.name]) === null || _formListDataSource$i === void 0 ? void 0 : _formListDataSource$i.children;
if (children) {
children.forEach(function (item, itemIndex) {
item['_isChildrenItem'] = true;
item['_parentIndex'] = index;
item['_index'] = itemIndex;
});
}
return _objectSpread2(_objectSpread2({}, item), {}, {
_index: index,
operation: formListOperation,
children: children
});
}),
columns: columns
})), props.onTableAfterRender ? props.onTableAfterRender(formListOperation, fields.length) : /*#__PURE__*/jsx(ButtonWrapper, {
type: "dashed",
hidden: props.hiddenFooterBtn,
onClick: function onClick() {
var _props$getAddRowDefau;
return formListOperation.add((_props$getAddRowDefau = props.getAddRowDefaultValues) === null || _props$getAddRowDefau === void 0 ? void 0 : _props$getAddRowDefau.call(props));
},
block: true,
icon: /*#__PURE__*/jsx(_PlusOutlined, {}),
style: {
marginTop: 15
},
children: "\u65B0\u589E"
}), /*#__PURE__*/jsx(Form.ErrorList, {
errors: errors.length ? [/*#__PURE__*/jsx("div", {
style: {
color: '#ff4d4f',
padding: '5px'
},
children: errors
}, "0")] : undefined
})]
});
}
})
});
};
export { EditableTable as E };
//# sourceMappingURL=editable-table-BaKnBuHT.js.map