@brizy/ui/es/Frame/FrameContent.js

React elements in Brizy style

import React, { createContext, useCallback, useEffect, useState } from "react";
import { classNames } from "../classNamesFn";
import AntLayout from "antd/lib/layout";
import { getContentScrollbarWidth, getContentWidthProperty } from "../Frame/utils";
import { BRZ_PREFIX } from "../constants";
const { Content } = AntLayout;
export const FrameContentContext = createContext({ node: undefined });
export const FrameContent = props => {
    const { header, footer, fullWidth, children, contentWidth } = props;
    const [content, setContent] = useState();
    const [scrollbarWidth, setScrollbarWidth] = useState(0);
    const className = classNames()("layout__frame-content", {
        "layout__frame-content--fullWidth": fullWidth,
    });
    const setContentRef = useCallback((node) => {
        if (node)
            setContent(node);
    }, []);
    useEffect(() => {
        const parent = content === null || content === void 0 ? void 0 : content.parentElement;
        const resizeObserver = new ResizeObserver(entries => {
            for (const entry of entries) {
                const el = entry.target;
                setScrollbarWidth(el.offsetWidth - el.clientWidth);
            }
        });
        if (parent)
            resizeObserver.observe(parent);
        return () => {
            if (parent)
                resizeObserver.unobserve(parent);
        };
    }, [content, setScrollbarWidth]);
    return (React.createElement(AntLayout, { style: getContentScrollbarWidth(scrollbarWidth), className: className },
        header,
        React.createElement(Content, { className: `${BRZ_PREFIX}-layout__frame-container` },
            React.createElement(FrameContentContext.Provider, { value: { node: content } },
                React.createElement("div", { ref: setContentRef, className: `${BRZ_PREFIX}-layout__frame-wrap`, style: getContentWidthProperty(contentWidth || "980px") }, children))),
        footer));
};