@coding-flow/flow-design 0.0.1

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

@@ -0,0 +1,24 @@
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+import { initStateData } from "./typings/index.js";
+import { original } from "immer";
+const conditionSlice = createSlice({
+    name: 'condition',
+    initialState: {
+        ...initStateData
+    },
+    reducers: {
+        updateState: (state, action)=>{
+            if ('function' == typeof action.payload) {
+                const currentState = original(state);
+                Object.assign(state, action.payload(currentState));
+            } else Object.assign(state, action.payload);
+        }
+    }
+});
+const { updateState } = conditionSlice.actions;
+const conditionStore = configureStore({
+    reducer: {
+        condition: conditionSlice.reducer
+    }
+});
+export { conditionSlice, conditionStore, updateState };

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

@@ -0,0 +1,79 @@
+import { DataType } from "@coding-flow/flow-types";
+import { GroovyVariableMapping } from "../../../typings";
+/**
+ *  条件类型
+ */
+export type RelationType = 'equal' | 'greater_than' | 'greater_equal' | 'less_than' | 'less_equal' | 'not_equal' | 'unknow';
+/**
+ *  逻辑关系
+ */
+export type LogicalType = 'and' | 'or' | 'group' | 'condition' | 'action';
+/**
+ *  条件状态
+ */
+export interface ConditionState {
+    variables: GroovyVariableMapping[];
+    groups: ConditionGroup[];
+    relations: LogicalRelation[];
+}
+export interface ConditionPanelProps {
+    script: string;
+    onChange: (value: string) => void;
+}
+/**
+ *  初始化状态数据
+ */
+export declare const initStateData: ConditionState;
+/**
+ *  条件组件数据
+ */
+export interface ConditionViewProps {
+    variables: GroovyVariableMapping[];
+    script: string;
+    onChange: (value: string) => void;
+}
+/**
+ *  条件接口
+ */
+export interface ConditionApi {
+}
+/**
+ *  条件关系
+ */
+export interface LogicalRelation {
+    id?: string;
+    label?: string;
+    type: LogicalType;
+    groupId?: string;
+    children?: LogicalRelation[];
+}
+export interface ConditionRelationProps {
+    leftRelation?: LogicalRelation;
+    current: LogicalRelation;
+    rightRelation?: LogicalRelation;
+}
+/**
+ *  条件关系
+ */
+export declare const relationTypeOptions: {
+    label: string;
+    value: string;
+}[];
+/**
+ * 条件参数
+ */
+export interface Condition {
+    type: 'input' | 'variable';
+    label: string;
+    value: string;
+    dataType: DataType;
+}
+/**
+ *  条件组
+ */
+export interface ConditionGroup {
+    id: string;
+    left?: Condition;
+    right?: Condition;
+    type?: RelationType;
+}

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

@@ -0,0 +1,32 @@
+const initStateData = {
+    variables: [],
+    groups: [],
+    relations: []
+};
+const relationTypeOptions = [
+    {
+        label: '等于',
+        value: 'equal'
+    },
+    {
+        label: '大于等于',
+        value: 'greater_equal'
+    },
+    {
+        label: '大于',
+        value: 'greater_than'
+    },
+    {
+        label: '小于等于',
+        value: 'less_equal'
+    },
+    {
+        label: '小于',
+        value: 'less_than'
+    },
+    {
+        label: '不等于',
+        value: 'not_equal'
+    }
+];
+export { initStateData, relationTypeOptions };

package/dist/script-components/components/form-data/components/list.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FlowForm } from "@coding-flow/flow-types";
+interface FormDataListProps {
+    form: FlowForm;
+}
+export declare const FormDataList: React.FC<FormDataListProps>;
+export {};

package/dist/script-components/components/form-data/components/list.js

