@flatbiz/antd
Version:
266 lines (261 loc) • 10.6 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { classNames } from '@dimjs/utils/class-names/class-names';
import { b as _objectSpread2, c as _toConsumableArray, a as _slicedToArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { arrayRemove } from '@dimjs/utils/array/array-remove';
import { hooks } from '@wove/react/hooks';
import { Fragment, useState, useRef, useMemo } from 'react';
import { Form, Collapse } from 'antd';
import { DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
import { useSortable, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { toArray } from '@flatbiz/utils';
import { fbaHooks } from './fba-hooks/index.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, _props$onChange;
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 header = function header() {
var dragIcon = props.dragIcon ? props.dragIcon : /*#__PURE__*/jsx(_DragOutlined, {});
var headerContent = props.header({
formListFieldData: props.formListFieldData,
operation: props.formListOperate,
uid: props.uid,
formStageCompleteName: props.formStageCompleteName,
getInsideFormItemName: function getInsideFormItemName(key) {
return [props.formListFieldData.name].concat(_toConsumableArray(toArray(key)));
},
getInsideFormItemData: function getInsideFormItemData() {
return form.getFieldValue(props.formStageCompleteName) || {};
},
index: props.index
});
return props.dragDisabled ? headerContent : /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx("span", _objectSpread2(_objectSpread2({
className: "dc-drag-trigger"
}, listeners), {}, {
children: dragIcon
})), /*#__PURE__*/jsx("span", {
className: "dc-drag-header-content",
style: props.headerStyle,
children: headerContent
})]
});
};
var style = _objectSpread2({
transform: CSS.Transform.toString(transform),
transition: transition
}, props.style);
var cname = classNames('drag-collapse', {
'drag-collapse-grap': props.isGray,
'drag-collapse-last': props.isLast,
'drag-collapse-drag-disabled': isDisabled
}, props.className);
return /*#__PURE__*/jsx(Collapse, {
activeKey: props.isActive ? props.uid : undefined,
accordion: true,
className: cname,
collapsible: props.collapsible,
expandIcon: props.expandIcon,
expandIconPosition: props.expandIconPosition,
size: props.size,
onChange: (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.bind(null, props.uid),
style: _objectSpread2({}, style),
ref: setNodeRef,
items: [{
key: props.uid,
label: header(),
children: /*#__PURE__*/jsx(Fragment, {
children: props.content({
formListFieldData: props.formListFieldData,
operation: props.formListOperate,
uid: props.uid,
formStageCompleteName: props.formStageCompleteName,
getInsideFormItemName: function getInsideFormItemName(key) {
return [props.formListFieldData.name].concat(_toConsumableArray(toArray(key)));
},
getInsideFormItemData: function getInsideFormItemData() {
return form.getFieldValue(props.formStageCompleteName) || {};
},
index: props.index
})
})
}]
});
}
var DragCollapseFormList = function DragCollapseFormList(props) {
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
dragActiveId = _useState2[0],
setDragActiveId = _useState2[1];
var _useState3 = useState([]),
_useState4 = _slicedToArray(_useState3, 2),
openKeys = _useState4[0],
setOpenKeys = _useState4[1];
var form = Form.useFormInstance();
var formListOperationRef = useRef([]);
var formListValue = Form.useWatch(props.formListName, form);
var getUidValue = hooks.useCallbackRef(function (item) {
return item === null || item === void 0 ? void 0 : item[props.uidFieldName || 'uid'];
});
fbaHooks.useEffectCustom(function () {
var defaultActiveKeys = toArray(props.defaultActiveKey);
if (!props.activeKey && defaultActiveKeys.length > 0) {
setOpenKeys(defaultActiveKeys);
} else {
setOpenKeys(toArray(props.activeKey));
}
}, []);
hooks.useUpdateEffect(function () {
setOpenKeys(toArray(props.activeKey));
}, [props.activeKey]);
var onChange = function onChange(key) {
var openKeysNew = [];
if (props.accordion) {
if (openKeys[0] && openKeys[0] === key) {
openKeysNew = [];
} else {
openKeysNew = [key];
}
} else {
var has = openKeys.includes(key);
if (has) {
arrayRemove(openKeys, key);
openKeysNew = _toConsumableArray(openKeys);
} else {
openKeysNew = openKeys.concat(key);
}
}
setOpenKeys(openKeysNew);
if (props.accordion) {
var _props$onChange;
(_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, openKeysNew.length ? openKeysNew[0] : undefined);
} else {
var _props$onChange2;
(_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, openKeysNew.length ? openKeysNew : undefined);
}
};
function handleDragStart(event) {
var active = event.active;
setDragActiveId(active.id);
}
var getItems = hooks.useCallbackRef(function () {
return form.getFieldValue(props.formListName) || [];
});
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.formListName,
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 cName = classNames('drag-collapse-formlist-wrapper', {
'dcfw-isEmpty': toArray(formListValue).length === 0
}, props.className);
return /*#__PURE__*/jsx("div", {
className: cName,
style: props.style,
children: /*#__PURE__*/jsx(DndContext, {
collisionDetection: closestCenter,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
children: /*#__PURE__*/jsx(Form.List, {
name: props.formListName,
rules: props.rules,
children: function children(fields, operate) {
formListOperationRef.current = fields;
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsx(SortableContext, {
items: getItems().map(function (temp) {
return getUidValue(temp);
}),
strategy: verticalListSortingStrategy,
children: /*#__PURE__*/jsx(Fragment, {
children: fields.map(function (item, index) {
var uid = getUidValue(getItems()[index]);
return /*#__PURE__*/jsx(SortableItem, {
formListOperate: operate,
formListFieldData: item,
uid: uid,
isActive: openKeys.includes(uid),
collapsible: props.collapsible,
expandIcon: props.expandIcon,
expandIconPosition: props.expandIconPosition,
size: props.size,
dragIcon: props.dragIcon,
getItemDragDisabled: props.getItemDragDisabled,
dragDisabled: props.dragDisabled,
onChange: onChange,
isGray: uid === dragActiveId,
isLast: index === getItems().length - 1,
header: props.header,
content: props.content,
index: index,
formStageCompleteName: [].concat(_toConsumableArray(toArray(props.formListName)), [item.name])
}, "".concat(uid, "-").concat(item.key));
})
})
}), /*#__PURE__*/jsx(DragOverlay, {
dropAnimation: {
duration: 0
},
children: dragActiveId && dragOverlayItem ? /*#__PURE__*/jsx(SortableItem, {
isOverlay: true,
uid: dragActiveId,
className: "overlay-sortable-item",
formListFieldData: dragOverlayItem,
isActive: openKeys.includes(dragActiveId),
collapsible: props.collapsible,
expandIcon: props.expandIcon,
expandIconPosition: props.expandIconPosition,
size: props.size,
dragIcon: props.dragIcon,
onChange: onChange,
header: props.header,
content: props.content,
formListOperate: null,
index: 0,
formStageCompleteName: [].concat(_toConsumableArray(toArray(props.formListName)), [dragOverlayItem.name])
}, dragActiveId) : null
})]
});
}
})
})
});
};
export { DragCollapseFormList as D };
//# sourceMappingURL=drag-collapse-DU_JhQTz.js.map