@smart-react-components/ui/Table/TableContainer.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const intrinsic_styled_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-props"));
const dom_1 = require("@smart-react-components/core/util/dom");
const react_1 = __importDefault(require("react"));
const styled_components_1 = require("styled-components");
const TableContainerElement_1 = __importDefault(require("../components/Table/TableContainerElement"));
const table_1 = require("../util/table");
const TableContainer = react_1.default.forwardRef((props, forwardRef) => {
    const theme = react_1.default.useContext(styled_components_1.ThemeContext);
    const ref = react_1.default.useRef(null);
    const [styled, setStyled] = react_1.default.useState(() => '');
    const getRef = () => (forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref);
    const handleResize = () => {
        const { x, y } = (0, table_1.getBreakpointValue)([props.stickyX, props.stickyXSm, props.stickyXMd, props.stickyXLg, props.stickyXXl], [props.stickyY, props.stickyYSm, props.stickyYMd, props.stickyYLg, props.stickyYXl], theme);
        let styled = `
      > table > * > tr > * {
        position: sticky;
      }
    `;
        let left = 0;
        let leftZIndex = x + 1;
        let containerZIndex = leftZIndex;
        const el = getRef();
        const xEls = el.current.querySelectorAll('table:first-child > * > tr > *');
        const yEls = el.current.querySelectorAll('table:first-child > thead > tr');
        if (x > 0 && xEls.length > 0) {
            if (props.hasInternalScroll) {
                styled += 'overflow-x: auto;';
            }
            for (let i = 0; i < x; i++) {
                styled += `
          > table > * > tr > *:nth-child(${i + 1}) {
            left: ${left}px;
            ${(!y || yEls.length === 0) ? `z-index: ${leftZIndex--};` : ''}
          }
        `;
                left += xEls[i].offsetWidth;
            }
        }
        if (y > 0 && yEls.length > 0) {
            if (props.hasInternalScroll) {
                styled += 'overflow-y: auto;';
            }
            for (let i = yEls.length - 1; i > yEls.length - 1 - y; i--) {
                const top = yEls[i].offsetTop;
                styled += `
          > table > thead > tr:nth-of-type(${i + 1}) > * {
            top: ${top}px;
            ${(!x || xEls.length === 0) ? `z-index: ${i + 1};` : ''}
          }
        `;
            }
        }
        if ((x > 0 && xEls.length > 0)
            && (y > 0 && yEls.length > 0)) {
            for (let i = 1; i <= x; i++) {
                styled += `
          > table > tbody > tr > *:nth-child(${i}) {
            z-index: ${i};
          }
        `;
            }
            const headEls = el.current.querySelectorAll('table:first-child > thead > tr > *');
            let zIndex = x + 1;
            for (let i = headEls.length; i > 0; i--) {
                styled += `
          > table > thead > tr > *:nth-child(${i}) {
            z-index: ${zIndex++};
          }
        `;
            }
            containerZIndex = zIndex;
        }
        styled = `
      z-index: ${containerZIndex + 1};
      ${styled}
    `;
        setStyled(styled);
    };
    react_1.default.useEffect(() => {
        (0, dom_1.addEventListener)(window, ['resize'], handleResize);
        handleResize();
        return () => {
            (0, dom_1.removeEventListener)(window, ['resize'], handleResize);
        };
    }, []);
    (0, useChangeEffect_1.default)(() => {
        handleResize();
    }, [props.children]);
    return (react_1.default.createElement(TableContainerElement_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), props.elementProps, { ref: getRef(), styled: styled }), props.children));
});
TableContainer.defaultProps = {
    elementProps: {},
    flex: '1 1 auto',
    hasInternalScroll: true,
    minHeight: 1,
    stickyX: 1,
    stickyY: 1,
};
exports.default = TableContainer;