@coding-form/form-engine 0.0.1

package/dist/instance/control.js

@@ -0,0 +1,40 @@
+class FormControl {
+    formCode;
+    proxyTarget;
+    constructor(formCode, target){
+        this.formCode = formCode;
+        this.proxyTarget = target;
+    }
+    getFormCode() {
+        return this.formCode;
+    }
+    getProxyTarget() {
+        return this.proxyTarget;
+    }
+    getFieldValue(name) {
+        return this.proxyTarget.getFieldValue(name);
+    }
+    getFieldsValue() {
+        return this.proxyTarget.getFieldsValue();
+    }
+    resetFields(nameList) {
+        this.proxyTarget.resetFields(nameList);
+    }
+    setFieldsValue(values) {
+        this.proxyTarget.setFieldsValue(values);
+    }
+    setFieldValue(name, value) {
+        this.proxyTarget.setFieldValue(name, value);
+    }
+    submit() {
+        this.proxyTarget.submit();
+    }
+    validateFields(nameList) {
+        return new Promise((resolve, reject)=>{
+            this.proxyTarget.validateFields(nameList).then((values)=>{
+                resolve(values);
+            }).catch(reject);
+        });
+    }
+}
+export { FormControl };

package/dist/instance/index.d.ts

@@ -0,0 +1,24 @@
+import { FormMeta } from "../types";
+import { FormControl } from "./control";
+import { FormPresenter } from "../presenters";
+export declare class FormInstance {
+    private readonly instanceList;
+    private readonly meta;
+    private presenter;
+    constructor(meta: FormMeta);
+    private createInstance;
+    setPresenter(presenter: FormPresenter): void;
+    private initInstanceList;
+    getFormControl(formCode?: string): FormControl | undefined;
+    getProxyTarget(formCode?: string): any;
+    getFieldValue(name: string, formCode?: string): void;
+    getFieldsValue(formCode?: string): any;
+    resetFields(nameList?: string[], formCode?: string): void;
+    setFieldsValue(values: any, formCode?: string): void;
+    setFieldValue(name: string, value: any, formCode?: string): void;
+    submit(formCode?: string): void;
+    validateFields(nameList?: string[], formCode?: string): Promise<any>;
+    hiddenFields(hidden: boolean, nameList: string[] | string, formCode?: string): void;
+    requiredFields(required: boolean, nameList: string[] | string, formCode?: string): void;
+    refreshFields(nameList: string[] | string, formCode?: string): void;
+}

package/dist/instance/index.js

@@ -0,0 +1,72 @@
+import { FormRegistry } from "../register/index.js";
+import { FormControl } from "./control.js";
+class FormInstance {
+    instanceList;
+    meta;
+    presenter;
+    constructor(meta){
+        this.meta = meta;
+        this.instanceList = [];
+        this.initInstanceList();
+    }
+    createInstance(formCode) {
+        const form = FormRegistry.getInstance().getFormInstance()?.();
+        if (!form) throw new Error('Form Instance must register.');
+        return new FormControl(formCode, form);
+    }
+    setPresenter(presenter) {
+        this.presenter = presenter;
+    }
+    initInstanceList() {
+        const formList = [];
+        formList.push(this.meta);
+        const subFormList = this.meta.subForms || [];
+        for (const subForm of subFormList)formList.push(subForm);
+        for (const subForm of formList)this.instanceList.push(this.createInstance(subForm.code));
+    }
+    getFormControl(formCode) {
+        if (formCode) {
+            for (const item of this.instanceList)if (item.getFormCode() === formCode) return item;
+        } else if (this.instanceList.length > 0) return this.instanceList[0];
+    }
+    getProxyTarget(formCode) {
+        return this.getFormControl(formCode)?.getProxyTarget();
+    }
+    getFieldValue(name, formCode) {
+        this.getFormControl(formCode)?.getFieldValue(name);
+    }
+    getFieldsValue(formCode) {
+        return this.getFormControl(formCode)?.getFieldsValue();
+    }
+    resetFields(nameList, formCode) {
+        this.getFormControl(formCode)?.resetFields(nameList);
+    }
+    setFieldsValue(values, formCode) {
+        this.getFormControl(formCode)?.setFieldsValue(values);
+    }
+    setFieldValue(name, value, formCode) {
+        this.getFormControl(formCode)?.setFieldValue(name, value);
+    }
+    submit(formCode) {
+        this.getFormControl(formCode)?.submit();
+    }
+    validateFields(nameList, formCode) {
+        const formControl = this.getFormControl(formCode);
+        if (formControl) return formControl.validateFields(nameList);
+        return new Promise((resolve, reject)=>{
+            resolve({
+                message: 'no found form instance.'
+            });
+        });
+    }
+    hiddenFields(hidden, nameList, formCode) {
+        this.presenter?.hiddenFields(hidden, nameList, formCode);
+    }
+    requiredFields(required, nameList, formCode) {
+        this.presenter?.requiredFields(required, nameList, formCode);
+    }
+    refreshFields(nameList, formCode) {
+        this.presenter?.refreshFields(nameList, formCode);
+    }
+}
+export { FormInstance };

