mt-flowbite-react/lib/esm/store/mtform.slice.js

Official React components built for Flowbite and Tailwind CSS

'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { createContext, useContext, useEffect, useRef } from 'react';
import { create, useStore } from 'zustand';
import { persist, subscribeWithSelector } from 'zustand/middleware';
import { mtmClient } from '../mtmapi/mtm.client';
export const createResFormStore = (initProps) => {
    return create()(persist(subscribeWithSelector((set, get) => ({
        isDesignEnabled: true,
        async handleSubmit(formValues) {
            const pre = get();
            if (!pre.resForm) {
                console.error('no resForm');
                return;
            }
            //解释action 配置
            const uri = new URL(pre.resForm.action); //值为： api://res.api/resFormField/edit
            console.log('actionurl: ', pre.resForm.action); //实际输出： actionurl:  api://res.api/resFormField/edit
            const protocol = uri.protocol;
            if (!protocol) {
                console.error('action 配置，缺少 protocol 值');
                return;
            }
            const host = uri.host;
            console.log('uri', uri, 'protocol', protocol, 'host', host); //注意这里，我获取的host 值是空字符串。
            if (host.toLocaleLowerCase() == 'res.api') {
                console.log('TODO: 将表单值提交到后端:', pre.resForm?.action, pre.values);
                // const res = pre.resForm?.res
                const apiPath = uri.pathname;
                const result = await mtmClient.res.apiPost(apiPath, pre.values);
                console.info('表单提交响应', result);
                // set({ ...get(), formResponseData })
                return;
            }
            else {
                console.log('似乎没有正确设置 host', host);
                return;
            }
        },
        loadFormData() {
            console.log('TODO: loadFormData');
        },
        // setDesignEnabled(isDesignEnabled) { set({ ...get(), isDesignEnabled }) },
        setValues(values) {
            set({ ...get, values });
        },
        setFormValue(name, value) {
            const oldFormValues = get().values || {};
            set({ ...get(), values: { ...oldFormValues, [name]: value } });
        },
        setFormResponseData(formResponseData) {
            set({ ...get(), formResponseData });
        },
        isLoadingFormConfig: false,
        async setIsLoadingFormConfig(isLoadingFormConfig) {
            set({ ...get(), isLoadingFormConfig });
        },
        async setResFormId(resFormId) {
            console.log('setResFormId called', resFormId);
            const pre = get();
            if (!pre.resForm) {
                set({ ...get(), isLoadingFormConfig: true });
                console.log('加载resform 配置', resFormId);
                try {
                    const resForm = await mtmClient.refForm.getResFormById(resFormId);
                    console.log('加载 resForm ', resForm);
                    set({ ...get(), isLoadingFormConfig: false, resForm });
                }
                catch (e) {
                    console.error('加载resform 配置出错：', e);
                    set({ ...get(), isLoadingFormConfig: false });
                }
            }
        },
        defaultValues: 0,
        async setDefaultValues(defaultValues) {
            const pre = get();
            const parentItemId = pre.defaultValues['parentItemId'];
            if (parentItemId) {
                //需要异步加载 item detail 的情况。
                const res = pre.defaultValues['res'];
                if (res) {
                    console.log('TODO: defaultValues 满足 需要加载 item detail的条件 res:', res, parentItemId);
                    const item = await mtmClient.res.getItem(res, parentItemId);
                    console.log('res form 获取item 值', item);
                    set({ ...get(), defaultValues: item, values: item });
                }
            }
            else {
                //普通情况，直接传入的是 item detail的值
                console.log('form store 普通情况，直接传入的是 item detail的值');
                set({ ...get(), defaultValues });
            }
        },
    })), {
        name: `mt-form-${initProps?.resFormId}`,
        version: 1,
        skipHydration: true,
        onRehydrateStorage(state) {
            // state.loadFormData()
        },
        migrate(persistedState, version) {
            console.log('persistedState', version, persistedState);
            return persistedState;
        },
        ...initProps,
    }));
};
//-----------context
const Context = createContext(null);
export function ResFormProvider({ children, ...props }) {
    const storeRef = useRef();
    if (!storeRef.current) {
        console.log('ResFormProvider 创建state', props);
        storeRef.current = createResFormStore(props);
    }
    useEffect(() => {
        console.log('ResFormProvider 初始化:', props.resFormId);
        if (props.resFormId) {
            storeRef.current?.getState().setResFormId(props.resFormId);
        }
    }, [props.resFormId]);
    useEffect(() => {
        //当默认值 defaultValues 变化后调用setDefaultValues，触发 detail 数据加载(如果需要)
        console.log('ResFormProvider defaultValues 变更：', props.resFormId);
        if (props.resFormId) {
            storeRef.current?.getState().setDefaultValues(props.defaultValues);
        }
    }, [props.defaultValues]);
    return (_jsxs(Context.Provider, { value: storeRef.current, children: [children, _jsx(SubscriptionSetup, {})] }));
}
//------------事件订阅
function SubscriptionSetup() {
    const store = useResFormStore();
    useEffect(() => {
        const unsub2 = store.subscribe((state) => state.defaultValues, (a) => {
            // console.log("defaultValues 变化事件:", a)
        }, {
            fireImmediately: true,
        });
        const unsubResFormId = store.subscribe((state) => state.resFormId, (value) => {
            // console.log(" resFormId 事件:", value)
        }, {
            fireImmediately: true,
        });
        return () => {
            unsub2();
            unsubResFormId();
        };
    }, []);
    return _jsx(_Fragment, {});
}
export function useResFormStore(selector, equals) {
    const store = useContext(Context);
    if (!store)
        throw new Error('Missing ResFormProvider');
    if (selector) {
        // eslint-disable-next-line
        return useStore(store, selector, equals);
    }
    else {
        return store;
    }
}