@flatbiz/antd
Version:
232 lines (226 loc) • 8.59 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, b as _objectSpread2, c as _toConsumableArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { Space, Form } from 'antd';
import { useSensors, useSensor, PointerSensor, DndContext } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { useSortable, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { noop, toArray } from '@flatbiz/utils';
import { E as EditableCard } from './editable-card-nPOaeQf0.js';
import _DragOutlined from '@ant-design/icons/es/icons/DragOutlined.js';
import { CSS } from '@dnd-kit/utilities';
import { C as CardWrapper } from './card-wrapper-w-JbDJNk.js';
import { D as DeleteNode } from './delete-node-BF-2Gsyu.js';
import { I as IconWrapper } from './icon-wrapper-HJ2r5GeZ.js';
import { jsx, jsxs } from 'react/jsx-runtime';
var _excluded$1 = ["dragIcon", "rowId", "dragTriggerPosition"];
var Handle = function Handle(props) {
var dragIcon = props.dragIcon,
rowId = props.rowId,
dragTriggerPosition = props.dragTriggerPosition,
innerProps = _objectWithoutProperties(props, _excluded$1);
var dragTriggerPositionFt = dragTriggerPosition || 'left';
var _useSortable = useSortable({
id: rowId
}),
setActivatorNodeRef = _useSortable.setActivatorNodeRef,
listeners = _useSortable.listeners,
setNodeRef = _useSortable.setNodeRef,
transform = _useSortable.transform,
transition = _useSortable.transition,
isDragging = _useSortable.isDragging;
var style = _objectSpread2(_objectSpread2({}, innerProps.style), {}, {
transform: CSS.Transform.toString(transform && _objectSpread2(_objectSpread2({}, transform), {}, {
scaleY: 1
})),
transition: transition,
cursor: 'move'
}, isDragging ? {
position: 'relative',
zIndex: 9999,
boxShadow: ' 0px 0px 12px 4px rgba(34, 33, 81, 0.1)',
backgroundColor: 'var(--block-bg-color)'
} : {});
var iconElement = dragIcon || /*#__PURE__*/jsx(_DragOutlined, {});
return /*#__PURE__*/jsx("div", {
ref: setNodeRef,
style: style,
children: /*#__PURE__*/jsx(CardWrapper, {
size: "small",
style: {
marginBottom: 10
},
extra: /*#__PURE__*/jsxs(Space, {
size: 10,
children: [/*#__PURE__*/jsx(DeleteNode, {
style: {
color: 'red'
},
hidden: props.extraData.required && props.extraData.fields.length === 1,
onDelete: function onDelete() {
props.extraData.operation.remove(props.extraData.index);
}
}), dragTriggerPositionFt === 'right' ? /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
ref: setActivatorNodeRef,
style: {
touchAction: 'none',
cursor: 'move'
}
}, listeners), {}, {
children: /*#__PURE__*/jsx(IconWrapper, {
style: {
touchAction: 'none',
cursor: 'move',
padding: '3px',
margin: 0,
justifyContent: 'center',
color: '#787878'
},
icon: iconElement,
onClick: noop,
size: "small"
})
})) : null]
}),
title: /*#__PURE__*/jsxs(Space, {
size: 5,
children: [dragTriggerPositionFt === 'left' ? /*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
ref: setActivatorNodeRef,
style: {
touchAction: 'none',
cursor: 'move',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}
}, listeners), {}, {
children: /*#__PURE__*/jsx(IconWrapper, {
style: {
touchAction: 'none',
cursor: 'move',
padding: '3px',
margin: 0,
justifyContent: 'center',
color: '#787878'
},
icon: iconElement,
onClick: noop,
size: "small"
})
})) : null, /*#__PURE__*/jsxs("span", {
children: ["\u7B2C", props.extraData.index + 1, "\u884C"]
})]
}),
children: props.children
})
}, rowId);
};
var Handle2 = function Handle2(props) {
return /*#__PURE__*/jsx(CardWrapper, {
size: "small",
style: {
marginBottom: 10
},
extra: /*#__PURE__*/jsx(DeleteNode, {
style: {
color: 'red'
},
hidden: props.extraData.required && props.extraData.fields.length === 1,
onDelete: function onDelete() {
props.extraData.operation.remove(props.extraData.index);
}
}),
title: "\u7B2C".concat(props.extraData.index + 1, "\u884C"),
children: props.children
});
};
var _excluded = ["dragIcon", "uidFieldKey", "onDragChange", "disabledDrag", "formListCompleteName", "formListName", "dragTriggerPosition"];
/**
* 可拖拽编辑卡片
* ```
* 1. 卡片数组必须有唯一值字段，通过参数 uidFieldKey 告诉组件
* ```
*/
var DragEditableCard = function DragEditableCard(props) {
var dragIcon = props.dragIcon,
uidFieldKey = props.uidFieldKey,
onDragChange = props.onDragChange,
disabledDrag = props.disabledDrag,
formListCompleteName = props.formListCompleteName,
formListName = props.formListName,
dragTriggerPosition = props.dragTriggerPosition,
otherProps = _objectWithoutProperties(props, _excluded);
var formListCompleteNameFt = formListCompleteName || formListName;
var form = Form.useFormInstance();
var dataList = Form.useWatch(formListCompleteNameFt, form);
var sensors = useSensors(useSensor(PointerSensor, {
activationConstraint: {
// 当拖拽触发区域有其他点击事件时，需要延迟触发拖拽动作
delay: 0,
tolerance: 0
}
}));
var onDragEnd = function onDragEnd(_ref) {
var active = _ref.active,
over = _ref.over;
if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
var activeIndex = dataList.findIndex(function (i) {
return i[uidFieldKey] === active.id;
});
var overIndex = dataList.findIndex(function (i) {
return i[uidFieldKey] === (over === null || over === void 0 ? void 0 : over.id);
});
var dataListNew = arrayMove(dataList, activeIndex, overIndex);
form.setFields([{
name: formListCompleteNameFt,
value: dataListNew
}]);
onDragChange === null || onDragChange === void 0 || onDragChange(dataListNew, {
activeId: active.id,
overId: over === null || over === void 0 ? void 0 : over.id,
activeIndex: activeIndex,
overIndex: overIndex
});
}
};
return /*#__PURE__*/jsx(DndContext, {
sensors: sensors,
modifiers: [restrictToVerticalAxis],
onDragEnd: onDragEnd,
children: /*#__PURE__*/jsx(SortableContext, {
items: (dataList === null || dataList === void 0 ? void 0 : dataList.map(function (i) {
return i[uidFieldKey];
})) || [],
strategy: verticalListSortingStrategy,
children: /*#__PURE__*/jsx(EditableCard, _objectSpread2(_objectSpread2({
formListName: formListName,
formListCompleteName: formListCompleteName
}, otherProps), {}, {
onCustomWrapper: function onCustomWrapper(children, extraData) {
if (disabledDrag) {
return /*#__PURE__*/jsx(Handle2, {
extraData: extraData,
children: children
}, extraData.key);
}
var target = form.getFieldValue([].concat(_toConsumableArray(toArray(formListCompleteNameFt)), [extraData.fieldItem.name]));
if (!(target !== null && target !== void 0 && target[uidFieldKey])) {
console.error("\u552F\u4E00\u503C\u5B57\u6BB5\u3010".concat(uidFieldKey, "\u3011\u4E3A\u7A7A\uFF0C\u65E0\u6CD5\u8FDB\u884C\u62D6\u62FD\u6392\u5E8F"), target);
return /*#__PURE__*/jsx(Handle2, {
extraData: extraData,
children: children
}, extraData.key);
}
return /*#__PURE__*/jsx(Handle, {
dragIcon: dragIcon,
rowId: target === null || target === void 0 ? void 0 : target[uidFieldKey],
extraData: extraData,
dragTriggerPosition: dragTriggerPosition,
children: children
}, extraData.key);
}
}))
})
});
};
export { DragEditableCard as D };
//# sourceMappingURL=editable-card-B47j1yVw.js.map