@coding-flow/flow-design 0.0.1

package/dist/script-components/components/condition/components/condition-group/group.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Table } from "@coding-flow/flow-pc-ui";
+import { Button, Popconfirm, Space } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import { useConditionContext } from "../../hooks/use-condition-context.js";
+import { ConditionItemView } from "./condition.js";
+import { ConditionTypeView } from "./type.js";
+const Group = ()=>{
+    const { state, context } = useConditionContext();
+    const presenter = context.getPresenter().getConditionGroupPresenter();
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            backgroundColor: '#fff',
+            color: 'rgba(0,0,0,0.88)',
+            minHeight: '60px'
+        },
+        children: /*#__PURE__*/ jsx(Table, {
+            toolBarRender: ()=>[
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(PlusOutlined, {}),
+                        onClick: ()=>{
+                            presenter.addCondition();
+                        },
+                        children: "添加条件"
+                    })
+                ],
+            columns: [
+                {
+                    key: 'id',
+                    title: 'id',
+                    hidden: true,
+                    dataIndex: 'id'
+                },
+                {
+                    key: 'left',
+                    title: '左侧参数',
+                    dataIndex: 'left',
+                    render: (_, record)=>/*#__PURE__*/ jsx(ConditionItemView, {
+                            id: record.id,
+                            location: 'left',
+                            data: record.left
+                        })
+                },
+                {
+                    key: 'type',
+                    title: '条件关系',
+                    dataIndex: 'type',
+                    render: (_, record)=>/*#__PURE__*/ jsx(ConditionTypeView, {
+                            type: record.type,
+                            id: record.id
+                        })
+                },
+                {
+                    key: 'right',
+                    title: '右侧参数',
+                    dataIndex: 'right',
+                    render: (_, record)=>/*#__PURE__*/ jsx(ConditionItemView, {
+                            id: record.id,
+                            location: 'right',
+                            data: record.right
+                        })
+                },
+                {
+                    key: 'option',
+                    title: '操作',
+                    render: (text, record)=>/*#__PURE__*/ jsxs(Space, {
+                            children: [
+                                /*#__PURE__*/ jsx("a", {
+                                    onClick: ()=>{
+                                        presenter.switchCondition(record.id);
+                                    },
+                                    children: "互换"
+                                }),
+                                /*#__PURE__*/ jsx(Popconfirm, {
+                                    title: "确认要删除吗？",
+                                    onConfirm: ()=>{
+                                        presenter.removeCondition(record.id);
+                                    },
+                                    children: /*#__PURE__*/ jsx("a", {
+                                        children: "删除"
+                                    })
+                                })
+                            ]
+                        })
+                }
+            ],
+            dataSource: state.groups,
+            pagination: false
+        })
+    });
+};
+export { Group };

package/dist/script-components/components/condition/components/condition-group/index.d.ts

@@ -0,0 +1 @@
+export * from "./group";

package/dist/script-components/components/condition/components/condition-group/index.js

@@ -0,0 +1 @@
+export * from "./group.js";

package/dist/script-components/components/condition/components/condition-group/type.d.ts

@@ -0,0 +1,8 @@
+import { RelationType } from "../../typings";
+import React from "react";
+interface ConditionTypeViewProps {
+    type?: RelationType;
+    id: string;
+}
+export declare const ConditionTypeView: React.FC<ConditionTypeViewProps>;
+export {};

package/dist/script-components/components/condition/components/condition-group/type.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { relationTypeOptions } from "../../typings/index.js";
+import { Select } from "antd";
+import "react";
+import { useConditionContext } from "../../hooks/use-condition-context.js";
+const ConditionTypeView = (props)=>{
+    const type = props.type;
+    const { context } = useConditionContext();
+    const presenter = context.getPresenter().getConditionGroupPresenter();
+    const handleChangeType = (value)=>{
+        presenter.updateType(props.id, value);
+    };
+    return /*#__PURE__*/ jsx(Select, {
+        placeholder: "请选择关系",
+        options: relationTypeOptions,
+        value: type,
+        style: {
+            width: "100px"
+        },
+        onChange: handleChangeType
+    });
+};
+export { ConditionTypeView };

