jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
124 lines • 4.32 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { Fragment } from 'react';
import { Tree, Button } from 'antd';
import { uid } from 'jjb-lc-formily/shared';
import { observer } from 'jjb-lc-formily/reactive-react';
import { usePrefix, TextWidget, IconWidget } from 'jjb-lc-designable/react';
import { Title } from './Title';
import { Header } from './Header';
import { traverseTree } from './shared';
import './styles.less';
import { GlobalRegistry } from 'jjb-lc-designable/core';
const limitTreeDrag = ({
dropPosition
}) => {
if (dropPosition === 0) {
return false;
}
return true;
};
export const TreePanel = observer(props => {
const prefix = usePrefix('data-source-setter');
const dropHandler = info => {
const dropKey = info.node?.key;
const dragKey = info.dragNode?.key;
const dropPos = info.node.pos.split('-');
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
const data = [...props.treeDataSource.dataSource];
// Find dragObject
let dragObj;
traverseTree(data, (item, index, arr) => {
if (arr[index].key === dragKey) {
arr.splice(index, 1);
dragObj = item;
}
});
if (!info.dropToGap) {
traverseTree(data, item => {
if (item.key === dropKey) {
item.children = item.children || [];
item.children.unshift(dragObj);
}
});
} else if ((info.node.children || []).length > 0 && info.node.expanded && dropPosition === 1) {
traverseTree(data, item => {
if (item.key === dropKey) {
item.children = item.children || [];
item.children.unshift(dragObj);
}
});
} else {
let ar;
let i;
traverseTree(data, (item, index, arr) => {
if (item.key === dropKey) {
ar = arr;
i = index;
}
});
if (dropPosition === -1) {
ar.splice(i, 0, dragObj);
} else {
ar.splice(i + 1, 0, dragObj);
}
}
props.treeDataSource.dataSource = data;
};
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Header, {
title: /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.dataSourceTree"
}),
extra: /*#__PURE__*/React.createElement(Button, {
type: "text",
onClick: () => {
const uuid = uid();
const dataSource = props.treeDataSource.dataSource;
const initialKeyValuePairs = props.defaultOptionValue?.map(item => ({
...item
})) || [{
label: 'label',
value: `${GlobalRegistry.getDesignerMessage(`SettingComponents.DataSourceSetter.item`)} ${dataSource.length + 1}`
}, {
label: 'value',
value: uuid
}];
props.treeDataSource.dataSource = dataSource.concat({
key: uuid,
duplicateKey: uuid,
map: initialKeyValuePairs,
children: []
});
},
icon: /*#__PURE__*/React.createElement(IconWidget, {
infer: "Add"
})
}, /*#__PURE__*/React.createElement(TextWidget, {
token: "SettingComponents.DataSourceSetter.addNode"
}))
}), /*#__PURE__*/React.createElement("div", {
className: `${prefix + '-layout-item-content'}`
}, /*#__PURE__*/React.createElement(Tree, {
blockNode: true,
draggable: true,
allowDrop: props.allowTree ? () => true : limitTreeDrag,
defaultExpandAll: true,
defaultExpandParent: true,
autoExpandParent: true,
showLine: {
showLeafIcon: false
},
treeData: props.treeDataSource.dataSource,
onDragEnter: () => {},
onDrop: dropHandler,
titleRender: titleProps => {
return /*#__PURE__*/React.createElement(Title, _extends({}, titleProps, {
treeDataSource: props.treeDataSource
}));
},
onSelect: selectedKeys => {
if (selectedKeys[0]) {
props.treeDataSource.selectedKey = selectedKeys[0].toString();
}
}
})));
});