91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { cx } from '@emotion/css';
|
|
import { Dropdown, Menu, Button } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { useAPIClient, useCompile } from '@nocobase/client';
|
|
import { useFlowContext } from './FlowContext';
|
|
import { Instruction, instructions } from './nodes';
|
|
import { addButtonClass } from './style';
|
|
import { NAMESPACE } from './locale';
|
|
|
|
interface AddButtonProps {
|
|
upstream;
|
|
branchIndex?: number | null;
|
|
}
|
|
|
|
export function AddButton({ upstream, branchIndex = null }: AddButtonProps) {
|
|
const compile = useCompile();
|
|
const api = useAPIClient();
|
|
const { workflow, refresh } = useFlowContext() ?? {};
|
|
if (!workflow) {
|
|
return null;
|
|
}
|
|
const resource = api.resource('workflows.nodes', workflow.id);
|
|
|
|
async function onCreate({ keyPath }) {
|
|
const type = keyPath.pop();
|
|
const config = {};
|
|
const [optionKey] = keyPath;
|
|
const instruction = instructions.get(type);
|
|
if (optionKey) {
|
|
const { value } = instruction.options?.find((item) => item.key === optionKey) ?? {};
|
|
Object.assign(config, value);
|
|
}
|
|
|
|
const {
|
|
data: { data: node },
|
|
} = await resource.create!({
|
|
values: {
|
|
type,
|
|
upstreamId: upstream?.id ?? null,
|
|
branchIndex,
|
|
title: compile(instruction.title),
|
|
config,
|
|
},
|
|
});
|
|
|
|
refresh();
|
|
}
|
|
|
|
const instructionList = Array.from(instructions.getValues()) as Instruction[];
|
|
|
|
const groups = [
|
|
{ key: 'control', label: `{{t("Control", { ns: "${NAMESPACE}" })}}` },
|
|
{ key: 'collection', label: `{{t("Collection operations", { ns: "${NAMESPACE}" })}}` },
|
|
{ key: 'manual', label: `{{t("Manual", { ns: "${NAMESPACE}" })}}` },
|
|
{ key: 'extended', label: `{{t("Extended types", { ns: "${NAMESPACE}" })}}` },
|
|
]
|
|
.filter((group) => instructionList.filter((item) => item.group === group.key).length)
|
|
.map((group) => {
|
|
const groupInstructions = instructionList.filter((item) => item.group === group.key);
|
|
|
|
return {
|
|
...group,
|
|
type: 'group',
|
|
children: groupInstructions.map((item) => ({
|
|
key: item.type,
|
|
label: item.title,
|
|
type: item.options ? 'subMenu' : null,
|
|
children: item.options
|
|
? item.options.map((option) => ({
|
|
key: option.key,
|
|
label: option.label,
|
|
}))
|
|
: null,
|
|
})),
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className={cx(addButtonClass)}>
|
|
<Dropdown
|
|
trigger={['click']}
|
|
overlay={<Menu onClick={(ev) => onCreate(ev)} items={compile(groups)} />}
|
|
disabled={workflow.executed}
|
|
>
|
|
<Button shape="circle" icon={<PlusOutlined />} />
|
|
</Dropdown>
|
|
</div>
|
|
);
|
|
}
|