@flatbiz/antd
Version:
297 lines (293 loc) • 15.3 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 { c as _toConsumableArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import { useRef, Fragment, createElement, isValidElement } from 'react';
import { useUpdate, useMemoizedFn } from 'ahooks';
import { Form, ConfigProvider, Empty } from 'antd';
import { toArray, isUndefinedOrNull } from '@flatbiz/utils';
import { useBoxBreakpoint, BoxGrid } from './box-grid/index.js';
import { B as ButtonWrapper } from './button-wrapper-BGjkUPpk.js';
import { C as CardWrapper } from './card-wrapper-C8YADYlW.js';
import { D as DeleteNode } from './delete-node-CZGAVBTY.js';
import { E as EasyForm } from './form-ByFljQr9.js';
import { fbaHooks } from './fba-hooks/index.js';
import { f as fbaUtils } from './fba-utils-CusZeveq.js';
import { F as FormItemHidden } from './form-item-hidden-BtQvJEx7.js';
import { F as FormItemWrapper } from './form-item-wrapper-Ci7-5IKi.js';
import { T as TipsWrapper } from './tips-wrapper-DvbgHMwl.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var EditableCard = function EditableCard(props) {
var form = Form.useFormInstance();
var formListName = toArray(props.formListName);
var formListOperationRef = useRef();
var forceUpdate = useUpdate();
var _ConfigProvider$useCo = ConfigProvider.useConfig(),
componentDisabled = _ConfigProvider$useCo.componentDisabled;
var comRef = useRef(null);
var boxBreakpointApi = useBoxBreakpoint(comRef);
var formListCompleteName = props.formListCompleteName || formListName;
var validateRowFields = useMemoizedFn(function (formItemPrevName, nameList) {
return new Promise(function ($return, $error) {
return Promise.resolve(form.validateFields(nameList.map(function (item) {
return [].concat(_toConsumableArray(formItemPrevName), _toConsumableArray(toArray(item)));
}))).then(function ($await_1) {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
});
});
var getCurrentRowData = useMemoizedFn(function (formItemPrevName) {
return form.getFieldValue(formItemPrevName);
});
var setCurrentRowField = useMemoizedFn(function (formItemPrevName, dataIndexConfigs) {
fbaUtils.setFormFieldsAndTriggerValuesChange(form, dataIndexConfigs.map(function (item) {
return {
name: [].concat(_toConsumableArray(formListCompleteName), [formItemPrevName], _toConsumableArray(toArray(item.name))),
value: item.value
};
}));
forceUpdate();
});
var columns = fbaHooks.useMemoCustom(function () {
return props.columns.map(function (column) {
var _column$formItemProps, _dataIndex;
var title = column.title;
var titleRender = title;
if (column.tips) {
titleRender = /*#__PURE__*/jsx(TipsWrapper, {
tipType: "popover",
popoverProps: {
content: column.tips
},
children: title
});
}
var required = column.required;
if (!required && typeof column.formItemProps === 'object' && (_column$formItemProps = column.formItemProps.rules) !== null && _column$formItemProps !== void 0 && _column$formItemProps.length) {
required = !!column.formItemProps.rules.find(function (item) {
return !!item['required'];
});
}
var dataIndex = toArray(column['dataIndex']);
dataIndex = (_dataIndex = dataIndex) !== null && _dataIndex !== void 0 && _dataIndex.length ? dataIndex : undefined;
return {
dataIndex: dataIndex,
render: function render(index, fieldData, operation) {
var _column$remove, _column$hidden, _formItemProps, _column$render4;
if (dataIndex) {
var value = form.getFieldValue([].concat(_toConsumableArray(formListCompleteName), [fieldData.name], _toConsumableArray(dataIndex)));
if (isUndefinedOrNull(column.render)) {
return /*#__PURE__*/jsx(Fragment, {
children: value
});
}
}
var rowFormItemCompleteName = [].concat(_toConsumableArray(formListCompleteName), [fieldData.name]);
var editable = false;
if (dataIndex) {
editable = typeof (column === null || column === void 0 ? void 0 : column.editable) === 'function' ? column === null || column === void 0 ? void 0 : column.editable({
index: index,
getCurrentRowData: getCurrentRowData.bind(null, rowFormItemCompleteName)
}, index) : column === null || column === void 0 ? void 0 : column.editable;
}
var renderOperationProps = {
index: index,
editable: editable,
add: operation.add,
remove: operation.remove,
move: operation.move,
rowFormItemName: fieldData.name,
rowFormItemCompleteName: rowFormItemCompleteName,
setCurrentRowField: setCurrentRowField.bind(null, fieldData.name),
validateRowFields: validateRowFields.bind(null, rowFormItemCompleteName),
getCurrentRowData: getCurrentRowData.bind(null, rowFormItemCompleteName),
forceUpdate: forceUpdate
};
if ((_column$remove = column.remove) !== null && _column$remove !== void 0 && _column$remove.call(column, renderOperationProps, index)) {
return /*#__PURE__*/jsx(Fragment, {});
}
if ((_column$hidden = column.hidden) !== null && _column$hidden !== void 0 && _column$hidden.call(column, renderOperationProps, index)) {
return /*#__PURE__*/jsx(FormItemHidden, {
name: dataIndex ? [fieldData.name].concat(_toConsumableArray(dataIndex)) : undefined
}, fieldData.key);
}
var formItemProps = typeof column.formItemProps === 'function' ? column.formItemProps(renderOperationProps) : column.formItemProps;
if (!((_formItemProps = formItemProps) !== null && _formItemProps !== void 0 && (_formItemProps = _formItemProps.rules) !== null && _formItemProps !== void 0 && _formItemProps.length) && required) {
formItemProps = _objectSpread2(_objectSpread2({}, formItemProps), {}, {
rules: [{
required: true,
message: ''
}]
});
}
if (editable === true) {
var _column$render2;
if (column.formItemContainer) {
var _column$render;
return column.formItemContainer(/*#__PURE__*/createElement(FormItemWrapper, _objectSpread2(_objectSpread2({
label: titleRender
}, formItemProps), {}, {
name: dataIndex ? [fieldData.name].concat(_toConsumableArray(dataIndex)) : undefined,
span: column.gridNumber,
key: fieldData.key
}), (_column$render = column.render) === null || _column$render === void 0 ? void 0 : _column$render.call(column, renderOperationProps)));
}
return /*#__PURE__*/createElement(FormItemWrapper, _objectSpread2(_objectSpread2({
label: titleRender
}, formItemProps), {}, {
name: dataIndex ? [fieldData.name].concat(_toConsumableArray(dataIndex)) : undefined,
span: column.gridNumber,
key: fieldData.key
}), (_column$render2 = column.render) === null || _column$render2 === void 0 ? void 0 : _column$render2.call(column, renderOperationProps));
}
if (column.formItemContainer) {
var _column$render3;
return column.formItemContainer(/*#__PURE__*/jsx(FormItemWrapper, _objectSpread2(_objectSpread2({
label: titleRender,
span: column.gridNumber
}, formItemProps), {}, {
children: (_column$render3 = column.render) === null || _column$render3 === void 0 ? void 0 : _column$render3.call(column, renderOperationProps)
}), fieldData.key));
}
return /*#__PURE__*/jsx(FormItemWrapper, _objectSpread2(_objectSpread2({
label: titleRender,
span: column.gridNumber
}, formItemProps), {}, {
children: (_column$render4 = column.render) === null || _column$render4 === void 0 ? void 0 : _column$render4.call(column, renderOperationProps)
}), fieldData.key);
}
};
});
}, [props.columns, form, formListCompleteName, setCurrentRowField, validateRowFields, getCurrentRowData, forceUpdate]);
var className = classNames('editable-card', props.className);
return /*#__PURE__*/jsx("div", {
className: className,
style: props.style,
ref: comRef,
children: /*#__PURE__*/jsx(Form.List, {
name: formListName,
rules: props.rules,
initialValue: props.initialValue,
children: function children(fields, formListOperation, _ref) {
var _props$contentBeforeR, _props$contentAfterRe;
var errors = _ref.errors;
formListOperationRef.current = formListOperation;
return /*#__PURE__*/jsxs("div", {
style: {
borderRadius: '6px',
border: errors !== null && errors !== void 0 && errors.length ? '1px solid #ff4d4f' : '1px solid transparent'
},
children: [(_props$contentBeforeR = props.contentBeforeRender) === null || _props$contentBeforeR === void 0 ? void 0 : _props$contentBeforeR.call(props, formListOperation, fields.length), props.onCustomWrapper ? fields.map(function (fieldItem, index) {
var _props$onCustomWrappe, _props$cardEasyFormPr;
var extraData = {
index: index,
fields: fields,
fieldItem: fieldItem,
operation: formListOperation,
required: props.required,
key: "".concat(fieldItem.key)
};
return /*#__PURE__*/jsx(Fragment, {
children: (_props$onCustomWrappe = props.onCustomWrapper) === null || _props$onCustomWrappe === void 0 ? void 0 : _props$onCustomWrappe.call(props, /*#__PURE__*/jsx(EasyForm, _objectSpread2(_objectSpread2({}, props.cardEasyFormProps), {}, {
style: _objectSpread2({
padding: 0,
margin: 0
}, (_props$cardEasyFormPr = props.cardEasyFormProps) === null || _props$cardEasyFormPr === void 0 ? void 0 : _props$cardEasyFormPr.style),
children: columns.map(function (column) {
return column.render(index, fieldItem, formListOperation);
})
})), extraData)
}, fieldItem.key);
}) : /*#__PURE__*/jsx(BoxGrid.Row, {
children: fields.map(function (fieldItem, index) {
var _props$cardExtraRende, _props$cardEasyFormPr2;
var title = props.onCustomGroupName ? props.onCustomGroupName(index) : index + 1;
var extraData = {
index: index,
fields: fields,
fieldItem: fieldItem,
operation: formListOperation,
required: props.required,
key: "".concat(fieldItem.key)
};
var cardExtraRenderResult = (_props$cardExtraRende = props.cardExtraRender) === null || _props$cardExtraRende === void 0 ? void 0 : _props$cardExtraRende.call(props, extraData);
var span = ['xs', 'sm'].includes(boxBreakpointApi.boxBreakpoint) ? 24 : props.boxGridColSpan;
return /*#__PURE__*/jsx(BoxGrid.Col, {
span: span || 24,
children: /*#__PURE__*/jsx(CardWrapper, {
className: props.cardClassName,
title: title,
size: "small",
style: _objectSpread2({
padding: 0,
margin: '0 0 15px 0'
}, props.cardStyle),
bodyStyle: {
paddingBottom: 0
}
// styles={{ body: { paddingBottom: 0 } }}
,
extra: /*#__PURE__*/isValidElement(cardExtraRenderResult) ? cardExtraRenderResult : /*#__PURE__*/jsxs("div", {
style: {
display: 'inline-flex',
alignItems: 'center',
gap: '8px'
},
children: [cardExtraRenderResult === null || cardExtraRenderResult === void 0 ? void 0 : cardExtraRenderResult['before'], /*#__PURE__*/jsx(DeleteNode, {
style: {
color: 'red'
},
hidden: props.hiddenDeleteBtn || props.required && fields.length === 1 || componentDisabled,
onDelete: function onDelete() {
formListOperation.remove(index);
}
}), cardExtraRenderResult === null || cardExtraRenderResult === void 0 ? void 0 : cardExtraRenderResult['after']]
}),
children: /*#__PURE__*/jsx(EasyForm, _objectSpread2(_objectSpread2({}, props.cardEasyFormProps), {}, {
style: _objectSpread2({
padding: 0,
margin: 0
}, (_props$cardEasyFormPr2 = props.cardEasyFormProps) === null || _props$cardEasyFormPr2 === void 0 ? void 0 : _props$cardEasyFormPr2.style),
children: columns.map(function (column) {
return column.render(index, fieldItem, formListOperation);
})
}))
}, fieldItem.key)
}, fieldItem.key);
})
}), fields.length === 0 ? /*#__PURE__*/jsx("div", {
className: "editable-card-empty",
children: /*#__PURE__*/jsx(Empty, {
image: Empty.PRESENTED_IMAGE_SIMPLE
})
}) : null, /*#__PURE__*/jsx(ButtonWrapper, {
block: true,
hidden: props.hiddenFooterBtn || componentDisabled,
type: "dashed",
icon: /*#__PURE__*/jsx(_PlusOutlined, {}),
onClick: function onClick() {
var _props$addRowDefaultV;
var defaultValues = (_props$addRowDefaultV = props.addRowDefaultValues) === null || _props$addRowDefaultV === void 0 ? void 0 : _props$addRowDefaultV.call(props);
formListOperation.add(_objectSpread2({}, defaultValues));
},
children: props.addRowBtnName || '新增'
}), (_props$contentAfterRe = props.contentAfterRender) === null || _props$contentAfterRe === void 0 ? void 0 : _props$contentAfterRe.call(props, formListOperation, fields.length), errors.length ? /*#__PURE__*/jsx(Form.ErrorList, {
errors: [/*#__PURE__*/jsx("div", {
style: {
color: '#ff4d4f',
padding: '5px'
},
children: errors
}, "0")]
}) : null]
});
}
})
});
};
export { EditableCard as E };
//# sourceMappingURL=editable-card-DCewhW-D.js.map