package/dist/script-components/components/condition/components/condition-panel.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConditionPanelProps } from "../typings";
+export declare const ConditionPanel: React.FC<ConditionPanelProps>;

package/dist/script-components/components/condition/components/condition-panel.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { RelationPanel } from "./condition-relation/index.js";
+import { Group } from "./condition-group/index.js";
+import { GroovyScriptConvertorUtil } from "@coding-flow/flow-core";
+import { SCRIPT_DEFAULT_CONDITION } from "../../../default-script.js";
+import { Button, Space } from "antd";
+import { CodeOutlined, ReloadOutlined } from "@ant-design/icons";
+import { useConditionContext } from "../hooks/use-condition-context.js";
+import { useConditionScriptConvertor } from "../hooks/use-condition-script-convertor.js";
+const ConditionPanel = (props)=>{
+    const { context } = useConditionContext();
+    const presenter = context.getPresenter();
+    useConditionScriptConvertor(props);
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    "关系",
+                    /*#__PURE__*/ jsx(RelationPanel, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    "条件",
+                    /*#__PURE__*/ jsx(Group, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Space, {
+                style: {
+                    marginTop: 8
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(CodeOutlined, {}),
+                        onClick: ()=>{
+                            props.onChange(GroovyScriptConvertorUtil.toCustomScript(props.script));
+                        },
+                        children: "高级配置"
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        icon: /*#__PURE__*/ jsx(ReloadOutlined, {}),
+                        danger: true,
+                        onClick: ()=>{
+                            presenter.clearState();
+                            props.onChange(SCRIPT_DEFAULT_CONDITION);
+                        },
+                        children: "重置脚本"
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { ConditionPanel };

package/dist/script-components/components/condition/components/condition-relation/action.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConditionRelationProps } from "../../typings";
+export declare const RelationAction: React.FC<ConditionRelationProps>;

package/dist/script-components/components/condition/components/condition-relation/action.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { PlusCircleOutlined } from "@ant-design/icons";
+import "react";
+import { Badge, Dropdown } from "antd";
+import { useDropdownMenus } from "./hooks/use-dropdown-menus.js";
+import { RelationValidate } from "./domain/relation-validate.js";
+const RelationAction = (props)=>{
+    const items = useDropdownMenus(props);
+    const relationValidate = new RelationValidate(props);
+    return /*#__PURE__*/ jsx(Dropdown, {
+        menu: {
+            items
+        },
+        children: /*#__PURE__*/ jsx(Badge, {
+            dot: relationValidate.isError(),
+            children: /*#__PURE__*/ jsx(PlusCircleOutlined, {
+                style: {
+                    cursor: 'pointer'
+                }
+            })
+        })
+    });
+};
+export { RelationAction };

package/dist/script-components/components/condition/components/condition-relation/and.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConditionRelationProps } from "../../typings";
+export declare const RelationAnd: React.FC<ConditionRelationProps>;

package/dist/script-components/components/condition/components/condition-relation/and.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Badge, Dropdown, Tag } from "antd";
+import { useDropdownMenus } from "./hooks/use-dropdown-menus.js";
+import { RelationValidate } from "./domain/relation-validate.js";
+const RelationAnd = (props)=>{
+    const items = useDropdownMenus(props);
+    const relationValidate = new RelationValidate(props);
+    return /*#__PURE__*/ jsx(Dropdown, {
+        menu: {
+            items
+        },
+        children: /*#__PURE__*/ jsx(Badge, {
+            dot: relationValidate.isError(),
+            children: /*#__PURE__*/ jsx(Tag, {
+                style: {
+                    cursor: "pointer"
+                },
+                children: props.current.label
+            })
+        })
+    });
+};
+export { RelationAnd };

package/dist/script-components/components/condition/components/condition-relation/condition.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConditionRelationProps } from "../../typings";
+export declare const RelationCondition: React.FC<ConditionRelationProps>;

package/dist/script-components/components/condition/components/condition-relation/condition.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { useDropdownMenus } from "./hooks/use-dropdown-menus.js";
+import { Badge, Dropdown, Tag } from "antd";
+import { RelationValidate } from "./domain/relation-validate.js";
+const RelationCondition = (props)=>{
+    const items = useDropdownMenus(props);
+    const relationValidate = new RelationValidate(props);
+    return /*#__PURE__*/ jsx(Dropdown, {
+        menu: {
+            items
+        },
+        children: /*#__PURE__*/ jsx(Badge, {
+            dot: relationValidate.isError(),
+            children: /*#__PURE__*/ jsx(Tag, {
+                style: {
+                    cursor: "pointer"
+                },
+                children: props.current.label
+            })
+        })
+    });
+};
+export { RelationCondition };

package/dist/script-components/components/condition/components/condition-relation/domain/menu-relation.d.ts

@@ -0,0 +1,19 @@
+import { ConditionGroup, LogicalRelation } from "../../../typings";
+import { ConditionRelationPresenter } from "../../../presenters/relation-presenter";
+export declare class MenuRelation {
+    private readonly leftRelation?;
+    private readonly current;
+    private readonly menuList;
+    private readonly groups;
+    private readonly presenter;
+    constructor(presenter: ConditionRelationPresenter, current: LogicalRelation, groups: ConditionGroup[], leftRelation?: LogicalRelation);
+    private initMenus;
+    private createOr;
+    private createCondition;
+    private createRemove;
+    private createGroup;
+    private createAnd;
+    private removeRelation;
+    private addRelation;
+    getMenus(): any[];
+}

package/dist/script-components/components/condition/components/condition-relation/domain/menu-relation.js

@@ -0,0 +1,145 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { GroupConvertor } from "../../../convertor/group.js";
+import { IdUtils } from "../../../../../../utils/index.js";
+class MenuRelation {
+    leftRelation;
+    current;
+    menuList;
+    groups;
+    presenter;
+    constructor(presenter, current, groups, leftRelation){
+        this.presenter = presenter;
+        this.leftRelation = leftRelation;
+        this.current = current;
+        this.groups = groups;
+        this.menuList = [];
+        this.initMenus();
+    }
+    initMenus() {
+        const currentType = this.current.type;
+        if ('action' === currentType) if (this.leftRelation) {
+            const leftType = this.leftRelation.type;
+            if ('and' === leftType || 'or' === leftType) {
+                this.menuList.push(this.createGroup());
+                if (this.groups.length > 0) this.menuList.push(this.createCondition());
+            }
+            if ('group' === leftType || 'condition' === leftType) {
+                this.menuList.push(this.createAnd());
+                this.menuList.push(this.createOr());
+            }
+        } else {
+            this.menuList.push(this.createGroup());
+            if (this.groups.length > 0) this.menuList.push(this.createCondition());
+        }
+        if ('and' === currentType || 'or' === currentType) {
+            this.menuList.push(this.createGroup());
+            if (this.groups.length > 0) this.menuList.push(this.createCondition());
+        }
+        if ('group' === currentType || 'condition' === currentType) {
+            this.menuList.push(this.createAnd());
+            this.menuList.push(this.createOr());
+        }
+        if (this.current.id) this.menuList.push(this.createRemove());
+    }
+    createOr() {
+        return {
+            key: 'or',
+            label: /*#__PURE__*/ jsx("a", {
+                children: "或者"
+            }),
+            onClick: ()=>{
+                this.addRelation({
+                    type: 'or',
+                    id: IdUtils.generateId(),
+                    label: '或者'
+                });
+            }
+        };
+    }
+    createCondition() {
+        const children = this.groups.map((item)=>{
+            const convert = new GroupConvertor(item);
+            return {
+                label: convert.getLabel(),
+                value: item.id,
+                key: item.id,
+                onClick: ()=>{
+                    this.addRelation({
+                        id: IdUtils.generateId(),
+                        type: 'condition',
+                        label: convert.getLabel(),
+                        groupId: item.id
+                    });
+                }
+            };
+        });
+        return {
+            key: 'condition',
+            label: /*#__PURE__*/ jsx("a", {
+                children: "条件"
+            }),
+            children: children
+        };
+    }
+    createRemove() {
+        return {
+            key: 'remove',
+            danger: true,
+            label: /*#__PURE__*/ jsx("a", {
+                children: "删除"
+            }),
+            onClick: ()=>{
+                this.removeRelation();
+            }
+        };
+    }
+    createGroup() {
+        return {
+            key: 'group',
+            label: /*#__PURE__*/ jsx("a", {
+                children: "括号"
+            }),
+            onClick: ()=>{
+                this.addRelation({
+                    type: 'group',
+                    id: IdUtils.generateId(),
+                    label: '括号',
+                    children: [
+                        {
+                            id: IdUtils.generateId(),
+                            type: 'action'
+                        }
+                    ]
+                });
+            }
+        };
+    }
+    createAnd() {
+        return {
+            key: 'and',
+            label: /*#__PURE__*/ jsx("a", {
+                children: "并且"
+            }),
+            onClick: ()=>{
+                this.addRelation({
+                    type: 'and',
+                    id: IdUtils.generateId(),
+                    label: '并且'
+                });
+            }
+        };
+    }
+    removeRelation = ()=>{
+        const currentId = this.current.id;
+        if (currentId) this.presenter.removeRelation(currentId);
+    };
+    addRelation = (target)=>{
+        const currentId = this.current.id;
+        this.presenter.addRelation(target, currentId);
+    };
+    getMenus() {
+        return this.menuList;
+    }
+}
+export { MenuRelation };

package/dist/script-components/components/condition/components/condition-relation/domain/relation-validate.d.ts

@@ -0,0 +1,15 @@
+import { ConditionRelationProps, LogicalRelation } from "../../../typings";
+export declare class RelationValidate {
+    private readonly leftRelation?;
+    private readonly current;
+    private readonly rightRelation?;
+    constructor(props: ConditionRelationProps);
+    isError(): boolean;
+}
+export declare class RelationListValidate {
+    private readonly relations;
+    private error;
+    constructor(relations: LogicalRelation[]);
+    isError(): boolean;
+    private fetchRelations;
+}

package/dist/script-components/components/condition/components/condition-relation/domain/relation-validate.js

@@ -0,0 +1,60 @@
+class RelationValidate {
+    leftRelation;
+    current;
+    rightRelation;
+    constructor(props){
+        this.leftRelation = props.leftRelation;
+        this.current = props.current;
+        this.rightRelation = props.rightRelation;
+    }
+    isError() {
+        const currentType = this.current.type;
+        const currentId = this.current.id;
+        if (this.leftRelation) {
+            const leftType = this.leftRelation.type;
+            if ('and' === leftType || 'or' === leftType) {
+                if ('and' === currentType || 'or' === currentType) return true;
+            }
+            if ('group' === leftType || 'condition' === leftType) {
+                if ('group' === currentType || 'condition' === currentType) return true;
+            }
+        }
+        if (this.rightRelation) {
+            const rightType = this.rightRelation.type;
+            if ('action' === rightType) {
+                if ('and' === currentType || 'or' === currentType) return true;
+            }
+            return false;
+        }
+        if ('and' === currentType || 'or' === currentType) return true;
+        if ('action' === currentType && currentId) return true;
+        return false;
+    }
+}
+class RelationListValidate {
+    relations;
+    error = false;
+    constructor(relations){
+        this.relations = relations;
+    }
+    isError() {
+        this.fetchRelations(this.relations);
+        return this.error;
+    }
+    fetchRelations(relations) {
+        const length = relations.length;
+        for(let i = 0; i < length; i++){
+            const left = i - 1 < 0 ? void 0 : relations[i - 1];
+            const right = i + 1 > length ? void 0 : relations[i + 1];
+            const current = relations[i];
+            const validate = new RelationValidate({
+                leftRelation: left,
+                current,
+                rightRelation: right
+            });
+            if (validate.isError()) this.error = true;
+            if (current.children) this.fetchRelations(current.children);
+        }
+    }
+}
+export { RelationListValidate, RelationValidate };

package/dist/script-components/components/condition/components/condition-relation/group.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConditionRelationProps } from "../../typings";
+export declare const RelationGroup: React.FC<ConditionRelationProps>;

