@flatbiz/antd
Version:
294 lines (288 loc) • 12.8 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { b as _objectSpread2, c as _toConsumableArray, a as _slicedToArray, i as _defineProperty } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { hooks } from '@wove/react/hooks';
import { Fragment, useState, useRef, useMemo } from 'react';
import { Form, Empty } from 'antd';
import { DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
import { useSortable, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { toArray, getUuid } from '@flatbiz/utils';
import { B as BlockLayout } from './layout-OPf8eBBY.js';
import { B as ButtonWrapper } from './button-wrapper-l9FUsrWl.js';
import { FormItemGroup } from './form-item-group/index.js';
import { T as TextSymbolWrapper } from './symbol-CX0y_DJ4.js';
import _DragOutlined from '@ant-design/icons/es/icons/DragOutlined.js';
import { CSS } from '@dnd-kit/utilities';
import { jsx, jsxs } from 'react/jsx-runtime';
function SortableItem(props) {
var _props$getItemDragDis;
var form = Form.useFormInstance();
var isDisabled = props.isOverlay ? false : (_props$getItemDragDis = props.getItemDragDisabled) === null || _props$getItemDragDis === void 0 ? void 0 : _props$getItemDragDis.call(props, props.uid, props.index);
var _useSortable = useSortable({
id: props.uid,
disabled: isDisabled
}),
listeners = _useSortable.listeners,
setNodeRef = _useSortable.setNodeRef,
transform = _useSortable.transform,
transition = _useSortable.transition;
var dragIconRender = hooks.useCallbackRef(function () {
var dragIcon = props.dragIcon ? props.dragIcon : /*#__PURE__*/jsx(_DragOutlined, {});
return props.dragDisabled ? /*#__PURE__*/jsx(Fragment, {}) : /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
className: "drag-form-list-item-trigger"
}, listeners), {}, {
children: /*#__PURE__*/jsx("span", {
children: dragIcon
})
}));
});
var style = _objectSpread2({
transform: CSS.Transform.toString(transform),
transition: transition
}, props.style);
var cname = classNames('drag-form-list-item', {
'drag-form-list-item-grap': props.isGray,
'drag-form-list-item-disabled': isDisabled
}, props.className);
return /*#__PURE__*/jsxs("div", {
style: _objectSpread2({}, style),
ref: setNodeRef,
className: cname,
children: [/*#__PURE__*/jsx(Form.Item, {
noStyle: true,
children: dragIconRender()
}), /*#__PURE__*/jsx("div", {
className: "drag-form-list-item-content",
children: props.children({
formListFieldData: props.formListFieldData,
operation: props.formListOperate,
formStageCompleteName: props.formStageCompleteName,
index: props.index,
getInsideFormItemName: function getInsideFormItemName(key) {
return [props.formListFieldData.name].concat(_toConsumableArray(toArray(key)));
},
getInsideFormItemData: function getInsideFormItemData() {
return form.getFieldValue(props.formStageCompleteName) || {};
},
prevCompleteName: props.prevCompleteName,
uidKey: props.uidFieldName
})
})]
});
}
var FormListChildrenWrapper = function FormListChildrenWrapper(props) {
if (props.wrapper) return props.wrapper({
children: props.children
});
return props.children;
};
var FormListTitleRender = function FormListTitleRender(props) {
var _props$formListItemTi, _props$formListItemTi2, _props$formListItemTi3;
var gap = (_props$formListItemTi = props.formListItemTitleHProps) === null || _props$formListItemTi === void 0 ? void 0 : _props$formListItemTi.gap;
var innerList = props.dragDisabled ? [] : [{
width: 35,
mainItem: /*#__PURE__*/jsx("div", {
style: {
marginRight: gap === undefined ? -15 : -gap
}
})
}];
return /*#__PURE__*/jsx(FormItemGroup.HorizontalUnion, _objectSpread2(_objectSpread2({}, props.formListItemTitleHProps), {}, {
style: _objectSpread2({
marginBottom: 10
}, (_props$formListItemTi2 = props.formListItemTitleHProps) === null || _props$formListItemTi2 === void 0 ? void 0 : _props$formListItemTi2.style),
groupConfigList: innerList.concat(((_props$formListItemTi3 = props.formListItemTitleList) === null || _props$formListItemTi3 === void 0 ? void 0 : _props$formListItemTi3.map(function (item) {
if (item.required) {
return {
width: item.width,
mainItem: /*#__PURE__*/jsx("div", {
style: {
textAlign: 'center'
},
children: /*#__PURE__*/jsx(TextSymbolWrapper, {
text: item.title,
symbolType: "required"
})
})
};
}
return {
width: item.width,
mainItem: /*#__PURE__*/jsx("div", {
style: {
textAlign: 'center'
},
children: item.title
})
};
})) || [])
}));
};
/**
* 可拖拽FormList
* ```
* Demo: https://fex.qa.tcshuke.com/docs/admin/main/form/list
* 1. FormList数组中必须要有唯一值字段，默认值字段名称uid，可通过uidFieldName自定义设置
* 2. 通过 itemGap 设置FormList Item 之间间隙
* ```
*/
var DragFormList = function DragFormList(props) {
var stageCompleteName = [].concat(_toConsumableArray(props.prevCompleteName), _toConsumableArray(toArray(props.name)));
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
dragActiveId = _useState2[0],
setDragActiveId = _useState2[1];
var form = Form.useFormInstance();
var formListOperationRef = useRef([]);
var uidFieldName = props.uidFieldName || 'uid';
// 使用 useWatch 可确保FormList在变更后及时刷新
var formListValue = Form.useWatch(stageCompleteName, form);
var getUidValue = hooks.useCallbackRef(function (item) {
return item === null || item === void 0 ? void 0 : item[uidFieldName];
});
function handleDragStart(event) {
var active = event.active;
setDragActiveId(active.id);
}
var getItems = hooks.useCallbackRef(function () {
/** 只能通过getFieldValue取值 */
return form.getFieldValue(stageCompleteName) || [];
});
function handleDragEnd(event) {
var active = event.active,
over = event.over;
var items = getItems();
if (active.id !== over.id) {
var _props$onDropChange;
var oldIndex = items.findIndex(function (item) {
return getUidValue(item) === active.id;
});
var newIndex = items.findIndex(function (item) {
return getUidValue(item) === over.id;
});
var newList = arrayMove(items, oldIndex, newIndex);
form.setFields([{
name: props.name,
value: newList
}]);
(_props$onDropChange = props.onDropChange) === null || _props$onDropChange === void 0 || _props$onDropChange.call(props, newList);
}
setDragActiveId(undefined);
}
var dragOverlayItem = useMemo(function () {
if (!dragActiveId) return undefined;
var items = getItems();
var targetIndex = items.findIndex(function (item) {
return getUidValue(item) === dragActiveId;
});
return formListOperationRef.current.find(function (item) {
return item.name === targetIndex;
});
}, [dragActiveId, getItems, getUidValue]);
var gapHalf = props.itemGap ? props.itemGap / 2 : 8;
return /*#__PURE__*/jsx(BlockLayout, {
className: classNames('drag-form-list', props.className),
style: props.style,
children: /*#__PURE__*/jsx(DndContext, {
collisionDetection: closestCenter,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
children: /*#__PURE__*/jsx(Form.List, {
name: props.name,
rules: props.rules,
children: function children(fields, operation, _ref) {
var _props$formListItemTi4;
var errors = _ref.errors;
formListOperationRef.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$formListItemTi4 = props.formListItemTitleList) !== null && _props$formListItemTi4 !== void 0 && _props$formListItemTi4.length ? /*#__PURE__*/jsx(FormListTitleRender, {
formListItemTitleList: props.formListItemTitleList,
formListItemTitleHProps: props.formListItemTitleHorizontalUnionProps,
dragDisabled: props.dragDisabled
}) : null, !props.hiddenEmptyRender && !(formListValue !== null && formListValue !== void 0 && formListValue.length) ? /*#__PURE__*/jsx(Empty, {
image: Empty.PRESENTED_IMAGE_SIMPLE,
style: {
margin: '15px 0'
}
}) : null, /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(SortableContext, {
items: getItems().map(function (temp) {
return getUidValue(temp);
}),
strategy: verticalListSortingStrategy,
children: /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(FormListChildrenWrapper, {
wrapper: props.formListChildrenWrapper,
children: /*#__PURE__*/jsx(Fragment, {
children: fields.map(function (item, index) {
var uid = getUidValue(getItems()[index]);
if (!uid) return null;
return /*#__PURE__*/jsx(SortableItem, {
formListOperate: operation,
formListFieldData: item,
uid: uid,
dragIcon: props.dragIcon,
getItemDragDisabled: props.getItemDragDisabled,
dragDisabled: props.dragDisabled,
isGray: !!uid && uid === dragActiveId,
index: index,
formStageCompleteName: [].concat(_toConsumableArray(stageCompleteName), [item.name]),
prevCompleteName: stageCompleteName,
uidFieldName: uidFieldName,
style: _objectSpread2(_objectSpread2({}, props.itemStyle), {}, {
padding: "".concat(gapHalf, "px 0 ").concat(gapHalf, "px 0")
}),
children: props.children
}, "".concat(uid, "-").concat(item.key));
})
})
}), props.onCustomAddRowButton ? props.onCustomAddRowButton(operation) : /*#__PURE__*/jsx(ButtonWrapper, {
hidden: props.hiddenAddRowButton,
type: "dashed",
block: true,
onClick: function onClick() {
var _props$getAddRowDefau;
return operation.add(_objectSpread2(_defineProperty({}, uidFieldName, getUuid()), (_props$getAddRowDefau = props.getAddRowDefaultValues) === null || _props$getAddRowDefau === void 0 ? void 0 : _props$getAddRowDefau.call(props)));
},
children: "\u6DFB\u52A0"
})]
})
}), /*#__PURE__*/jsx(DragOverlay, {
dropAnimation: {
duration: 0
},
children: dragActiveId && dragOverlayItem ? /*#__PURE__*/jsx(SortableItem, {
isOverlay: true,
uid: dragActiveId,
className: "drag-form-list-overlay",
formListFieldData: dragOverlayItem,
dragIcon: props.dragIcon,
formListOperate: null,
index: 0,
formStageCompleteName: [].concat(_toConsumableArray(stageCompleteName), [dragOverlayItem.name]),
prevCompleteName: stageCompleteName,
uidFieldName: uidFieldName,
children: props.children
}, dragActiveId) : null
}), /*#__PURE__*/jsx(Form.ErrorList, {
errors: errors !== null && errors !== void 0 && errors.length ? [/*#__PURE__*/jsx("div", {
style: {
color: '#ff4d4f',
padding: '5px'
},
children: errors
}, "0")] : undefined
})]
})]
});
}
})
})
});
};
export { DragFormList as D };
//# sourceMappingURL=drag-form-list-BGqbBKJM.js.map