@ifed/component
Version:
@ifed/component
230 lines (229 loc) • 8.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _ = require("./..");
var _antd = require("antd");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _provider = require("../provider");
var _Icons = require("./Icons");
var _location = _interopRequireDefault(require("./location.gif"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const thisNodehasSubFlow = node => Array.isArray(node?.subFlow) && node.subFlow.length > 0;
const thisFlowHasSubFlow = arr => arr?.some(thisNodehasSubFlow);
function needMask(current, parents) {
const [parent] = parents.slice(-1);
return parent?.subFlow?.slice(-1)?.[0]?.nodeInfoList?.find?.(k => k.nodeId === current?.nodeId) !== undefined;
}
const getFirst = data => {
const first = data?.find?.(k => thisNodehasSubFlow(k));
if (first !== undefined) {
return first?.subFlow?.[0];
}
return null;
};
function getIcon(item) {
if (item.status === 'finish') {
return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
type: "check"
});
}
if (item.status === 'error') {
return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
type: "warning",
theme: "filled"
});
}
if (item.status === 'timeout') {
return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
type: "check"
});
}
if (item.status === 'process') {
return /*#__PURE__*/_react.default.createElement("img", {
src: _location.default,
className: "flow-icon-process",
alt: "process",
width: 30,
height: 30
});
}
if (item.status === 'suspend') {
return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
type: "pause"
});
}
return /*#__PURE__*/_react.default.createElement(_Icons.WaitIcon, null);
}
function getBranches(flow, pace) {
const result = [];
flow?.forEach((k, index) => {
if (k?.subFlow?.length !== undefined && k?.subFlow?.length > 0) {
result.push({
parentIndex: index,
nodeId: k.nodeId
});
}
});
return result.map((k, i) => {
return {
offset: i === 0 ? k.parentIndex * pace + pace / 2 : (k.parentIndex - result[i - 1].parentIndex) * pace,
...k
};
});
}
const width1 = 160;
function getOffsetStyle(start, end, pace) {
return {
left: `${start * pace + pace / 2}px`,
width: `${(end - start) * pace}px`
};
}
const Flow = ({
data = [],
onClick,
sub,
sup,
renderBraces,
renderNode,
renderIcon = getIcon,
renderCornerMark,
size,
pace = width1,
autoHide = true,
autoHeightMax = 600,
className
}) => {
const {
getPrefixCls
} = _react.default.useContext(_provider.ConfigContext);
if (!Array.isArray(data) || !data.every(k => k.nodeId && k.nodeName)) {
throw Error('props.data不是有效值，预期是包含nodeId和nodeName的对象数组');
}
const prefixCls = getPrefixCls('flow');
const scrollbarRef = _react.default.useRef(null);
const newData = data;
const handleClick = (e, item) => {
if (typeof onClick === 'function') {
onClick(e, item);
}
};
const renderBracesAndNodes = nodes => {
const braces = renderBraces?.(nodes);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.isArray(braces) && braces.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-braces`
}, braces?.map((k, i) => /*#__PURE__*/_react.default.createElement("div", {
key: `${k.start}-${k.end}-${i}`,
className: `${prefixCls}-brace`,
style: getOffsetStyle(k.start, k.end, pace)
}, /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-brace-main`
}, /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-brace-content`
}, k?.content)), /*#__PURE__*/_react.default.createElement("div", null)))) : null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(`${prefixCls}-nodes`),
style: {
width: `${nodes?.length * pace + 1}px`
}
}, nodes?.map(item => {
const defaultNode = /*#__PURE__*/_react.default.createElement("div", {
key: item.nodeId,
className: `${prefixCls}-node ${prefixCls}-node-${item.status}`,
style: {
width: `${pace}px`
},
onClick: e => {
handleClick(e, item);
}
}, renderCornerMark?.(item), /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-triangle`
}), /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-node-up-area`
}, sup?.(item, newData)), /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-node-down-area`
}, sub?.(item, newData)), /*#__PURE__*/_react.default.createElement("span", {
className: `${prefixCls}-node-icon`
}, renderIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-node-title`,
title: item.nodeName
}, item.nodeName));
if (typeof renderNode === 'function') {
return /*#__PURE__*/_react.default.cloneElement(renderNode(item, defaultNode), {
key: item.nodeId
});
}
return defaultNode;
})));
};
const first = getFirst(data);
const walkNodes = (nodes, parentNodes = []) => {
const cloneNodes = nodes;
const ad = getBranches(cloneNodes, pace);
return cloneNodes.map(k => {
if (thisNodehasSubFlow(k)) {
return {
...k,
__offset: ad?.find(m => m.nodeId === k.nodeId).offset
};
}
return k;
})?.reduceRight((result, next) => {
if (thisNodehasSubFlow(next)) {
return next.subFlow.map((flow, index) => {
const isLeaf = !thisFlowHasSubFlow(flow?.nodeInfoList);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(`${prefixCls}-branch`, {
[`${prefixCls}-branch-active`]: next.subFlow?.[0]?.status !== 'wait',
[`${prefixCls}-branch-corner`]: index === next.subFlow.length - 1 && isLeaf
}),
key: flow.key,
style: {
marginLeft: next?.__offset
}
}, needMask(next, parentNodes) ? /*#__PURE__*/_react.default.createElement("div", {
className: `${prefixCls}-branch-mask`,
style: {
left: `-${next?.__offset}px`
}
}) : null, first?.key === flow.key ? result : null, renderBracesAndNodes(flow?.nodeInfoList), !isLeaf ? walkNodes(flow?.nodeInfoList, [...parentNodes, next]) : null);
});
}
return result;
}, []);
};
const [hasHorizontalScrollbar, setHasHorizontalScrollbar] = _react.default.useState(false);
const checkForHorizontalScrollbar = () => {
if (scrollbarRef.current) {
const {
clientWidth,
scrollWidth
} = scrollbarRef.current.getValues();
setHasHorizontalScrollbar(scrollWidth > clientWidth);
}
};
_react.default.useEffect(() => {
checkForHorizontalScrollbar();
window.addEventListener('resize', checkForHorizontalScrollbar);
return () => {
window.removeEventListener('resize', checkForHorizontalScrollbar);
};
}, []);
return /*#__PURE__*/_react.default.createElement(_.Scrollbar, {
ref: scrollbarRef,
autoHeight: true,
autoHeightMax: autoHeightMax,
autoHide: autoHide
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(`${prefixCls}`, {
[`${prefixCls}-lg`]: size === 'large',
[`${className}`]: !!className
}),
style: {
width: hasHorizontalScrollbar ? 'auto' : newData?.length * pace + 1
}
}, renderBracesAndNodes(newData), walkNodes(newData)));
};
var _default = Flow;
exports.default = _default;