@xrenders/xflow
Version:
一款功能强大、易用灵活的流程编辑器框架，帮助你轻松构建复杂的工作流和流程产品
280 lines • 12.2 kB
JavaScript
import "antd/es/divider/style";
import _Divider from "antd/es/divider";
import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/drawer/style";
import _Drawer from "antd/es/drawer";
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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 _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 _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { produce } from 'immer';
import { debounce, isNumber } from 'lodash';
import React, { useContext, useEffect, useMemo, useState, useCallback, useRef } from 'react';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
import { ConfigContext } from '../../models/context';
import { isTruthy, getColorfulModeBackground } from '../../utils';
import createIconFont from '../../utils/createIconFont';
import IconView from '../IconView';
import TextEllipsis from '../TextEllipsis';
import "./index.css";
var Panel = function Panel(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
// disabled属性取的地方可能不对------to do
var onClose = props.onClose,
children = props.children,
nodeType = props.nodeType,
disabled = props.disabled,
node = props.node,
id = props.id,
data = props.data,
openLogPanel = props.openLogPanel;
// 1.获取节点配置信息
var _useContext = useContext(ConfigContext),
settingMap = _useContext.settingMap,
iconFontUrl = _useContext.iconFontUrl,
globalConfig = _useContext.globalConfig,
antdVersion = _useContext.antdVersion,
readOnly = _useContext.readOnly,
logPanel = _useContext.logPanel,
onTesting = _useContext.onTesting,
widgets = _useContext.widgets,
openColorfulMode = _useContext.openColorfulMode;
var nodeSetting = settingMap[nodeType] || {};
var _useStore = useStore(function (state) {
return {
nodes: state.nodes,
setNodes: state.setNodes
};
}, shallow),
nodes = _useStore.nodes,
setNodes = _useStore.setNodes;
var activeNode = useMemo(function () {
var node = nodes.find(function (r) {
return r.id === id;
});
if (node) {
return node;
} else {
return {};
}
}, [nodes]);
var isDisabled = disabled; // 目前没用
var _useState = useState(data === null || data === void 0 ? void 0 : data.desc),
_useState2 = _slicedToArray(_useState, 2),
descVal = _useState2[0],
setDescVal = _useState2[1];
var _useState3 = useState((data === null || data === void 0 ? void 0 : data.title) || (nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.title)),
_useState4 = _slicedToArray(_useState3, 2),
titleVal = _useState4[0],
setTitleVal = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isComposing = _useState6[0],
setIsComposing = _useState6[1];
var titleRef = useRef(titleVal);
var descRef = useRef(descVal);
var nodePanel = nodeSetting.nodePanel,
iconSvg = nodeSetting.iconSvg,
showTestingBtn = nodeSetting.showTestingBtn;
var SVGWidget = widgets[nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.iconSvg];
var hideDesc = (_c = (_a = nodePanel === null || nodePanel === void 0 ? void 0 : nodePanel.hideDesc) !== null && _a !== void 0 ? _a : (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nodePanel) === null || _b === void 0 ? void 0 : _b.hideDesc) !== null && _c !== void 0 ? _c : false;
var isShowStatusPanel = Boolean(isTruthy(node === null || node === void 0 ? void 0 : node._status) && openLogPanel);
var offsetRightStatus = isNumber(logPanel === null || logPanel === void 0 ? void 0 : logPanel.width) ? Number((logPanel === null || logPanel === void 0 ? void 0 : logPanel.width) + 10) : 410;
var handleNodeValueChange = debounce(function (data) {
var newNodes = produce(nodes, function (draft) {
var node = null;
// 反向查询ID，因为有多个ID相同的元素
for (var i = (draft === null || draft === void 0 ? void 0 : draft.length) - 1; i >= 0; i--) {
if (draft[i].id === id) {
node = draft[i];
break;
}
}
if (node) {
// 更新节点的 data
node.data = Object.assign(Object.assign({}, node.data), data);
}
});
setNodes(newNodes, false);
}, 500);
var handleTitleChange = useCallback(function (e) {
var newValue = e.target.value;
setTitleVal(newValue);
titleRef.current = newValue;
if (!isComposing) {
handleNodeValueChange({
title: newValue
});
}
}, [handleNodeValueChange, isComposing]);
var handleDescChange = useCallback(function (e) {
var newValue = e.target.value;
setDescVal(newValue);
descRef.current = newValue;
if (!isComposing) {
handleNodeValueChange({
desc: newValue
});
}
}, [handleNodeValueChange, isComposing]);
var handleCompositionStart = useCallback(function () {
setIsComposing(true);
}, []);
var handleCompositionEnd = useCallback(function (e) {
setIsComposing(false);
var newValue = e.currentTarget.value;
if (e.currentTarget.tagName === 'INPUT') {
setTitleVal(newValue);
titleRef.current = newValue;
handleNodeValueChange({
title: newValue
});
} else if (e.currentTarget.tagName === 'TEXTAREA') {
setDescVal(newValue);
descRef.current = newValue;
handleNodeValueChange({
desc: newValue
});
}
}, [handleNodeValueChange]);
var handleBlur = useCallback(function (e) {
if (isComposing) {
setIsComposing(false);
}
if (e.currentTarget.tagName === 'INPUT') {
if (titleRef.current !== titleVal) {
handleNodeValueChange({
title: titleRef.current
});
}
} else if (e.currentTarget.tagName === 'TEXTAREA') {
if (descRef.current !== descVal) {
handleNodeValueChange({
desc: descRef.current
});
}
}
}, [titleVal, descVal, handleNodeValueChange, isComposing]);
useEffect(function () {
setDescVal(data === null || data === void 0 ? void 0 : data.desc);
setTitleVal((data === null || data === void 0 ? void 0 : data.title) || (nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.title));
titleRef.current = (data === null || data === void 0 ? void 0 : data.title) || (nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.title);
descRef.current = data === null || data === void 0 ? void 0 : data.desc;
}, [id, (_d = activeNode.data) === null || _d === void 0 ? void 0 : _d.desc, (_e = activeNode.data) === null || _e === void 0 ? void 0 : _e.title]);
var Icon = useMemo(function () {
return createIconFont(iconFontUrl);
}, [iconFontUrl]);
var drawerVersionProps = useMemo(function () {
if (antdVersion === 'V5') {
return {
rootClassName: 'custom-node-panel',
open: true
};
}
// V4
return {
className: 'custom-node-panel',
visible: true
};
}, [antdVersion]);
return /*#__PURE__*/React.createElement(_Drawer, Object.assign({}, drawerVersionProps, {
getContainer: false,
key: id,
width: (nodePanel === null || nodePanel === void 0 ? void 0 : nodePanel.width) || ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nodePanel) === null || _f === void 0 ? void 0 : _f.width) || 400,
mask: false,
onClose: onClose,
headerStyle: Object.assign({
paddingBottom: '12px'
}, getColorfulModeBackground((_g = nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.icon) === null || _g === void 0 ? void 0 : _g.bgColor, openColorfulMode)),
style: {
position: 'absolute',
right: isShowStatusPanel ? offsetRightStatus : 0
},
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("span", {
className: "icon-box",
style: {
background: ((_h = nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.icon) === null || _h === void 0 ? void 0 : _h.bgColor) || '#F79009'
}
}, iconSvg ? (/*#__PURE__*/React.createElement(SVGWidget, {
setting: nodeSetting
})) : (/*#__PURE__*/React.createElement(Icon, {
style: {
fontSize: 14,
color: '#fff'
},
type: (_j = nodeSetting === null || nodeSetting === void 0 ? void 0 : nodeSetting.icon) === null || _j === void 0 ? void 0 : _j.type
}))), isDisabled || readOnly ? (/*#__PURE__*/React.createElement(TextEllipsis, {
text: titleVal,
style: {
marginLeft: '11px'
}
})) : (/*#__PURE__*/React.createElement(_Input, {
style: {
width: '100%'
},
value: titleVal,
onChange: handleTitleChange,
onCompositionStart: handleCompositionStart,
onCompositionEnd: handleCompositionEnd,
onBlur: handleBlur,
size: "small"
}))), /*#__PURE__*/React.createElement("div", {
className: "title-actions"
}, /*#__PURE__*/React.createElement(_Space, {
size: [4, 4]
}, !isDisabled && showTestingBtn && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconView, {
type: "icon-yunhang",
onClick: function onClick() {
var n = (nodes === null || nodes === void 0 ? void 0 : nodes.find(function (item) {
return (item === null || item === void 0 ? void 0 : item.id) === (node === null || node === void 0 ? void 0 : node.id);
})) || {};
onTesting && onTesting(n, nodes);
},
style: {
fontSize: 16
}
}), /*#__PURE__*/React.createElement(_Divider, {
type: "vertical"
}))), /*#__PURE__*/React.createElement(IconView, {
type: "icon-remove",
style: {
fontSize: 16
},
onClick: onClose
})))), !hideDesc && (/*#__PURE__*/React.createElement("div", {
className: "desc-box"
}, isDisabled || readOnly ? descVal && (/*#__PURE__*/React.createElement(TextEllipsis, {
text: descVal,
type: "paragraph",
rows: 2,
className: "readOnly-desc"
})) : (/*#__PURE__*/React.createElement(_Input.TextArea, {
placeholder: "\u6DFB\u52A0\u63CF\u8FF0...",
autoSize: {
minRows: 1,
maxRows: 3
},
value: descVal,
onChange: handleDescChange,
onCompositionStart: handleCompositionStart,
onCompositionEnd: handleCompositionEnd,
onBlur: handleBlur,
disabled: readOnly
})))))
}), children);
};
export default /*#__PURE__*/React.memo(Panel);