package/dist/layout/default-layout.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FormLayoutProps } from "../types";
+type DefaultLayoutProps = Omit<FormLayoutProps, 'layout'>;
+export declare const DefaultLayout: React.FC<DefaultLayoutProps>;
+export {};

package/dist/layout/default-layout.js

@@ -0,0 +1,10 @@
+import react from "react";
+import { FormItemFactory } from "../factory/index.js";
+const DefaultLayout = (props)=>{
+    const fields = props.fields;
+    const formCode = props.formCode;
+    const review = props.review;
+    const context = props.context;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, fields.map((field)=>FormItemFactory.getInstance().render(formCode, field, 'vertical', review, context)));
+};
+export { DefaultLayout };

package/dist/layout/index.d.ts

@@ -0,0 +1,8 @@
+import { FormField, FormLayout } from "../types";
+import { FormContextScope } from "../context";
+export declare class LayoutContext {
+    private readonly layouts;
+    constructor(layouts: FormLayout[]);
+    getLayouts(formCode: string): FormLayout[];
+    render(formCode: string, fields: FormField[], review: boolean, context: FormContextScope): import("react/jsx-runtime").JSX.Element;
+}

package/dist/layout/index.js

@@ -0,0 +1,35 @@
+import react from "react";
+import { LayoutRegister } from "../register/layout.js";
+import { DefaultLayout } from "./default-layout.js";
+class LayoutContext {
+    layouts;
+    constructor(layouts){
+        this.layouts = layouts;
+    }
+    getLayouts(formCode) {
+        const layouts = [];
+        for (const layout of this.layouts)if (layout.formCode === formCode) layouts.push(layout);
+        return layouts;
+    }
+    render(formCode, fields, review, context) {
+        const layouts = this.getLayouts(formCode);
+        if (layouts && layouts.length > 0) return /*#__PURE__*/ react.createElement(react.Fragment, null, layouts.map((layout)=>{
+            const LayoutComponent = LayoutRegister.getInstance().getLayoutComponent(layout.type);
+            console.log('LayoutComponent', layout);
+            if (LayoutComponent) return /*#__PURE__*/ react.createElement(LayoutComponent, {
+                layout: layout,
+                fields: fields,
+                review: review,
+                context: context,
+                formCode: formCode
+            });
+        }));
+        return /*#__PURE__*/ react.createElement(DefaultLayout, {
+            fields: fields,
+            review: review,
+            context: context,
+            formCode: formCode
+        });
+    }
+}
+export { LayoutContext };

package/dist/presenters/form-presenter.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, FormMeta, FormState } from "../types";
+export declare class FormPresenter {
+    private state;
+    private readonly dispatch;
+    constructor(state: FormState, dispatch: Dispatch<FormState>);
+    syncState(state: FormState): void;
+    initialState(meta: FormMeta): void;
+    hiddenFields(hidden: boolean, nameList: string[] | string, formCode?: string): void;
+    refreshFields(nameList: string[] | string, formCode?: string): void;
+    requiredFields(required: boolean, nameList: string[] | string, formCode?: string): void;
+    private hiddenMapFields;
+    private refreshMapFields;
+    private requiredMapFields;
+}

package/dist/presenters/form-presenter.js