@@ -0,0 +1,18 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import { Table } from "@coding-flow/flow-pc-ui";
+import { useFormDataContext } from "../hooks/use-form-data-context.js";
+const FormDataList = (props)=>{
+    const { state, context } = useFormDataContext();
+    const presenter = context.getPresenter();
+    return /*#__PURE__*/ jsx(Table, {
+        title: ()=>/*#__PURE__*/ jsx(Fragment, {
+                children: presenter.getFormTitle(props.form)
+            }),
+        rowKey: "code",
+        columns: presenter.getColumns(props.form),
+        dataSource: presenter.getDatasource(props.form, state.formData?.dataBody),
+        pagination: false
+    });
+};
+export { FormDataList };

package/dist/script-components/components/form-data/components/value.d.ts

@@ -0,0 +1,7 @@
+import { FormDataFiled } from "../types";
+import React from "react";
+interface FormValueProps {
+    field: FormDataFiled;
+}
+export declare const FormValue: React.FC<FormValueProps>;
+export {};

package/dist/script-components/components/form-data/components/value.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { Input } from "antd";
+import { useFormDataContext } from "../hooks/use-form-data-context.js";
+const FormValue = (props)=>{
+    const field = props.field;
+    const { context } = useFormDataContext();
+    const presenter = context.getPresenter();
+    const value = field.value || void 0;
+    const [input, setInput] = react.useState();
+    react.useEffect(()=>{
+        setInput(value);
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ jsx(Input, {
+        placeholder: "请输入内容",
+        value: input,
+        onBlur: (event)=>{
+            const value = event.target.value;
+            presenter.updateFieldValue(field, value);
+        },
+        onChange: (event)=>{
+            setInput(event.target.value);
+        }
+    });
+};
+export { FormValue };

package/dist/script-components/components/form-data/context/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { FormDataPresenter } from "../presenters";
+import { FormDataContentProps, FormDataState } from "../types";
+export declare class FormDataContextScope {
+    private readonly presenter;
+    private readonly props;
+    constructor(presenter: FormDataPresenter, props: FormDataContentProps);
+    syncState(state: FormDataState): void;
+    getPresenter(): FormDataPresenter;
+    initState(): void;
+}
+export declare const FormDataContext: React.Context<FormDataContextScope | undefined>;

package/dist/script-components/components/form-data/context/index.js

@@ -0,0 +1,20 @@
+import react from "react";
+class FormDataContextScope {
+    presenter;
+    props;
+    constructor(presenter, props){
+        this.presenter = presenter;
+        this.props = props;
+    }
+    syncState(state) {
+        this.presenter.syncState(state);
+    }
+    getPresenter() {
+        return this.presenter;
+    }
+    initState() {
+        this.presenter.initState();
+    }
+}
+const FormDataContext = react.createContext(void 0);
+export { FormDataContext, FormDataContextScope };

package/dist/script-components/components/form-data/hooks/use-form-data-context.d.ts

@@ -0,0 +1,10 @@
+import { FormDataContextScope } from "../context";
+import { FormDataContentProps } from "../types";
+export declare const useFormDataContext: () => {
+    state: import("../types").FormDataState;
+    context: FormDataContextScope;
+};
+export declare const createFormDataContext: (props: FormDataContentProps) => {
+    state: import("../types").FormDataState;
+    context: FormDataContextScope;
+};

package/dist/script-components/components/form-data/hooks/use-form-data-context.js

@@ -0,0 +1,37 @@
+import react, { useContext } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { FormDataPresenter } from "../presenters/form-data-presenter.js";
+import { updateState } from "../store.js";
+import { FormDataContext, FormDataContextScope } from "../context/index.js";
+const useFormDataContext = ()=>{
+    const context = useContext(FormDataContext);
+    const state = useSelector((state)=>state.formData);
+    if (!context) throw new Error("ConditionContext must be used within useContext");
+    return {
+        state,
+        context
+    };
+};
+const createFormDataContext = (props)=>{
+    const dispatch = useDispatch();
+    const state = useSelector((state)=>state.formData);
+    const ref = react.useRef(void 0);
+    if (!ref.current) {
+        const presenter = new FormDataPresenter(props, state, (prevState)=>{
+            dispatch(updateState(prevState));
+            return prevState;
+        });
+        ref.current = new FormDataContextScope(presenter, props);
+        ref.current.initState();
+    }
+    react.useEffect(()=>{
+        if (ref.current) ref.current.syncState(state);
+    }, [
+        state
+    ]);
+    return {
+        state,
+        context: ref.current
+    };
+};
+export { createFormDataContext, useFormDataContext };

package/dist/script-components/components/form-data/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FlowForm } from "@coding-flow/flow-types";
+interface FormDataViewProps {
+    form?: FlowForm;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const FormDataView: React.FC<FormDataViewProps>;
+export {};

package/dist/script-components/components/form-data/index.js

@@ -0,0 +1,44 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import react from "react";
+import { FormDataList } from "./components/list.js";
+import { Provider } from "react-redux";
+import { formDataStore } from "./store.js";
+import { FormDataContext } from "./context/index.js";
+import { createFormDataContext, useFormDataContext } from "./hooks/use-form-data-context.js";
+const FormDataContent = (props)=>{
+    const { state, context } = useFormDataContext();
+    const presenter = context.getPresenter();
+    react.useEffect(()=>{
+        presenter.updateFormData(state);
+    }, [
+        state
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(FormDataList, {
+            form: props.form
+        })
+    });
+};
+const FormDataContextContent = (props)=>{
+    const { context } = createFormDataContext(props);
+    return /*#__PURE__*/ jsx(FormDataContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(FormDataContent, {
+            ...props
+        })
+    });
+};
+const FormDataReduxContent = (props)=>/*#__PURE__*/ jsx(Provider, {
+        store: formDataStore,
+        children: /*#__PURE__*/ jsx(FormDataContextContent, {
+            ...props
+        })
+    });
+const FormDataView = (props)=>{
+    const form = props.form;
+    if (form) return /*#__PURE__*/ jsx(FormDataReduxContent, {
+        ...props,
+        form: form
+    });
+};
+export { FormDataView };

package/dist/script-components/components/form-data/presenters/flow-form-presenter.d.ts

@@ -0,0 +1,29 @@
+import { FlowForm } from "@coding-flow/flow-types";
+import { FormDataFiled } from "../types";
+export declare class FlowFormPresenter {
+    private readonly form;
+    constructor(form: FlowForm);
+    getTabs(): {
+        label: string;
+        key: string;
+        children: import("react/jsx-runtime").JSX.Element;
+    }[];
+    getDatasource(): FormDataFiled[];
+    getColumns(): ({
+        key: string;
+        title: string;
+        dataIndex: string;
+        render?: undefined;
+    } | {
+        key: string;
+        title: string;
+        dataIndex: string;
+        render: (value: any) => "必填" | "非必填";
+    } | {
+        key: string;
+        title: string;
+        dataIndex: string;
+        render: (value: any, record: any) => import("react/jsx-runtime").JSX.Element;
+    })[];
+    hasSubForms(): boolean;
+}

package/dist/script-components/components/form-data/presenters/flow-form-presenter.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { FormDataList } from "../components/list.js";
+import { FormValue } from "../components/value.js";
+class FlowFormPresenter {
+    form;
+    constructor(form){
+        this.form = form;
+    }
+    getTabs() {
+        const tabs = [];
+        for (const subForm of this.form.subForms)tabs.push({
+            label: subForm.name,
+            key: subForm.code,
+            children: /*#__PURE__*/ jsx(FormDataList, {
+                form: subForm
+            })
+        });
+        return tabs;
+    }
+    getDatasource() {
+        const columns = [];
+        for (const field of this.form.fields)columns.push({
+            code: this.form.code + '.' + field.code,
+            title: field.name,
+            required: field.required,
+            field: field,
+            form: this.form
+        });
+        return columns;
+    }
+    getColumns() {
+        const columns = [];
+        columns.push({
+            key: 'code',
+            title: '字段',
+            dataIndex: 'code'
+        });
+        columns.push({
+            key: 'title',
+            title: '名称',
+            dataIndex: 'title'
+        });
+        columns.push({
+            key: 'required',
+            title: '必填',
+            dataIndex: 'required',
+            render: (value)=>value ? '必填' : '非必填'
+        });
+        columns.push({
+            key: 'value',
+            title: '字段值',
+            dataIndex: 'value',
+            render: (value, record)=>/*#__PURE__*/ jsx(FormValue, {
+                    field: record
+                })
+        });
+        return columns;
+    }
+    hasSubForms() {
+        return this.form.subForms && this.form.subForms.length > 0;
+    }
+}
+export { FlowFormPresenter };

package/dist/script-components/components/form-data/presenters/form-data-presenter.d.ts

@@ -0,0 +1,35 @@
+import { Dispatch } from "@coding-flow/flow-core";
+import { DataBody, FormDataContentProps, FormDataFiled, FormDataState } from "../types";
+import { FlowForm } from "@coding-flow/flow-types";
+export declare class FormDataPresenter {
+    private state;
+    private readonly props;
+    private readonly form;
+    private readonly dispatch;
+    private readonly flowFormPresenter;
+    constructor(props: FormDataContentProps, state: FormDataState, dispatch: Dispatch<FormDataState>);
+    initState(): void;
+    private getFormInitData;
+    private getFormItemData;
+    syncState(state: FormDataState): void;
+    updateFieldValue(field: FormDataFiled, value: string): void;
+    getFormTitle(form: FlowForm): string;
+    getColumns(form: FlowForm): ({
+        key: string;
+        title: string;
+        dataIndex: string;
+        render?: undefined;
+    } | {
+        key: string;
+        title: string;
+        dataIndex: string;
+        render: (value: any) => "必填" | "非必填";
+    } | {
+        key: string;
+        title: string;
+        dataIndex: string;
+        render: (value: any, record: any) => import("react/jsx-runtime").JSX.Element;
+    })[];
+    getDatasource(form: FlowForm, dataBody?: DataBody): FormDataFiled[];
+    updateFormData(state: FormDataState): void;
+}

package/dist/script-components/components/form-data/presenters/form-data-presenter.js

@@ -0,0 +1,109 @@
+import { FlowFormPresenter } from "./flow-form-presenter.js";
+class FormDataPresenter {
+    state;
+    props;
+    form;
+    dispatch;
+    flowFormPresenter;
+    constructor(props, state, dispatch){
+        this.props = props;
+        this.form = props.form;
+        this.state = state;
+        this.dispatch = dispatch;
+        this.flowFormPresenter = new FlowFormPresenter(props.form);
+    }
+    initState() {
+        const value = this.props.value || '';
+        if (value) {
+            const data = JSON.parse(value);
+            this.dispatch((prevState)=>({
+                    ...prevState,
+                    formData: data
+                }));
+        } else this.dispatch((prevState)=>{
+            const data = this.getFormInitData();
+            return {
+                ...prevState,
+                formData: data
+            };
+        });
+    }
+    getFormInitData(state) {
+        const dataBody = state?.formData?.dataBody;
+        const mainData = this.getFormItemData(this.form, dataBody);
+        return {
+            dataBody: mainData
+        };
+    }
+    getFormItemData(form, value) {
+        const formCode = form.code;
+        let dataBody = {
+            formCode
+        };
+        let data = {};
+        for (const field of form.fields){
+            const key = field.code;
+            data[key] = value?.data[key] || '';
+        }
+        dataBody['data'] = data;
+        return dataBody;
+    }
+    syncState(state) {
+        this.state = state;
+    }
+    updateFieldValue(field, value) {
+        this.dispatch((prevState)=>{
+            if (prevState.formData) {
+                const dataBody = prevState.formData?.dataBody;
+                return {
+                    ...prevState,
+                    formData: {
+                        ...prevState.formData,
+                        dataBody: {
+                            ...prevState.formData?.dataBody,
+                            data: {
+                                ...dataBody.data,
+                                [field.code]: value
+                            }
+                        }
+                    }
+                };
+            }
+            return {
+                ...prevState
+            };
+        });
+    }
+    getFormTitle(form) {
+        return form.name;
+    }
+    getColumns(form) {
+        const flowFormPresenter = new FlowFormPresenter(form);
+        return flowFormPresenter.getColumns();
+    }
+    getDatasource(form, dataBody) {
+        if (!dataBody) return [];
+        {
+            const columns = [];
+            for (const field of form.fields){
+                const key = field.code;
+                columns.push({
+                    code: key,
+                    title: field.name,
+                    required: field.required,
+                    field: field,
+                    form: this.form,
+                    value: dataBody.data[key]
+                });
+            }
+            return columns;
+        }
+    }
+    updateFormData(state) {
+        if (state.formData) {
+            const data = JSON.stringify(state.formData);
+            this.props.onChange?.(data);
+        }
+    }
+}
+export { FormDataPresenter };

package/dist/script-components/components/form-data/presenters/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./flow-form-presenter";
+export * from "./form-data-presenter";

package/dist/script-components/components/form-data/presenters/index.js

@@ -0,0 +1,2 @@
+export * from "./flow-form-presenter.js";
+export * from "./form-data-presenter.js";

package/dist/script-components/components/form-data/store.d.ts

@@ -0,0 +1,15 @@
+import { PayloadAction } from '@reduxjs/toolkit';
+import { FormDataState } from "./types";
+export type FormDataStoreAction = {
+    updateState: (state: FormDataState, action: PayloadAction<Partial<FormDataState> | ((prev: FormDataState) => Partial<FormDataState>)>) => void;
+};
+export declare const formDataSlice: import("@reduxjs/toolkit").Slice<FormDataState, FormDataStoreAction, "formData", "formData", {}>;
+export declare const updateState: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<FormDataState> | ((prev: FormDataState) => Partial<FormDataState>), "formData/updateState">;
+export declare const formDataStore: import("@reduxjs/toolkit").EnhancedStore<{
+    formData: FormDataState;
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        formData: FormDataState;
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
+export type FormDataReduxState = ReturnType<typeof formDataStore.getState>;

package/dist/script-components/components/form-data/store.js

@@ -0,0 +1,21 @@
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+import { original } from "immer";
+const formDataSlice = createSlice({
+    name: 'formData',
+    initialState: {},
+    reducers: {
+        updateState: (state, action)=>{
+            if ('function' == typeof action.payload) {
+                const currentState = original(state);
+                Object.assign(state, action.payload(currentState));
+            } else Object.assign(state, action.payload);
+        }
+    }
+});
+const { updateState } = formDataSlice.actions;
+const formDataStore = configureStore({
+    reducer: {
+        formData: formDataSlice.reducer
+    }
+});
+export { formDataSlice, formDataStore, updateState };

package/dist/script-components/components/form-data/types.d.ts

@@ -0,0 +1,24 @@
+import { FlowForm, FormField } from "@coding-flow/flow-types";
+export interface FormDataContentProps {
+    form: FlowForm;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export interface FormDataFiled {
+    code: string;
+    title: string;
+    required: boolean;
+    value?: string;
+    field: FormField;
+    form: FlowForm;
+}
+export interface DataBody {
+    formCode: string;
+    data: Record<string, any>;
+}
+export interface FormData {
+    dataBody: DataBody;
+}
+export interface FormDataState {
+    formData?: FormData;
+}