@gem-sdk/core 1.5.15 → 1.5.22

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -1,350 +1,358 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, Suspense, Fragment } from 'react';
+import { useContext, createContext, Suspense, Fragment } from 'react';
 import { useStore, createStore } from 'zustand';
 import { cloneDeep } from '../helpers/clone-deep.js';
 import { normalizeBuilderData } from '../helpers/normalize-builder-data.js';
 
-function moveByIndex(input, from, to) {
-    const elm = input.splice(from, 1)[0];
-    if (elm !== undefined) {
-        input.splice(to, 0, elm);
-    }
-}
-function removeByKey(id, data) {
-    const item = data[id];
-    if (item) {
-        delete data[id];
-        if (item.type !== 'section') {
-            item.childrens?.map((child) => removeByKey(child, data));
-        }
-    }
-}
-const BuilderPreviewContext = createContext(null);
-const root = {
-    uid: 'ROOT',
-    tag: 'Root',
-    label: 'Root',
-    childrens: [],
-};
-const createBuilderPreviewProvider = (args) => createStore((set, get) => ({
-    state: args,
-    addItem: (args) => {
-        const { position, data } = args;
-        const state = get().state;
-        const dateModified = Date.now();
-        if (args.type === 'section') {
-            if (!Array.isArray(data)) {
-                const sectionId = data.uid;
-                // Section only add to ROOT
-                const ROOT = state.ROOT;
-                if (!ROOT.childrens) {
-                    ROOT.childrens = [sectionId];
-                }
-                else {
-                    ROOT.childrens.splice(position ?? 0, 0, sectionId);
-                }
-                ROOT.dateModified = dateModified;
-                set({
-                    state: {
-                        ...state,
-                        [sectionId]: {
-                            uid: sectionId,
-                            type: 'section',
-                            label: data.label,
-                        },
-                        ROOT: cloneDeep(ROOT),
-                    },
-                });
-            }
-        }
-        else {
-            const { id, data } = args;
-            const parent = id ? state[id] ?? state.ROOT : state.ROOT;
-            // Can't add item to section
-            if (parent.type === 'section')
-                return;
-            if (Array.isArray(data)) {
-                const childrens = data.map((v) => v.uid);
-                const newState = data.reduceRight((prev, current) => {
-                    const item = normalizeBuilderData(current);
-                    return {
-                        ...prev,
-                        ...item,
-                    };
-                }, {});
-                parent.dateModified = dateModified;
-                parent.childrens = parent.childrens ?? [];
-                parent.childrens.splice(position ?? 0, 0, ...childrens);
-                set({
-                    state: {
-                        ...state,
-                        ...newState,
-                        [parent.uid]: cloneDeep(parent),
-                    },
-                });
-            }
-            else {
-                const item = normalizeBuilderData(data);
-                parent.dateModified = dateModified;
-                parent.childrens = parent.childrens ?? [];
-                parent.childrens.splice(position ?? 0, 0, data.uid);
-                set({
-                    state: {
-                        ...state,
-                        ...item,
-                        [parent.uid]: cloneDeep(parent),
-                    },
-                });
-            }
-        }
-    },
-    changeItemProp: (id, data, group) => {
-        if (!group || !['setting', 'style', 'advanced'].includes(group))
-            return;
-        const state = get().state;
-        const item = state[id];
-        // Ignore section
-        if (item?.type === 'section')
-            return;
-        if (item) {
-            const dateModified = Date.now();
-            item.dateModified = dateModified;
-            switch (group) {
-                case 'setting':
-                    set({
-                        state: {
-                            ...state,
-                            [id]: {
-                                ...item,
-                                settings: {
-                                    ...item.settings,
-                                    ...data,
-                                },
-                            },
-                        },
-                    });
-                    break;
-                case 'style':
-                    set({
-                        state: {
-                            ...state,
-                            [id]: {
-                                ...item,
-                                styles: {
-                                    ...item.styles,
-                                    ...data,
-                                },
-                            },
-                        },
-                    });
-                    break;
-                case 'advanced':
-                    set({
-                        state: {
-                            ...state,
-                            [id]: {
-                                ...item,
-                                advanced: {
-                                    ...item.advanced,
-                                    ...data,
-                                },
-                            },
-                        },
-                    });
-                    break;
-            }
-        }
-    },
-    changeItemPropByKey: ({ id, key, data, group }) => {
-        if (!group || !['setting', 'style', 'advanced'].includes(group))
-            return;
-        const state = get().state;
-        const item = state[id];
-        // Ignore section
-        if (item?.type === 'section')
-            return;
-        if (item) {
-            const itemSetting = {
-                style: item.styles ?? {},
-                advanced: item.advanced ?? {},
-                setting: item.settings ?? {},
-            };
-            if (data === undefined) {
-                console.warn('Data is undefined');
-                delete itemSetting[group][key];
-            }
-            else {
-                itemSetting[group][key] = data;
-            }
-            set({
-                state: {
-                    ...state,
-                    [id]: {
-                        ...item,
-                        settings: { ...itemSetting.setting },
-                        styles: { ...itemSetting.style },
-                        advanced: { ...itemSetting.advanced },
-                    },
-                },
-            });
-        }
-    },
-    getItem: (id) => {
-        return get().state[id];
-    },
-    removeItem: (id) => {
-        if (id === 'ROOT') {
-            set({
-                state: {
-                    ROOT: root,
-                },
-            });
-        }
-        else {
-            const state = get().state;
-            removeByKey(id, state);
-            // Get parent node by id
-            const parent = Object.entries(state).find(([, value]) => value.type !== 'section' && value.childrens?.includes(id));
-            if (parent) {
-                const dateModified = Date.now();
-                const [parentId, parentValue] = parent;
-                if (parentValue.type === 'section')
-                    return;
-                parentValue.childrens = parentValue.childrens?.filter((child) => child !== id);
-                parentValue.dateModified = dateModified;
-                set({
-                    state: {
-                        ...state,
-                        [parentId]: cloneDeep(parentValue),
-                    },
-                });
-            }
-        }
-    },
-    moveItem: (id, toId, position) => {
-        const state = get().state;
-        const item = state[id];
-        const moveTo = state[toId];
-        // Ignore section
-        if (!item || !moveTo || moveTo.type === 'section')
-            return;
-        if (item.type === 'section') {
-            // Section only add to ROOT
-            const ROOT = state.ROOT;
-            if (!ROOT.childrens)
-                return;
-            const currentIndex = ROOT.childrens.findIndex((uid) => uid === id);
-            moveByIndex(ROOT.childrens, currentIndex, position ?? 0);
-            set({
-                state: {
-                    ...state,
-                    ROOT: cloneDeep(ROOT),
-                },
-            });
-        }
-        else {
-            const parent = Object.entries(state).find(([, value]) => value.type !== 'section' && value.childrens?.includes(id));
-            if (item && parent) {
-                const dateModified = Date.now();
-                const [, parentItem] = parent;
-                // Ignore section
-                if (parentItem.type === 'section')
-                    return;
-                parentItem.dateModified = dateModified;
-                if (toId === parentItem.uid && parentItem.childrens) {
-                    // Move item to the same parent
-                    const currentIndex = parentItem.childrens.findIndex((uid) => uid === id);
-                    if (parentItem.childrens && currentIndex !== position) {
-                        moveByIndex(parentItem.childrens, currentIndex, position ?? 0);
-                        set({
-                            state: {
-                                ...state,
-                                [parentItem.uid]: cloneDeep(parentItem),
-                            },
-                        });
-                    }
-                }
-                else {
-                    // Move item to another parent
-                    // Remove item from parent node
-                    parentItem.childrens = parentItem.childrens?.filter((uid) => uid !== id);
-                    if (moveTo) {
-                        moveTo.dateModified = dateModified;
-                        moveTo.childrens = moveTo.childrens ?? [];
-                        moveTo.childrens.splice(position ?? 0, 0, item.uid);
-                        set({
-                            state: {
-                                ...state,
-                                [moveTo.uid]: cloneDeep(moveTo),
-                                [parentItem.uid]: cloneDeep(parentItem),
-                            },
-                        });
-                    }
-                }
-            }
-        }
-    },
-    forceChangeState: (data) => {
-        set({ state: data });
-    },
-    initState: (data) => {
-        if (Array.isArray(data)) {
-            const childrens = data.map((v) => v.uid);
-            const newState = data.reduceRight((prev, current) => {
-                const item = normalizeBuilderData(current);
-                return {
-                    ...prev,
-                    ...item,
-                };
-            }, {});
-            set({
-                state: {
-                    ROOT: {
-                        ...root,
-                        childrens,
-                    },
-                    ...newState,
-                },
-            });
-        }
-        else {
-            const newState = normalizeBuilderData(data);
-            set({
-                state: {
-                    ROOT: {
-                        ...root,
-                        childrens: [data.uid],
-                    },
-                    ...newState,
-                },
-            });
-        }
-    },
-    addSection: (data, position) => {
-        const state = get().state;
-        const ROOT = state.ROOT;
-        if (!ROOT.childrens)
-            ROOT.childrens = [];
-        ROOT.childrens.splice(position ?? 0, 0, data.uid);
-        set({
-            state: {
-                ...state,
-                ROOT: cloneDeep(ROOT),
-            },
-        });
-    },
-}));
-const BuilderPreviewProvider = ({ children, state, lazy, ...passProps }) => {
-    const Component = lazy ? Suspense : Fragment;
-    return (jsx(Component, { children: jsx(BuilderPreviewContext.Provider, { ...passProps, value: createBuilderPreviewProvider(state), children: children }) }));
-};
-// export const useBuilderPreviewStore = useStore;
-const useBuilderPreviewStore = (selector, equalityFn) => {
-    const store = useContext(BuilderPreviewContext);
-    if (!store) {
-        throw new Error('useBuilderPreviewStore must be used within a BuilderPreviewProvider');
-    }
-    return useStore(store, selector, equalityFn);
+function moveByIndex(input, from, to) {
+    const elm = input.splice(from, 1)[0];
+    if (elm !== undefined) {
+        input.splice(to, 0, elm);
+    }
+}
+function removeByKey(id, data) {
+    const item = data[id];
+    if (item) {
+        delete data[id];
+        if (item.type !== 'section') {
+            item.childrens?.map((child)=>removeByKey(child, data));
+        }
+    }
+}
+const BuilderPreviewContext = /*#__PURE__*/ createContext(null);
+const root = {
+    uid: 'ROOT',
+    tag: 'Root',
+    label: 'Root',
+    childrens: []
+};
+const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
+            state: args,
+            addItem: (args)=>{
+                const { position , data  } = args;
+                const state = get().state;
+                const dateModified = Date.now();
+                if (args.type === 'section') {
+                    if (!Array.isArray(data)) {
+                        const sectionId = data.uid;
+                        // Section only add to ROOT
+                        const ROOT = state.ROOT;
+                        if (!ROOT.childrens) {
+                            ROOT.childrens = [
+                                sectionId
+                            ];
+                        } else {
+                            ROOT.childrens.splice(position ?? 0, 0, sectionId);
+                        }
+                        ROOT.dateModified = dateModified;
+                        set({
+                            state: {
+                                ...state,
+                                [sectionId]: {
+                                    uid: sectionId,
+                                    type: 'section',
+                                    label: data.label
+                                },
+                                ROOT: cloneDeep(ROOT)
+                            }
+                        });
+                    }
+                } else {
+                    const { id , data  } = args;
+                    const parent = id ? state[id] ?? state.ROOT : state.ROOT;
+                    // Can't add item to section
+                    if (parent.type === 'section') return;
+                    if (Array.isArray(data)) {
+                        const childrens = data.map((v)=>v.uid);
+                        const newState = data.reduceRight((prev, current)=>{
+                            const item = normalizeBuilderData(current);
+                            return {
+                                ...prev,
+                                ...item
+                            };
+                        }, {});
+                        parent.dateModified = dateModified;
+                        parent.childrens = parent.childrens ?? [];
+                        parent.childrens.splice(position ?? 0, 0, ...childrens);
+                        set({
+                            state: {
+                                ...state,
+                                ...newState,
+                                [parent.uid]: cloneDeep(parent)
+                            }
+                        });
+                    } else {
+                        const item = normalizeBuilderData(data);
+                        parent.dateModified = dateModified;
+                        parent.childrens = parent.childrens ?? [];
+                        parent.childrens.splice(position ?? 0, 0, data.uid);
+                        set({
+                            state: {
+                                ...state,
+                                ...item,
+                                [parent.uid]: cloneDeep(parent)
+                            }
+                        });
+                    }
+                }
+            },
+            changeItemProp: (id, data, group)=>{
+                if (!group || ![
+                    'setting',
+                    'style',
+                    'advanced'
+                ].includes(group)) return;
+                const state = get().state;
+                const item = state[id];
+                // Ignore section
+                if (item?.type === 'section') return;
+                if (item) {
+                    const dateModified = Date.now();
+                    item.dateModified = dateModified;
+                    switch(group){
+                        case 'setting':
+                            set({
+                                state: {
+                                    ...state,
+                                    [id]: {
+                                        ...item,
+                                        settings: {
+                                            ...item.settings,
+                                            ...data
+                                        }
+                                    }
+                                }
+                            });
+                            break;
+                        case 'style':
+                            set({
+                                state: {
+                                    ...state,
+                                    [id]: {
+                                        ...item,
+                                        styles: {
+                                            ...item.styles,
+                                            ...data
+                                        }
+                                    }
+                                }
+                            });
+                            break;
+                        case 'advanced':
+                            set({
+                                state: {
+                                    ...state,
+                                    [id]: {
+                                        ...item,
+                                        advanced: {
+                                            ...item.advanced,
+                                            ...data
+                                        }
+                                    }
+                                }
+                            });
+                            break;
+                    }
+                }
+            },
+            changeItemPropByKey: ({ id , key , data , group  })=>{
+                if (!group || ![
+                    'setting',
+                    'style',
+                    'advanced'
+                ].includes(group)) return;
+                const state = get().state;
+                const item = state[id];
+                // Ignore section
+                if (item?.type === 'section') return;
+                if (item) {
+                    const itemSetting = {
+                        style: item.styles ?? {},
+                        advanced: item.advanced ?? {},
+                        setting: item.settings ?? {}
+                    };
+                    if (data === undefined) {
+                        console.warn('Data is undefined');
+                        delete itemSetting[group][key];
+                    } else {
+                        itemSetting[group][key] = data;
+                    }
+                    set({
+                        state: {
+                            ...state,
+                            [id]: {
+                                ...item,
+                                settings: {
+                                    ...itemSetting.setting
+                                },
+                                styles: {
+                                    ...itemSetting.style
+                                },
+                                advanced: {
+                                    ...itemSetting.advanced
+                                }
+                            }
+                        }
+                    });
+                }
+            },
+            getItem: (id)=>{
+                return get().state[id];
+            },
+            removeItem: (id)=>{
+                if (id === 'ROOT') {
+                    set({
+                        state: {
+                            ROOT: root
+                        }
+                    });
+                } else {
+                    const state = get().state;
+                    removeByKey(id, state);
+                    // Get parent node by id
+                    const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(id));
+                    if (parent) {
+                        const dateModified = Date.now();
+                        const [parentId, parentValue] = parent;
+                        if (parentValue.type === 'section') return;
+                        parentValue.childrens = parentValue.childrens?.filter((child)=>child !== id);
+                        parentValue.dateModified = dateModified;
+                        set({
+                            state: {
+                                ...state,
+                                [parentId]: cloneDeep(parentValue)
+                            }
+                        });
+                    }
+                }
+            },
+            moveItem: (id, toId, position)=>{
+                const state = get().state;
+                const item = state[id];
+                const moveTo = state[toId];
+                // Ignore section
+                if (!item || !moveTo || moveTo.type === 'section') return;
+                if (item.type === 'section') {
+                    // Section only add to ROOT
+                    const ROOT = state.ROOT;
+                    if (!ROOT.childrens) return;
+                    const currentIndex = ROOT.childrens.findIndex((uid)=>uid === id);
+                    moveByIndex(ROOT.childrens, currentIndex, position ?? 0);
+                    set({
+                        state: {
+                            ...state,
+                            ROOT: cloneDeep(ROOT)
+                        }
+                    });
+                } else {
+                    const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(id));
+                    if (item && parent) {
+                        const dateModified = Date.now();
+                        const [, parentItem] = parent;
+                        // Ignore section
+                        if (parentItem.type === 'section') return;
+                        parentItem.dateModified = dateModified;
+                        if (toId === parentItem.uid && parentItem.childrens) {
+                            // Move item to the same parent
+                            const currentIndex = parentItem.childrens.findIndex((uid)=>uid === id);
+                            if (parentItem.childrens && currentIndex !== position) {
+                                moveByIndex(parentItem.childrens, currentIndex, position ?? 0);
+                                set({
+                                    state: {
+                                        ...state,
+                                        [parentItem.uid]: cloneDeep(parentItem)
+                                    }
+                                });
+                            }
+                        } else {
+                            // Move item to another parent
+                            // Remove item from parent node
+                            parentItem.childrens = parentItem.childrens?.filter((uid)=>uid !== id);
+                            if (moveTo) {
+                                moveTo.dateModified = dateModified;
+                                moveTo.childrens = moveTo.childrens ?? [];
+                                moveTo.childrens.splice(position ?? 0, 0, item.uid);
+                                set({
+                                    state: {
+                                        ...state,
+                                        [moveTo.uid]: cloneDeep(moveTo),
+                                        [parentItem.uid]: cloneDeep(parentItem)
+                                    }
+                                });
+                            }
+                        }
+                    }
+                }
+            },
+            forceChangeState: (data)=>{
+                set({
+                    state: data
+                });
+            },
+            initState: (data)=>{
+                if (Array.isArray(data)) {
+                    const childrens = data.map((v)=>v.uid);
+                    const newState = data.reduceRight((prev, current)=>{
+                        const item = normalizeBuilderData(current);
+                        return {
+                            ...prev,
+                            ...item
+                        };
+                    }, {});
+                    set({
+                        state: {
+                            ROOT: {
+                                ...root,
+                                childrens
+                            },
+                            ...newState
+                        }
+                    });
+                } else {
+                    const newState = normalizeBuilderData(data);
+                    set({
+                        state: {
+                            ROOT: {
+                                ...root,
+                                childrens: [
+                                    data.uid
+                                ]
+                            },
+                            ...newState
+                        }
+                    });
+                }
+            },
+            addSection: (data, position)=>{
+                const state = get().state;
+                const ROOT = state.ROOT;
+                if (!ROOT.childrens) ROOT.childrens = [];
+                ROOT.childrens.splice(position ?? 0, 0, data.uid);
+                set({
+                    state: {
+                        ...state,
+                        ROOT: cloneDeep(ROOT)
+                    }
+                });
+            }
+        }));
+const BuilderPreviewProvider = ({ children , state , lazy , ...passProps })=>{
+    const Component = lazy ? Suspense : Fragment;
+    return /*#__PURE__*/ jsx(Component, {
+        children: /*#__PURE__*/ jsx(BuilderPreviewContext.Provider, {
+            ...passProps,
+            value: createBuilderPreviewProvider(state),
+            children: children
+        })
+    });
+};
+// export const useBuilderPreviewStore = useStore;
+const useBuilderPreviewStore = (selector, equalityFn)=>{
+    const store = useContext(BuilderPreviewContext);
+    if (!store) {
+        throw new Error('useBuilderPreviewStore must be used within a BuilderPreviewProvider');
+    }
+    return useStore(store, selector, equalityFn);
 };
 
 export { BuilderPreviewProvider, useBuilderPreviewStore };