@@ -0,0 +1,124 @@
+class FormPresenter {
+    state;
+    dispatch;
+    constructor(state, dispatch){
+        this.state = state;
+        this.dispatch = dispatch;
+    }
+    syncState(state) {
+        this.state = state;
+    }
+    initialState(meta) {
+        this.state = meta;
+        this.dispatch(meta);
+    }
+    hiddenFields(hidden, nameList, formCode) {
+        this.dispatch((prevState)=>{
+            const subFormList = prevState.subForms || [];
+            return {
+                ...prevState,
+                fields: prevState.fields.map((item)=>{
+                    if (!formCode) return this.hiddenMapFields(hidden, item, nameList);
+                    if (formCode === prevState.code) return this.hiddenMapFields(hidden, item, nameList);
+                    return item;
+                }),
+                subForms: subFormList.map((item)=>{
+                    if (formCode) {
+                        if (formCode === item.code) return {
+                            ...item,
+                            fields: item.fields.map((item)=>this.hiddenMapFields(hidden, item, nameList))
+                        };
+                    }
+                    return item;
+                })
+            };
+        });
+    }
+    refreshFields(nameList, formCode) {
+        this.dispatch((prevState)=>{
+            const subFormList = prevState.subForms || [];
+            return {
+                ...prevState,
+                fields: prevState.fields.map((item)=>{
+                    if (!formCode) return this.refreshMapFields(item, nameList);
+                    if (formCode === prevState.code) return this.refreshMapFields(item, nameList);
+                    return item;
+                }),
+                subForms: subFormList.map((item)=>{
+                    if (formCode) {
+                        if (formCode === item.code) return {
+                            ...item,
+                            fields: item.fields.map((item)=>this.refreshMapFields(item, nameList))
+                        };
+                    }
+                    return item;
+                })
+            };
+        });
+    }
+    requiredFields(required, nameList, formCode) {
+        this.dispatch((prevState)=>{
+            const subFormList = prevState.subForms || [];
+            return {
+                ...prevState,
+                fields: prevState.fields.map((item)=>{
+                    if (!formCode) return this.requiredMapFields(required, item, nameList);
+                    if (formCode === prevState.code) return this.requiredMapFields(required, item, nameList);
+                    return item;
+                }),
+                subForms: subFormList.map((item)=>{
+                    if (formCode) {
+                        if (formCode === item.code) return {
+                            ...item,
+                            fields: item.fields.map((item)=>this.requiredMapFields(required, item, nameList))
+                        };
+                    }
+                    return item;
+                })
+            };
+        });
+    }
+    hiddenMapFields(hidden, field, nameList) {
+        if ('string' == typeof nameList) {
+            if (field.code === nameList) return {
+                ...field,
+                hidden: hidden
+            };
+        } else if (nameList.includes(field.code)) return {
+            ...field,
+            hidden: hidden
+        };
+        return field;
+    }
+    refreshMapFields(field, nameList) {
+        if ('string' == typeof nameList) {
+            if (field.code === nameList) {
+                const version = field.version ? field.version : 0;
+                return {
+                    ...field,
+                    version: version + 1
+                };
+            }
+        } else if (nameList.includes(field.code)) {
+            const version = field.version ? field.version : 0;
+            return {
+                ...field,
+                version: version + 1
+            };
+        }
+        return field;
+    }
+    requiredMapFields(required, field, nameList) {
+        if ('string' == typeof nameList) {
+            if (field.code === nameList) return {
+                ...field,
+                required: required
+            };
+        } else if (nameList.includes(field.code)) return {
+            ...field,
+            required: required
+        };
+        return field;
+    }
+}
+export { FormPresenter };

package/dist/presenters/index.d.ts

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

package/dist/presenters/index.js

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

package/dist/register/form.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare class FormRegistry {
+    private formComponent;
+    private formInstance;
+    private constructor();
+    private static readonly instance;
+    static getInstance(): FormRegistry;
+    register(formComponent: React.ComponentType<any>, formInstance: () => any): void;
+    getFormComponent(): React.ComponentType<any> | undefined;
+    getFormInstance(): (() => any) | undefined;
+}

package/dist/register/form.js

@@ -0,0 +1,20 @@
+import "react";
+class FormRegistry {
+    formComponent;
+    formInstance;
+    static instance = new FormRegistry();
+    static getInstance() {
+        return this.instance;
+    }
+    register(formComponent, formInstance) {
+        this.formComponent = formComponent;
+        this.formInstance = formInstance;
+    }
+    getFormComponent() {
+        return this.formComponent;
+    }
+    getFormInstance() {
+        return this.formInstance;
+    }
+}
+export { FormRegistry };

package/dist/register/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./form";
+export * from "./layout";

package/dist/register/index.js

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

package/dist/register/layout.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormLayoutProps } from "../types";
+export declare class LayoutRegister {
+    private readonly map;
+    private constructor();
+    private static readonly instance;
+    static getInstance(): LayoutRegister;
+    register(type: string, componentType: React.ComponentType<FormLayoutProps>): void;
+    getLayoutComponent(type: string): React.ComponentType<FormLayoutProps> | undefined;
+}

package/dist/register/layout.js

@@ -0,0 +1,18 @@
+import "react";
+class LayoutRegister {
+    map;
+    constructor(){
+        this.map = new Map();
+    }
+    static instance = new LayoutRegister();
+    static getInstance() {
+        return this.instance;
+    }
+    register(type, componentType) {
+        this.map.set(type, componentType);
+    }
+    getLayoutComponent(type) {
+        return this.map.get(type);
+    }
+}
+export { LayoutRegister };

package/dist/store/index.d.ts

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

package/dist/store/index.js

