smart-react-components/table/Container.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var index = require('../index-6d498b59.js');
var DOMHelper = require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Div = require('../element/Div.js');
var reactDom = require('react-dom');

class TableHelper {
    /**
     * Compares two breakpoints and returns the first defined one respectively.
     *
     * @param a
     * @param b
     */
    static compareBreakpoints(a, b) {
        return typeof a !== "undefined" ? a : b;
    }
    /**
     * Gets the breakpoint value according to the given breakpoints and the window size.
     * Breakpoints are given as an array from small to large - [xs, sm, md, lg, xl]
     *
     * @param x$
     * @param y$
     * @param theme
     */
    static getBreakpointValue(x$, y$, theme) {
        let x, y;
        let width = window.innerWidth;
        if (width > theme.grid.breakpoint.xlarge) {
            x = this.compareBreakpoints(x, x$[4]);
            y = this.compareBreakpoints(y, y$[4]);
        }
        if (width > theme.grid.breakpoint.large) {
            x = this.compareBreakpoints(x, x$[3]);
            y = this.compareBreakpoints(y, y$[3]);
        }
        if (width > theme.grid.breakpoint.medium) {
            x = this.compareBreakpoints(x, x$[2]);
            y = this.compareBreakpoints(y, y$[2]);
        }
        if (width > theme.grid.breakpoint.small) {
            x = this.compareBreakpoints(x, x$[1]);
            y = this.compareBreakpoints(y, y$[1]);
        }
        x = this.compareBreakpoints(x, x$[0]);
        y = this.compareBreakpoints(y, y$[0]);
        return { x, y };
    }
}

const ContainerElement = styled__default(Div).attrs(({ maxHeight = "100%" }) => ({ maxHeight })) `
    position: relative;
    overflow-x: auto;
`;
const Container = ({ children, elementProps = index.DV.JSX_ELEMENT_PROPS, id, stickyX, stickyXSm, stickyXMd, stickyXLg, stickyXXl, stickyY, stickyYSm, stickyYMd, stickyYLg, stickyYXl }) => {
    const theme = React__default.useContext(styled.ThemeContext).src;
    const [srcId] = React__default.useState(() => `src-${id}`);
    const [style, setStyle] = React__default.useState("");
    const el = React__default.useRef(null);
    React__default.useEffect(() => {
        if (id) {
            DOMHelper.DOMHelper.addEventListener(window, ["resize"], resize, true);
            resize();
            return () => {
                DOMHelper.DOMHelper.removeEventListener(window, ["resize"], resize, true);
            };
        }
    }, [id]);
    /**
     * Sets size style of the table.
     *
     * @param e
     */
    const resize = (e) => {
        if (!e || e.target == window || e.target == el.current) {
            let { x, y } = TableHelper.getBreakpointValue([stickyX, stickyXSm, stickyXMd, stickyXLg, stickyXXl], [stickyY, stickyYSm, stickyYMd, stickyYLg, stickyYXl], theme);
            let styleText = "";
            let left = 0;
            let leftZIndex = x + 1;
            let xEls = el.current.querySelectorAll("tr > *");
            for (let i = 0; i < x; i++) {
                styleText += `#${srcId} > table > * > tr > *:nth-of-type(${i + 1}) { left: ${left}px; z-index: ${leftZIndex--}; }`;
                left += xEls[i].offsetWidth;
            }
            let yEls = el.current.querySelectorAll("thead > tr");
            if (yEls.length > 0) {
                let topZIndex = (yEls[0].childNodes.length + 1) * y;
                for (let i = yEls.length - 1; i > yEls.length - 1 - y; i--) {
                    let top = yEls[i].offsetTop;
                    styleText += `#${srcId} > table > thead > tr:nth-of-type(${i + 1}) > th { top: ${top}px; }`;
                    for (let n = 0; n < yEls[i].childNodes.length; n++) {
                        styleText += `#${srcId} > table > thead > tr:nth-of-type(${i + 1}) > th:nth-of-type(${n + 1}) { z-index: ${topZIndex--}; }`;
                    }
                }
            }
            setStyle(styleText);
        }
    };
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement(ContainerElement, Object.assign({}, elementProps, { id: id ? srcId : null, ref: el }), children),
        (typeof window !== "undefined" && id) && reactDom.createPortal(React__default.createElement("style", null, style), document.head)));
};

module.exports = Container;