package/dist/script-components/components/condition/components/condition-relation/group.js

@@ -0,0 +1,44 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Dropdown, Tag } from "antd";
+import "react";
+import { useDropdownMenus } from "./hooks/use-dropdown-menus.js";
+import { RelationRender } from "./render.js";
+import { RelationValidate } from "./domain/relation-validate.js";
+const RelationGroup = (props)=>{
+    const items = useDropdownMenus(props);
+    const relationValidate = new RelationValidate(props);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Badge, {
+                dot: relationValidate.isError(),
+                children: /*#__PURE__*/ jsx(Dropdown, {
+                    menu: {
+                        items
+                    },
+                    children: /*#__PURE__*/ jsx(Tag, {
+                        style: {
+                            cursor: "pointer"
+                        },
+                        children: "（"
+                    })
+                })
+            }),
+            RelationRender.getInstance().renderList(props.current.children || []),
+            /*#__PURE__*/ jsx(Badge, {
+                dot: relationValidate.isError(),
+                children: /*#__PURE__*/ jsx(Dropdown, {
+                    menu: {
+                        items
+                    },
+                    children: /*#__PURE__*/ jsx(Tag, {
+                        style: {
+                            cursor: "pointer"
+                        },
+                        children: "）"
+                    })
+                })
+            })
+        ]
+    });
+};
+export { RelationGroup };

