@ducor/react/dist/provider/admin.js

admin template ui interface

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// AdminProvider.tsx
import { useContext, useState, useEffect, useRef, memo, useMemo, } from "react";
import Customizer from "../customizer/admin";
import ThemeProvider from "./theme";
import BreakpointProvider from "./breakpoint";
import LoadingProvider from "./loading";
import MemoComponent from "../components/memo-component";
import Style, { css } from "./components/style";
import { AdminContext } from "../hooks/use-admin";
const initialState = {
    //html DIRECTION
    HTML_DIRECTION: "ltr",
    // manage layout
    // LAYOUT_BOX: "full",
    HEADER_LOCATION: "top",
    SIDEBAR_LOCATION: "left",
    HEADER_POSITION: "static",
    SIDEBAR_POSITION: "static",
    SIDEBAR_TYPE: "full",
    SIDEBAR_SHOW: true,
    //SIDEBAR_RESIZE
    SIDEBAR_RESIZER_ISACTIVE: false,
    SIDEBAR_RESIZER_WIDTH: null,
    OVER_WRITE_LAYOUT: false,
    TYPOGRAPHY_LTR: "Poppins",
    TYPOGRAPHY_RTL: "Almarai",
};
/**
 * Current theme mode
 *
 * @returns
 */
export const useLayout = (name) => {
    const context = useContext(AdminContext);
    if (!context) {
        throw new Error("useLayout must be used within an AdminProvider");
    }
    useEffect(() => {
        if (typeof name === "string") {
            context.setLayout(name);
        }
        return () => {
            if (typeof name === "string") {
                context.setLayout();
            }
        };
    }, [name]);
    return null;
};
const Provider = ({ children, config = {} }) => {
    const isMount = useRef(false);
    const [data, setDataState] = useState(initialState);
    const [layout, setLayout] = useState(null);
    useEffect(() => {
        isMount.current = true;
        return () => {
            isMount.current = false;
        };
    }, []);
    const autoLayout = useMemo(() => {
        const { HEADER_LOCATION, SIDEBAR_LOCATION, SIDEBAR_SHOW, SIDEBAR_TYPE } = data;
        // remove all of classes
        // sidebar-layout="du-layout-1.1"
        const layout = `du-${SIDEBAR_TYPE}-hh-${HEADER_LOCATION}-ss-${SIDEBAR_LOCATION}${SIDEBAR_SHOW ? "-show" : ""}`;
        return layout;
    }, [data]);
    const setAdminData = (key, value) => {
        setDataState((prevData) => (Object.assign(Object.assign({}, prevData), { [key]: value })));
    };
    const toCss = () => {
        const { SIDEBAR_RESIZER_WIDTH, TYPOGRAPHY_LTR, TYPOGRAPHY_RTL } = data;
        if (!isMount.current) {
            return "";
        }
        const root = {
            ":root": {
                "--sidebar-width": SIDEBAR_RESIZER_WIDTH
                    ? SIDEBAR_RESIZER_WIDTH
                    : "var(--du-sidebar-vertical-full)",
                "--font-sans": `"${TYPOGRAPHY_LTR}", sans-serif`,
                "--font-sans-rtl": `"${TYPOGRAPHY_RTL}", serif`,
            },
        };
        return css(Object.assign({}, root), true);
    };
    const handleOverWiteLayout = (layoutName) => {
        setLayout(layoutName || null);
        setAdminData("OVER_WRITE_LAYOUT", typeof layoutName === "string");
    };
    return (_jsx(BreakpointProvider, { children: _jsxs(LoadingProvider, { defaultLoading: config.defaultLoading, children: [_jsx(Style, { href: `https://fonts.googleapis.com/css?family=${data.TYPOGRAPHY_LTR}` }), _jsx(Style, { href: `https://fonts.googleapis.com/css?family=${data.TYPOGRAPHY_RTL}` }), _jsx(Style, { value: toCss() }), _jsx(AdminContext.Provider, { value: {
                        adminData: data,
                        setAdminData,
                        setLayout: handleOverWiteLayout,
                    }, children: _jsx("div", { dir: data.HTML_DIRECTION, children: _jsxs(ThemeProvider, { children: [_jsx("div", { "data-layout": layout || autoLayout, children: _jsx(MemoComponent, { component: children }) }), _jsx(Customizer, {})] }) }) })] }) }));
};
export const AdminProvider = memo(Provider);