2023-04-25 13:12:14 +08:00
|
|
|
import React from 'react';
|
2023-10-28 11:33:54 +08:00
|
|
|
import { CloseOutlined } from '@ant-design/icons';
|
|
|
|
|
|
|
|
import { css, cx } from '@nocobase/client';
|
|
|
|
|
2023-04-25 13:12:14 +08:00
|
|
|
import { AddButton } from './AddButton';
|
2023-10-27 15:32:17 +08:00
|
|
|
import { useGetAriaLabelOfAddButton } from './hooks/useGetAriaLabelOfAddButton';
|
2022-10-30 11:54:14 +08:00
|
|
|
import { Node } from './nodes';
|
2023-07-16 12:46:25 +08:00
|
|
|
import useStyles from './style';
|
2022-10-30 11:54:14 +08:00
|
|
|
|
|
|
|
export function Branch({
|
|
|
|
from = null,
|
|
|
|
entry = null,
|
|
|
|
branchIndex = null,
|
2023-04-25 13:12:14 +08:00
|
|
|
controller = null,
|
2023-10-27 11:34:08 +08:00
|
|
|
className,
|
2023-10-28 11:33:54 +08:00
|
|
|
end,
|
2023-02-20 11:52:06 +08:00
|
|
|
}: {
|
|
|
|
from?: any;
|
|
|
|
entry?: any;
|
|
|
|
branchIndex?: number | null;
|
2023-10-27 11:34:08 +08:00
|
|
|
controller?: React.ReactNode;
|
|
|
|
className?: string;
|
2023-10-28 11:33:54 +08:00
|
|
|
end?: boolean;
|
2022-10-30 11:54:14 +08:00
|
|
|
}) {
|
2023-07-16 12:46:25 +08:00
|
|
|
const { styles } = useStyles();
|
2023-10-27 15:32:17 +08:00
|
|
|
const { getAriaLabel } = useGetAriaLabelOfAddButton(from, branchIndex);
|
2023-02-20 11:52:06 +08:00
|
|
|
const list: any[] = [];
|
2022-10-30 11:54:14 +08:00
|
|
|
for (let node = entry; node; node = node.downstream) {
|
|
|
|
list.push(node);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-10-28 11:33:54 +08:00
|
|
|
<div className={cx('workflow-branch', styles.branchClass, className)}>
|
2022-10-30 11:54:14 +08:00
|
|
|
<div className="workflow-branch-lines" />
|
|
|
|
{controller}
|
2023-10-27 15:32:17 +08:00
|
|
|
<AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
|
2022-10-30 11:54:14 +08:00
|
|
|
<div className="workflow-node-list">
|
2023-04-25 13:12:14 +08:00
|
|
|
{list.map((item) => (
|
|
|
|
<Node data={item} key={item.id} />
|
|
|
|
))}
|
2022-10-30 11:54:14 +08:00
|
|
|
</div>
|
2023-10-28 11:33:54 +08:00
|
|
|
{end ? (
|
|
|
|
<div className="end-sign">
|
|
|
|
<CloseOutlined />
|
|
|
|
</div>
|
|
|
|
) : null}
|
2022-10-30 11:54:14 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|