@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
103 lines • 4.71 kB
JavaScript
import "antd/es/popover/style";
import _Popover from "antd/es/popover";
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); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import classNames from 'classnames';
import React, { memo, useMemo } from 'react';
import createIconFont from '../../utils/createIconFont';
import TextEllipsis from '../TextEllipsis';
import "./index.css";
import TitleMenuTooltip from './TitleMenuTooltip';
export default /*#__PURE__*/memo(function (props) {
var className = props.className,
onClick = props.onClick,
children = props.children,
icon = props.icon,
title = props.title,
desc = props.desc,
hideDesc = props.hideDesc,
NodeWidget = props.NodeWidget,
iconFontUrl = props.iconFontUrl,
iconSvg = props.iconSvg,
hideTitleTips = props.hideTitleTips,
isSwitchBottom = props.isSwitchBottom,
nodeSettingTitle = props.nodeSettingTitle,
style = props.style,
_gradientHeight = props.gradientHeight;
var IconBox = useMemo(function () {
return createIconFont(iconFontUrl);
}, [iconFontUrl]);
var containerRef = React.useRef(null);
var renderDesc = function renderDesc() {
return /*#__PURE__*/React.createElement(React.Fragment, null, !hideDesc && !!desc && (/*#__PURE__*/React.createElement(TextEllipsis, {
text: desc,
rows: 2,
type: "paragraph",
className: "node-desc"
})));
};
var renderDescAndNodeWidget = function renderDescAndNodeWidget() {
if (isSwitchBottom) {
// 条件节点且为TB布局
return /*#__PURE__*/React.createElement(React.Fragment, null, renderDesc(), NodeWidget && /*#__PURE__*/React.createElement("div", {
className: "node-widget"
}, NodeWidget));
} else {
return /*#__PURE__*/React.createElement(React.Fragment, null, NodeWidget && /*#__PURE__*/React.createElement("div", {
className: "node-widget"
}, NodeWidget), renderDesc());
}
};
var hasBody = !!children;
var hasDesc = !!desc && !hideDesc;
var gradientHeight = _gradientHeight || (hasBody || hasDesc || NodeWidget ? '20%' : '100%');
return /*#__PURE__*/React.createElement("div", {
ref: containerRef,
className: classNames('custom-node-container', _defineProperty({}, className, !!className)),
onClick: onClick
}, /*#__PURE__*/React.createElement("div", {
className: "node-gradient-header",
style: Object.assign({
'--gradient-height': gradientHeight
}, style)
}), /*#__PURE__*/React.createElement("div", {
className: "node-title",
style: {
position: 'relative',
zIndex: 1
}
}, !hideTitleTips ? (/*#__PURE__*/React.createElement(_Popover, {
overlayClassName: "nodes-popover",
content: /*#__PURE__*/React.createElement(TitleMenuTooltip, Object.assign({}, props)),
placement: "bottomLeft",
trigger: "hover",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
},
overlayInnerStyle: {
padding: '12px 16px'
}
}, /*#__PURE__*/React.createElement("span", {
className: "icon-box",
style: {
background: icon === null || icon === void 0 ? void 0 : icon.bgColor
}
}, iconSvg ? iconSvg : /*#__PURE__*/React.createElement(IconBox, Object.assign({}, icon))))) : (/*#__PURE__*/React.createElement("span", {
className: "icon-box",
style: {
background: icon === null || icon === void 0 ? void 0 : icon.bgColor
}
}, iconSvg ? iconSvg : /*#__PURE__*/React.createElement(IconBox, Object.assign({}, icon)))), /*#__PURE__*/React.createElement(TextEllipsis, {
text: title,
style: {
width: 188,
marginLeft: '8px'
}
})), /*#__PURE__*/React.createElement("div", {
className: "node-body"
}, children), /*#__PURE__*/React.createElement("div", {
className: "node-body-desc"
}, renderDescAndNodeWidget()));
});