mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
283 lines (282 loc) • 10.8 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResV2Store = exports.ResApp2Provider = exports.createResAppStore = exports.createResViewSlice = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const zustand_1 = require("zustand");
const middleware_1 = require("zustand/middleware");
const mtm_client_1 = require("../mtmapi/mtm.client");
const mtmapi_1 = require("../mtmapi/mtmapi");
const consts_1 = require("./consts");
const react_1 = require("react");
const middleware_2 = require("zustand/middleware");
const createResViewSlice = (set, get, initState) => {
return {
depth: 0,
isLoadingDetail: false,
isLoadingList: false,
isOpenNewForm: false,
debug: false,
openQuery: false,
items: [],
// isOpenDebug: false,
// setDebug(debug) {
// set({ ...get(), debug })
// },
async addItem(item) {
const pre = get();
const res = get().resView?.res;
if (res) {
return;
}
console.log('add item: ', item);
set({ ...pre, items: [...pre.items, item] });
//同步到后端
const addItemResult = await (0, mtmapi_1.mtmApiAddItem)(res, item);
console.log('add item result:', addItemResult);
},
setDepth(depth) {
if (depth > 0) {
console.log('setDepth call', depth);
set({ ...get(), depth });
}
},
cleanItems() {
set({ ...get(), items: [] });
},
setActivateId(activateId) {
set({ ...get(), activateId });
get().loadDetailData();
},
handleBacktoList() {
history.pushState({}, '', `${consts_1.RES_URL_ROOT} / ${get().resView?.res}`);
set({ ...get(), activateId: undefined, activateItem: undefined });
},
async listQuery(newValues) {
console.log('listQuery, state:', get());
const pre = get();
if (!pre.resView) {
console.log('resView 对象为空，跳过数据加载');
return;
}
const viewType = pre.resView.viewType;
const res = pre.resView.res;
// if (viewType == "list") {
set({
...pre,
isLoadingList: true,
queryParams: {
...pre.queryParams,
...newValues,
},
});
// let parentIdField = pre.resView?.parentIdField
// if (!parentIdField) {
// //如果没有具体指定上级过滤字段，则根据res 名称 生成。
// parentIdField = pre.parentResView?.res
// }
const finnalParams = {
...pre.queryParams,
};
// finnalParams[parentIdField!] = pre.parentItemId
const result = await (0, mtmapi_1.mtmApiCall)(res, '', finnalParams);
const responseItems = result.items;
set({
...get(),
isLoadingList: false,
items: [
...responseItems.map((ritem) => {
return {
...ritem,
};
}),
],
});
// } else if (pre.resView.viewType == "edit") {
// console.log("TODO: 加载 edit 数据")
// }
},
async loadDetailData() {
const pre = get();
set({ ...pre, isLoadingDetail: true });
const res = pre.resView.res;
if (pre.activateId) {
//TODO: 添加前端缓存
const activateItem = await (0, mtmapi_1.GetById)(res, pre.activateId);
set({ ...pre, isLoadingDetail: false, activateItem });
}
},
async updateItem(item) {
const pre = get();
console.log('TODO:更新item', item);
// ResStoreService.syncUpdate(pre.resName, item)
},
setOpenDebug: (isOpenDebug) => set((state) => {
return { isOpenDebug };
}),
setIsLoadingList: (isLoadingList) => set((state) => {
return { isLoadingList };
}),
setOpenNewForm: (isOpenNewForm) => set((state) => {
return { isOpenNewForm };
}),
setQueryParams: (queryParams) => set((state) => {
return { queryParams };
}),
setOpenQuery: (openQuery) => set((state) => {
return { openQuery };
}),
setOpenDeleteConfrom(isOpenDeleteConfrom) {
set({ ...get(), isOpenDeleteConfrom });
},
async deleteItem(id) {
const res = get().resView.res;
await (0, mtmapi_1.DeleteById)(res, id);
},
setDeleteItemId(deleteItemId) {
set({ ...get(), deleteItemId });
},
async LoadViewConfig() {
set({ ...get(), isLoadingResView: true });
const viewData = get().resView;
if (!viewData) {
//假如没有传入resView 的完整数据，则根据 resViewId 从后端加载。
console.log('TODO: 需要从后端根据 resViewId 加载 resView 数据');
}
const pre = get();
//从视图配置中，搜索相关的表单。
//补充： 这个方式过时。新的方式是，直接使用api加载。
const createItemForm = viewData.forms?.find((form) => {
return form.res == pre.resView?.res && form.action == 'create';
});
const queryForm = viewData?.forms?.find((form) => {
return form.res == pre.resView?.res && form.action == 'listquery';
});
const editForm = viewData?.forms?.find((form) => {
return form.res == pre.resView?.res && form.action == 'edit';
});
set({
...get(),
isLoadingResView: false,
resView: viewData,
newItemForm: createItemForm,
queryForm,
editForm,
});
},
isLoadingResView: false,
setLoadingResView(isLoadingResView) {
set({ ...get(), isLoadingResView });
},
activatedSubView: undefined,
setActivatedSubView(activatedSubView) {
set({ ...get(), activatedSubView });
},
parentItemId: undefined,
setParentItemId(parentItemId) {
if (parentItemId) {
set({ ...get(), parentItemId });
get().listQuery();
}
},
activatedTagId: undefined,
setActivatedTagId(activatedTagId) {
set({ ...get(), activatedTagId });
},
activateSubViewId: undefined,
setActivateSubViewId(activateSubViewId) {
const finedResView = get().resView.subViews.find((x) => x.id.toString() == activateSubViewId);
set({ ...get(), activateSubViewId, activateSubView: finedResView });
},
async setResView(resView) {
const pre = get();
// let depth = 0
//当前视图的深度为上级视图的深度+1
// if (pre.parentState) {
// const parentDepth = pre.parentState?.depth || 0
// depth = parentDepth + 1
// }
// const resView = pre.resView
if (!pre.resView.subViews) {
//嵌套视图中,还需要继续加载子视图配置，因为上级视图仅加载了他自己子视图。第三级的还没加载。
resView = await mtm_client_1.mtmClient.resView.getResViewById(pre.resView.id.toString());
// console.log("newResView:", newResView)
// set({ ...get(), resView: newResView })
}
set({ ...get(), resView });
},
...initState,
};
};
exports.createResViewSlice = createResViewSlice;
const createResAppStore = (initProps) => {
return (0, zustand_1.create)()((0, middleware_1.devtools)((0, middleware_1.persist)((0, middleware_2.subscribeWithSelector)((...a) => {
return {
...(0, exports.createResViewSlice)(...a),
// ...createDashSlice(...a),
//初始值，
//提示：可以用SSR的方式设置初始值，能覆盖各个Slice中内部的初始值，这样，Slice内部可以不用管初始值的相关部分。
...initProps,
};
}), {
name: `resAppStore-${initProps?.resView?.id}`,
version: 1,
// skipHydration: true,
onRehydrateStorage(state) {
// console.log("onRehydrateStorage[resView]", state)
},
})));
};
exports.createResAppStore = createResAppStore;
//-----------context
const Context = (0, react_1.createContext)(null);
function ResApp2Provider({ children, ...props }) {
const storeRef = (0, react_1.useRef)();
if (!storeRef.current) {
storeRef.current = (0, exports.createResAppStore)(props);
}
(0, react_1.useEffect)(() => {
storeRef.current?.getState().setParentItemId(props?.parentItemId);
}, [props?.parentItemId]);
(0, react_1.useEffect)(() => {
// console.log('props?.depth', props?.depth);
if (props.depth) {
storeRef.current?.getState().setDepth(props?.depth);
}
}, [props?.depth]);
(0, react_1.useEffect)(() => {
console.log('props?.resView', props?.resView);
if (props?.resView) {
storeRef.current?.getState().setResView(props.resView);
}
}, [props?.resView]);
return ((0, jsx_runtime_1.jsxs)(Context.Provider, { value: storeRef.current, children: [children, (0, jsx_runtime_1.jsx)(SubscriptionSetup, {})] }));
}
exports.ResApp2Provider = ResApp2Provider;
//------------事件订阅
function SubscriptionSetup() {
const store = useResV2Store();
(0, react_1.useEffect)(() => {
// const unsub2 = store.subscribe((state) => state.items, (a) => {
// })
return () => {
// unsub2()
};
}, []);
(0, react_1.useEffect)(() => {
store.getState().LoadViewConfig();
}, []);
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
function useResV2Store(selector, equals) {
const store = (0, react_1.useContext)(Context);
if (!store)
throw new Error('Missing ResAppProvider');
if (selector) {
return (0, zustand_1.useStore)(store, selector, equals);
}
else {
return store;
}
}
exports.useResV2Store = useResV2Store;