mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
165 lines (164 loc) • 6.94 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.useNodeGlobalStore = exports.GlobalNodeProvider = exports.useNodeStore = exports.NodeProvider = exports.createNodeStore = exports.createRenderlice = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const lodash_es_1 = require("lodash-es");
const react_1 = require("react");
const zustand_1 = require("zustand");
const middleware_1 = require("zustand/middleware");
const helper_1 = require("./helper");
const createRenderlice = (set, get, initState) => {
return ({
some: "some1",
setSomeValue(someValue) {
set({ ...get(), some: someValue });
},
async addChild(viewType, nodeId) {
const pre = get();
if (nodeId) {
const addToNodeId = nodeId || pre.rootNode.id;
console.log("rootStore中添加子节点：", nodeId, viewType);
const rootNode = get().rootNode;
const parentNode = (0, helper_1.findChildrenById)(rootNode, addToNodeId);
if (!parentNode) {
console.log("找不到父节点");
return;
}
console.log("找到 parent 节点", parentNode);
const newNode = {
id: (0, lodash_es_1.random)(1, 999999999),
name: "test1",
enabled: true,
comNode: {
id: (0, lodash_es_1.random)(1, 999999999),
name: "name1",
comType: viewType,
}
};
parentNode.children = [...parentNode.children || [], newNode];
set((state) => ({
rootNode: rootNode,
}));
}
else {
const pre = get();
set({
...get(), rootNode: {
...pre.rootNode, children: [...pre.rootNode.children || [], {
id: (0, lodash_es_1.random)(1, 999999999),
name: "test2",
enabled: true,
comNode: {
id: (0, lodash_es_1.random)(1, 999999999),
name: "name1",
comType: viewType,
}
}]
}
});
}
},
printState() {
console.log("print state: ", get().rootNode);
},
...initState,
});
};
exports.createRenderlice = createRenderlice;
const createNodeStore = (initProps) => {
return (0, zustand_1.create)()((0, middleware_1.persist)((0, middleware_1.subscribeWithSelector)((...a) => ({
...(0, exports.createRenderlice)(...a),
...initProps,
})), {
name: `render-${(initProps?.rootNode?.id) ? initProps.rootNode?.id : ""}`,
version: 1,
skipHydration: true,
onRehydrateStorage(state) { },
}));
};
exports.createNodeStore = createNodeStore;
//-------------------------------------------------------------------------------------------
// 一般情况下的 嵌套使用的 context 及其 hooks， （树状结构）
const Context = (0, react_1.createContext)(null);
function NodeProvider({ children, ...props }) {
//思考： NodeProvider 必定在GlobalNodeProvider里面，
// 不知道，是否可以考虑以 GlobalNodeProvider 上下文作为基准，来构造NodeProvider
const storeRef = (0, react_1.useRef)();
if (!storeRef.current) {
storeRef.current = (0, exports.createNodeStore)(props);
}
// const rootStore = useRootNodeStore(x => x.rootNode)
// useEffect(() => {
// console.log(" rootStore 变更", rootStore)
// // storeRef.current = createListItemStore(props)
// }, [
// rootStore
// ])
return ((0, jsx_runtime_1.jsxs)(Context.Provider, { value: storeRef.current, children: [children, (0, jsx_runtime_1.jsx)(Setup, {})] }));
}
exports.NodeProvider = NodeProvider;
function Setup() {
const rootNode = useNodeGlobalStore(x => x.rootNode);
// const rootSomeValue = useNodeGlobalStore(x => x.some)
const rootSetSomeValue = useNodeGlobalStore(x => x.setSomeValue);
const currentNode = useNodeStore(x => x.rootNode);
(0, react_1.useEffect)(() => {
console.log("rootNode变更", rootNode);
}, [rootNode]);
(0, react_1.useEffect)(() => {
console.log("currentNode变更", currentNode);
//当前节点的变更触发 根节点的变更，为了构建完整的树结构，毕竟，在节点上下文目前，仅仅保存了当前节点及下属节点的信息。
// 1: 先试试 调用根节点的函数看是否生效。
rootSetSomeValue("先试试 调用根节点的函数看是否生效。");
}, [currentNode]);
const store = useNodeStore();
(0, react_1.useEffect)(() => {
const unsub2 = store.subscribe((state) => state.some, (a) => {
console.log("a", a);
// rootSetSomeValue("subscribed:" + a.toString())
});
return () => {
unsub2();
};
}, []);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
}
function useNodeStore(selector, equals) {
const store = (0, react_1.useContext)(Context);
if (!store)
throw new Error('Missing NodeProvider');
if (selector) {
return (0, zustand_1.useStore)(store, selector, equals);
}
else {
return store;
}
}
exports.useNodeStore = useNodeStore;
//-------------------------------------------------------------------------------------------
// 全局 Context 及其hooks
// 用途： 因为动态UI节点是树状嵌套的，下层的context，不能直接获取到全局（根节点）的完整信息。
// 所以额外的增加一个全局非嵌套的Context。 这样可以获取完整的树状元素节点数据，方便进一步处理。
//
const ContextGlobal = (0, react_1.createContext)(null);
function GlobalNodeProvider({ children, ...props }) {
const storeRef = (0, react_1.useRef)();
if (!storeRef.current) {
storeRef.current = (0, exports.createNodeStore)(props);
}
return ((0, jsx_runtime_1.jsx)(ContextGlobal.Provider, { value: storeRef.current, children: children }));
}
exports.GlobalNodeProvider = GlobalNodeProvider;
function useNodeGlobalStore(selector, equals) {
const store = (0, react_1.useContext)(ContextGlobal);
if (!store)
throw new Error('Missing GlobalNodeProvider');
if (selector) {
return (0, zustand_1.useStore)(store, selector, equals);
}
else {
return store;
}
}
exports.useNodeGlobalStore = useNodeGlobalStore;