diff --git a/src/BloodGroupNode/index.tsx b/src/BloodGroupNode/index.tsx index 68157ef..780199b 100644 --- a/src/BloodGroupNode/index.tsx +++ b/src/BloodGroupNode/index.tsx @@ -1,6 +1,7 @@ import { getClsFromSelectType } from '@/BloodNode'; import { NodeMapItem, NodeSelect, ProFlowNode, ProFlowNodeData } from '@/ProFlow/constants'; import { cx } from 'antd-style'; +import React from 'react'; import { useStyles } from './styles'; const convertMappingNode = (nodeList: ProFlowNode[]): NodeMapItem[] => { diff --git a/src/ProFlow/index.tsx b/src/ProFlow/index.tsx index 6b69909..46efe50 100644 --- a/src/ProFlow/index.tsx +++ b/src/ProFlow/index.tsx @@ -1,7 +1,6 @@ -import RadiusEdge from '@/BasicEdge'; -import ProFlowController from '@/ProFlowController'; import React, { useMemo, type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react'; import ReactFlow, { Background, BackgroundVariant, Edge, Node, useEdgesState } from 'reactflow'; +import { ProFlowController, RadiusEdge } from '../index'; import { ProFLowEdge, ProFlowNode } from './constants'; import { convertMappingFrom, getRenderData } from './helper'; import { useStyles } from './styles'; diff --git a/src/RadiusEdge/demos/index.tsx b/src/RadiusEdge/demos/index.tsx new file mode 100644 index 0000000..89b2577 --- /dev/null +++ b/src/RadiusEdge/demos/index.tsx @@ -0,0 +1,141 @@ +import { ProFlow, ProFlowNode } from '@ant-design/pro-flow'; +import { createStyles } from 'antd-style'; +import { memo } from 'react'; + +const useStyles = createStyles(({ css }) => ({ + container: css` + width: 100%; + height: 600px; + `, +})); + +const nodes: ProFlowNode[] = [ + { + id: 'a1', + data: { + title: 'XXX数据源', + describe: 'cksadjfnf', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original', + }, + }, + { + id: 'a2', + data: { + title: 'XXX_API', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', + describe: 'XXX_XXX_XXX_API', + }, + }, + { + id: 'b1', + data: { + title: 'XXX_API', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', + describe: 'XXX_XXX_XXX_API', + }, + }, + { + id: 'a3', + data: { + title: 'XXXX产品', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original', + describe: '2031030213014', + }, + }, + { + id: 'a4', + group: true, + data: [ + { + id: 'a5', + data: { + title: 'XXX数据源', + describe: 'cksadjfnf', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original', + }, + }, + { + id: 'a6', + data: { + title: 'XXX_API', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', + describe: 'XXX_XXX_XXX_API', + }, + }, + { + id: 'a7', + data: { + title: 'XXXX产品', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original', + describe: '2031030213014', + }, + }, + { + id: 'a8', + data: { + title: 'XXX数据源', + describe: 'cksadjfnf', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original', + }, + }, + { + id: 'a9', + data: { + title: 'XXX_API', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', + describe: 'XXX_XXX_XXX_API', + }, + }, + { + id: 'a10', + data: { + title: 'XXXX产品', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original', + describe: '2031030213014', + }, + }, + { + id: 'a11', + data: { + title: 'XXXX产品', + logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original', + describe: '2031030213014', + }, + }, + ], + }, +]; + +const edges = [ + { + id: 'a1-a2', + source: 'a1', + target: 'a2', + }, + { + id: 'a1-b1', + source: 'a1', + target: 'b1', + }, + { + id: 'a2-a3', + source: 'a2', + target: 'a3', + }, + { + id: 'a3-a4', + source: 'a3', + target: 'a4', + }, +]; + +const Demos = memo(() => { + const { styles } = useStyles(); + return ( +
diff --git a/src/BasicEdge/index.tsx b/src/RadiusEdge/index.tsx
similarity index 100%
rename from src/BasicEdge/index.tsx
rename to src/RadiusEdge/index.tsx
diff --git a/src/constants.tsx b/src/constants.tsx
new file mode 100644
index 0000000..1d85021
--- /dev/null
+++ b/src/constants.tsx
@@ -0,0 +1,18 @@
+export enum NodeSelect {
+ SELECT = 'SELECT',
+ DANGER = 'DANGER',
+ WARNING = 'WARNING',
+ DEFAULT = 'DEFAULT',
+}
+export interface ProFlowNode {
+ id: string;
+ group?: boolean;
+ select?: NodeSelect;
+ data: ProFlowNodeData | ProFlowNode[];
+}
+
+export interface ProFlowNodeData {
+ title: string;
+ describe: string;
+ logo: string;
+}
diff --git a/src/index.ts b/src/index.ts
index dd03157..b613f3e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,3 +7,7 @@ export { FlowStoreProvider, type FlowEditorStoreProviderProps } from './FlowStor
export * from './Input';
export { NodeField, useNodeFieldStyles } from './NodeField';
export type { ExtraAction } from './NodeField';
+export { default as ProFlow } from './ProFlow';
+export { default as ProFlowController } from './ProFlowController';
+export { default as RadiusEdge } from './RadiusEdge';
+export * from './constants';