@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
116 lines • 4.48 kB
JavaScript
import "antd/es/popover/style";
import _Popover from "antd/es/popover";
import "antd/es/drawer/style";
import _Drawer from "antd/es/drawer";
import classNames from 'classnames';
import { isNumber } from 'lodash';
import React, { useContext, useMemo } from 'react';
import { ConfigContext } from '../../models/context';
import createIconFont from '../../utils/createIconFont';
import IconView from '../IconView';
import TitleMenuTooltip from '../NodeContainer/TitleMenuTooltip';
import "./index.css";
var PanelStatusLogContainer = function PanelStatusLogContainer(props) {
var _a, _b;
var onClose = props.onClose,
children = props.children,
nodeType = props.nodeType;
// 1.获取节点配置信息
var _useContext = useContext(ConfigContext),
settingMap = _useContext.settingMap,
iconFontUrl = _useContext.iconFontUrl,
globalConfig = _useContext.globalConfig,
logPanel = _useContext.logPanel,
widgets = _useContext.widgets,
antdVersion = _useContext.antdVersion;
var nodeSetting = settingMap[nodeType] || {};
var nodePanel = nodeSetting.nodePanel,
iconSvg = nodeSetting.iconSvg;
var Icon = useMemo(function () {
return createIconFont(iconFontUrl);
}, [iconFontUrl]);
var CustomWidget = widgets[logPanel === null || logPanel === void 0 ? void 0 : logPanel.logWidget]; // 内置setting组件
var isCustomWidget = !Boolean((logPanel === null || logPanel === void 0 ? void 0 : logPanel.logWidget) && CustomWidget);
var width = isNumber(logPanel === null || logPanel === void 0 ? void 0 : logPanel.width) ? logPanel === null || logPanel === void 0 ? void 0 : logPanel.width : 400;
var SVGWidget = widgets[nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.iconSvg];
var drawerVersionProps = useMemo(function () {
if (antdVersion === 'V5') {
return {
rootClassName: classNames('node-log-panel', {
'no-header-line': isCustomWidget
}),
open: true
};
}
// V4
return {
className: classNames('node-log-panel', {
'no-header-line': isCustomWidget
}),
visible: true
};
}, []);
return /*#__PURE__*/React.createElement(_Drawer, Object.assign({}, drawerVersionProps, {
getContainer: false,
width: width,
mask: false,
onClose: onClose,
headerStyle: {
paddingBottom: '12px'
},
style: {
position: 'absolute'
},
destroyOnClose: true,
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "title-box"
}, /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
flex: 1
}
}, /*#__PURE__*/React.createElement(_Popover, {
overlayClassName: "nodes-popover",
content: /*#__PURE__*/React.createElement(TitleMenuTooltip, Object.assign({}, nodeSetting, {
iconFontUrl: iconFontUrl,
iconSvg: iconSvg ? /*#__PURE__*/React.createElement(SVGWidget, {
setting: nodeSetting
}) : false,
nodeSettingTitle: nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.title
})),
placement: "bottom",
trigger: "hover",
getPopupContainer: function getPopupContainer() {
return document.getElementById('xflow-container');
},
overlayInnerStyle: {
padding: '12px 16px'
}
}, /*#__PURE__*/React.createElement("span", {
className: "icon-box",
style: {
background: ((_a = nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.icon) === null || _a === void 0 ? void 0 : _a.bgColor) || '#F79009'
}
}, iconSvg ? (/*#__PURE__*/React.createElement(SVGWidget, {
setting: nodeSetting
})) : (/*#__PURE__*/React.createElement(Icon, {
style: {
fontSize: 14,
color: '#fff'
},
type: (_b = nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.icon) === null || _b === void 0 ? void 0 : _b.type
})))), /*#__PURE__*/React.createElement("span", {
className: "title-content"
}, "\u6267\u884C\u65E5\u5FD7")), /*#__PURE__*/React.createElement("div", {
className: "title-actions"
}, /*#__PURE__*/React.createElement(IconView, {
type: "icon-remove",
style: {
fontSize: 16
},
onClick: onClose
}))))
}), children);
};
export default /*#__PURE__*/React.memo(PanelStatusLogContainer);