package/dist/script-components/components/condition/components/condition-relation/hooks/use-dropdown-menus.d.ts

@@ -0,0 +1,2 @@
+import { ConditionRelationProps } from "../../../typings";
+export declare const useDropdownMenus: (props: ConditionRelationProps) => any[];

package/dist/script-components/components/condition/components/condition-relation/hooks/use-dropdown-menus.js

@@ -0,0 +1,15 @@
+import react from "react";
+import { useConditionContext } from "../../../hooks/use-condition-context.js";
+import { MenuRelation } from "../domain/menu-relation.js";
+const useDropdownMenus = (props)=>{
+    const { state, context } = useConditionContext();
+    const presenter = context.getPresenter().getConditionRelationPresenter();
+    return react.useMemo(()=>{
+        const groups = state.groups;
+        const menuRelation = new MenuRelation(presenter, props.current, groups, props.leftRelation);
+        return menuRelation.getMenus();
+    }, [
+        state.groups
+    ]);
+};
+export { useDropdownMenus };

package/dist/script-components/components/condition/components/condition-relation/index.d.ts

@@ -0,0 +1 @@
+export declare const RelationPanel: () => import("react/jsx-runtime").JSX.Element;

package/dist/script-components/components/condition/components/condition-relation/index.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useConditionContext } from "../../hooks/use-condition-context.js";
+import react from "react";
+import { RelationRender } from "./render.js";
+const RelationPanel = ()=>{
+    const { state } = useConditionContext();
+    const relations = react.useMemo(()=>{
+        const list = [
+            ...state.relations
+        ];
+        list.push({
+            type: 'action'
+        });
+        return list;
+    }, [
+        state.relations
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            padding: '4px 11px',
+            border: '1px solid #d9d9d9',
+            borderRadius: '6px',
+            backgroundColor: '#fff',
+            color: 'rgba(0,0,0,0.88)',
+            minHeight: '60px',
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '0 16px',
+            alignItems: 'center'
+        },
+        children: RelationRender.getInstance().renderList(relations)
+    });
+};
+export { RelationPanel };

package/dist/script-components/components/condition/components/condition-relation/or.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConditionRelationProps } from "../../typings";
+export declare const RelationOr: React.FC<ConditionRelationProps>;

package/dist/script-components/components/condition/components/condition-relation/or.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Badge, Dropdown, Tag } from "antd";
+import { useDropdownMenus } from "./hooks/use-dropdown-menus.js";
+import { RelationValidate } from "./domain/relation-validate.js";
+const RelationOr = (props)=>{
+    const items = useDropdownMenus(props);
+    const relationValidate = new RelationValidate(props);
+    return /*#__PURE__*/ jsx(Dropdown, {
+        menu: {
+            items
+        },
+        children: /*#__PURE__*/ jsx(Badge, {
+            dot: relationValidate.isError(),
+            children: /*#__PURE__*/ jsx(Tag, {
+                style: {
+                    cursor: "pointer"
+                },
+                children: props.current.label
+            })
+        })
+    });
+};
+export { RelationOr };