@@ -0,0 +1,24 @@
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+import { initialState } from "../types/index.js";
+import { original } from "immer";
+const formSlice = createSlice({
+    name: 'form',
+    initialState: {
+        ...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: updateState } = formSlice.actions;
+const formStore = configureStore({
+    reducer: {
+        form: formSlice.reducer
+    }
+});
+export { formSlice, formStore, updateState };

package/dist/types/dispatch.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Dispatch对象，对应React的useState的dispatch函数能力
+ */
+export type Dispatch<T> = (updater: ((prevState: T) => T) | T) => void;

package/dist/types/event.d.ts

@@ -0,0 +1,10 @@
+import { FieldKey } from "./";
+import { FormInstance } from "../instance";
+/**
+ * 表单事件
+ */
+export interface FormEvent {
+    type: 'load' | 'change' | 'blur';
+    target?: FieldKey;
+    event: (instance: FormInstance, value?: any) => void;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./item";
+export * from "./state";
+export * from "./types";
+export * from "./view";
+export * from "./validate";
+export * from "./event";
+export * from "./dispatch";
+export * from "./layout";

package/dist/types/index.js

@@ -0,0 +1,8 @@
+export * from "./item.js";
+export * from "./state.js";
+export * from "./types.js";
+export * from "./view.js";
+export * from "./validate.js";
+export * from "./event.js";
+export * from "./dispatch.js";
+export * from "./layout.js";

package/dist/types/item.d.ts

@@ -0,0 +1,31 @@
+/**
+ *  表单组件属性
+ */
+export interface FormItemProps {
+    /** 表单字段 **/
+    name: string;
+    /** 表单标题 **/
+    label?: string;
+    /** 是否隐藏 **/
+    hidden?: boolean;
+    /** 是否必填 **/
+    required?: boolean;
+    /** 默认值 **/
+    defaultValue?: string;
+    /** 当前值 **/
+    value?: string;
+    /** 变更事件 **/
+    onChange?: (value: string) => void;
+    /** 失去焦点事件 **/
+    onBlur?: (value: string) => void;
+    /** 输入提示信息 **/
+    placeholder?: string;
+    /** 是否只读 **/
+    readOnly?: boolean;
+    /** 校验规则，Antd的规则 **/
+    rules?: any[];
+    /** 字段排版布局 **/
+    layout?: 'horizontal' | 'vertical';
+    /** 刷新版本号 **/
+    version?: number;
+}

package/dist/types/layout.d.ts

@@ -0,0 +1,17 @@
+import { FormField, FormLayout } from "./view";
+import { FormContextScope } from "../context";
+/**
+ *  布局属性
+ */
+export interface FormLayoutProps {
+    /** 表单编码 **/
+    formCode: string;
+    /** 表单属性 **/
+    layout: FormLayout;
+    /** 表单字段 **/
+    fields: FormField[];
+    /** 是否预览模式 **/
+    review: boolean;
+    /** form上下文对象 **/
+    context: FormContextScope;
+}

package/dist/types/state.d.ts

@@ -0,0 +1,10 @@
+import { FormField } from "./view";
+export type StateField = FormField & {
+    version?: number;
+};
+export interface FormState {
+    code: string;
+    fields: StateField[];
+    subForms?: FormState[];
+}
+export declare const initialState: FormState;

package/dist/types/state.js

@@ -0,0 +1,5 @@
+const initialState = {
+    code: '',
+    fields: []
+};
+export { initialState };

package/dist/types/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ *  数据类型
+ */
+export type DataType = 'STRING' | 'INTEGER' | 'BOOLEAN' | 'LONG' | 'DOUBLE';
+export declare const dataTypeOptions: {
+    label: string;
+    value: string;
+}[];
+/**
+ * 表单类型
+ */
+export interface FormType {
+    name: string;
+    type: string;
+    dataType: DataType;
+}

package/dist/types/types.js

@@ -0,0 +1,23 @@
+const dataTypeOptions = [
+    {
+        label: '整数',
+        value: 'INTEGER'
+    },
+    {
+        label: '长整数',
+        value: 'LONG'
+    },
+    {
+        label: '小数',
+        value: 'DOUBLE'
+    },
+    {
+        label: '字符串',
+        value: 'STRING'
+    },
+    {
+        label: '布尔类型',
+        value: 'BOOLEAN'
+    }
+];
+export { dataTypeOptions };

package/dist/types/validate.d.ts

@@ -0,0 +1,11 @@
+import { FormInstance } from "../instance";
+import { FieldKey } from "./";
+/**
+ * 字段校验器
+ */
+export interface FormFieldValidator {
+    /** 字段名 **/
+    target: FieldKey;
+    /** 校验函数 **/
+    validator: (instance: FormInstance, value: any) => string | true;
+}