@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
209 lines • 8.82 kB
JavaScript
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/popover/style";
import _Popover from "antd/es/popover";
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import React, { forwardRef, useContext, useMemo } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { ConfigContext } from '../../models/context';
import { useSet } from '../../utils/hooks';
import createIconFont from '../../utils/createIconFont';
import "./index.css";
// 检索节点
var searchNodeList = function searchNodeList(query, list) {
if (!query) {
return list;
}
var searchTerm = query.toLowerCase();
function searchList(nodes) {
var preResult = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
if (nodes.length === 0) {
return preResult;
}
var _nodes = _toArray(nodes),
currentNode = _nodes[0],
restNodes = _nodes.slice(1);
var result = _toConsumableArray(preResult);
if (currentNode.title.toLowerCase().includes(searchTerm)) {
result.push(currentNode);
} else if ((currentNode === null || currentNode === void 0 ? void 0 : currentNode.type) === '_group' && currentNode.items) {
var matchingItems = searchList(currentNode.items);
if (matchingItems.length > 0) {
result.push(Object.assign(Object.assign({}, currentNode), {
items: matchingItems
}));
}
}
return searchList(restNodes, result);
}
return searchList(list);
};
// 悬浮菜单项详细描述
export var MenuTooltip = function MenuTooltip(_ref) {
var icon = _ref.icon,
title = _ref.title,
description = _ref.description,
iconFontUrl = _ref.iconFontUrl,
iconSvg = _ref.iconSvg,
SVGWidget = _ref.SVGWidget,
nodeSetting = _ref.nodeSetting;
var IconBox = useMemo(function () {
return createIconFont(iconFontUrl);
}, [iconFontUrl]);
return /*#__PURE__*/React.createElement("div", {
className: 'xflow-node-menu-tooltip'
}, /*#__PURE__*/React.createElement("div", {
className: 'icon-box-max',
style: {
background: (icon === null || icon === void 0 ? void 0 : icon.bgColor) || '#F79009',
marginRight: '8px'
}
}, iconSvg ? /*#__PURE__*/React.createElement(SVGWidget, {
setting: nodeSetting
}) : /*#__PURE__*/React.createElement(IconBox, {
type: icon === null || icon === void 0 ? void 0 : icon.type,
style: Object.assign({
color: '#fff',
fontSize: 13
}, icon === null || icon === void 0 ? void 0 : icon.style)
})), /*#__PURE__*/React.createElement("div", {
className: 'title'
}, title), /*#__PURE__*/React.createElement("div", {
className: 'description'
}, description));
};
// 节点菜单项
var MenuItem = function MenuItem(props) {
var title = props.title,
type = props.type,
icon = props.icon,
onClick = props.onClick,
iconFontUrl = props.iconFontUrl,
iconSvg = props.iconSvg;
var IconBox = useMemo(function () {
return createIconFont(iconFontUrl);
}, [iconFontUrl]);
var _useContext = useContext(ConfigContext),
widgets = _useContext.widgets,
settingMap = _useContext.settingMap;
var nodeSetting = settingMap[type] || {};
var SVGWidget = widgets[nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.iconSvg];
return /*#__PURE__*/React.createElement(_Popover, {
key: type,
content: /*#__PURE__*/React.createElement(MenuTooltip, Object.assign({}, props, {
SVGWidget: SVGWidget,
nodeSetting: nodeSetting
})),
placement: 'right',
arrow: false,
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/React.createElement("div", {
className: 'menu-item',
onClick: onClick(type)
}, /*#__PURE__*/React.createElement("span", {
className: 'icon-box',
style: {
background: (icon === null || icon === void 0 ? void 0 : icon.bgColor) || '#F79009',
marginRight: '8px'
}
}, iconSvg ? /*#__PURE__*/React.createElement(SVGWidget, {
setting: nodeSetting
}) : /*#__PURE__*/React.createElement(IconBox, {
type: icon === null || icon === void 0 ? void 0 : icon.type,
style: {
color: '#fff',
fontSize: 13
}
})), /*#__PURE__*/React.createElement("span", null, title)));
};
// 过滤 hidden 节点
var filterHiddenMenu = function filterHiddenMenu(list) {
return (list || []).filter(function (item) {
return !item.hidden;
});
};
/**
*
* 节点菜单List
*
*/
var NodesMenu = function NodesMenu(props, ref) {
var items = props.items,
showSearch = props.showSearch,
onClick = props.onClick;
var _useContext2 = useContext(ConfigContext),
iconFontUrl = _useContext2.iconFontUrl;
var _useSet = useSet({
menuList: _toConsumableArray(items)
}),
_useSet2 = _slicedToArray(_useSet, 2),
state = _useSet2[0],
setState = _useSet2[1];
var menuList = state.menuList;
var handleItemClick = function handleItemClick(type) {
return function (ev) {
ev.stopPropagation();
onClick({
type: type
});
};
};
var handleSearch = function handleSearch(ev) {
setState({
menuList: searchNodeList(ev.target.value, items)
});
};
return /*#__PURE__*/React.createElement("div", {
className: 'xflow-node-menu',
ref: ref
}, !!showSearch && (/*#__PURE__*/React.createElement("div", {
style: {
margin: '5px 9px 9px'
}
}, /*#__PURE__*/React.createElement(_Input, {
placeholder: "\u641C\u7D22\u8282\u70B9",
onChange: handleSearch,
prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
style: {
color: 'rgba(0,0,0,.45)'
}
}),
style: {
width: '100%'
}
}))), /*#__PURE__*/React.createElement("div", {
className: "xflow-node-menu-list"
}, filterHiddenMenu(menuList).map(function (item, index) {
return item.type === '_group' ? (/*#__PURE__*/React.createElement("div", {
key: "".concat(item.type, "-").concat(index)
}, /*#__PURE__*/React.createElement("div", {
className: 'menu-group-title'
}, item.title), filterHiddenMenu(item.items).map(function (data, index) {
return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
iconFontUrl: iconFontUrl
}, data, {
onClick: handleItemClick,
key: index
}));
}))) : (/*#__PURE__*/React.createElement("div", {
key: "".concat(item.type, "-").concat(index)
}, /*#__PURE__*/React.createElement(MenuItem, Object.assign({
iconFontUrl: iconFontUrl
}, item, {
onClick: handleItemClick
}))));
})));
};
export default /*#__PURE__*/forwardRef(NodesMenu);