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 ( +
+ +
+ ); +}); + +export default Demos; diff --git a/src/RadiusEdge/index.md b/src/RadiusEdge/index.md new file mode 100644 index 0000000..e33c88e --- /dev/null +++ b/src/RadiusEdge/index.md @@ -0,0 +1,9 @@ +--- +group: 线段组件 +title: RadiusEdge 圆角线段 +description: +--- + +## 圆角线段 + + 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';