@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
219 lines (218 loc) • 10.6 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MenuTooltip = void 0;
require("antd/es/input/style");
var _input = _interopRequireDefault(require("antd/es/input"));
require("antd/es/popover/style");
var _popover = _interopRequireDefault(require("antd/es/popover"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _context = require("../../models/context");
var _hooks = require("../../utils/hooks");
var _createIconFont = _interopRequireDefault(require("../../utils/createIconFont"));
require("./index.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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; }
// 检索节点
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);
};
// 悬浮菜单项详细描述
var MenuTooltip = exports.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 = (0, _react.useMemo)(function () {
return (0, _createIconFont.default)(iconFontUrl);
}, [iconFontUrl]);
return /*#__PURE__*/_react.default.createElement("div", {
className: 'xflow-node-menu-tooltip'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'icon-box-max',
style: {
background: (icon === null || icon === void 0 ? void 0 : icon.bgColor) || '#F79009',
marginRight: '8px'
}
}, iconSvg ? /*#__PURE__*/_react.default.createElement(SVGWidget, {
setting: nodeSetting
}) : /*#__PURE__*/_react.default.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.default.createElement("div", {
className: 'title'
}, title), /*#__PURE__*/_react.default.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 = (0, _react.useMemo)(function () {
return (0, _createIconFont.default)(iconFontUrl);
}, [iconFontUrl]);
var _useContext = (0, _react.useContext)(_context.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.default.createElement(_popover.default, {
key: type,
content: /*#__PURE__*/_react.default.createElement(MenuTooltip, Object.assign({}, props, {
SVGWidget: SVGWidget,
nodeSetting: nodeSetting
})),
placement: 'right',
arrow: false,
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'menu-item',
onClick: onClick(type)
}, /*#__PURE__*/_react.default.createElement("span", {
className: 'icon-box',
style: {
background: (icon === null || icon === void 0 ? void 0 : icon.bgColor) || '#F79009',
marginRight: '8px'
}
}, iconSvg ? /*#__PURE__*/_react.default.createElement(SVGWidget, {
setting: nodeSetting
}) : /*#__PURE__*/_react.default.createElement(IconBox, {
type: icon === null || icon === void 0 ? void 0 : icon.type,
style: {
color: '#fff',
fontSize: 13
}
})), /*#__PURE__*/_react.default.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 = (0, _react.useContext)(_context.ConfigContext),
iconFontUrl = _useContext2.iconFontUrl;
var _useSet = (0, _hooks.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.default.createElement("div", {
className: 'xflow-node-menu',
ref: ref
}, !!showSearch && (/*#__PURE__*/_react.default.createElement("div", {
style: {
margin: '5px 9px 9px'
}
}, /*#__PURE__*/_react.default.createElement(_input.default, {
placeholder: "\u641C\u7D22\u8282\u70B9",
onChange: handleSearch,
prefix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, {
style: {
color: 'rgba(0,0,0,.45)'
}
}),
style: {
width: '100%'
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "xflow-node-menu-list"
}, filterHiddenMenu(menuList).map(function (item, index) {
return item.type === '_group' ? (/*#__PURE__*/_react.default.createElement("div", {
key: "".concat(item.type, "-").concat(index)
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'menu-group-title'
}, item.title), filterHiddenMenu(item.items).map(function (data, index) {
return /*#__PURE__*/_react.default.createElement(MenuItem, Object.assign({
iconFontUrl: iconFontUrl
}, data, {
onClick: handleItemClick,
key: index
}));
}))) : (/*#__PURE__*/_react.default.createElement("div", {
key: "".concat(item.type, "-").concat(index)
}, /*#__PURE__*/_react.default.createElement(MenuItem, Object.assign({
iconFontUrl: iconFontUrl
}, item, {
onClick: handleItemClick
}))));
})));
};
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(NodesMenu);