@nodeject/ui-components/cjs/schedio-layout/Layout.js

UI library for non-trivial components

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SiteLayout = exports.Layout = void 0;
var classcat_1 = require("classcat");
var React = require("react");
var react_1 = require("react");
var react_div_100vh_1 = require("react-div-100vh");
var content_1 = require("./content");
var footer_1 = require("./footer");
var header_1 = require("./header");
var sider_1 = require("./sider");
var types_1 = require("./types");
var styles = require("./Layout.module.less");
var LayoutContext = React.createContext(null);
var LayoutInner = function (props) {
    var _a;
    var _b, _c, _d, _e;
    var _f = react_1.useState('a'), activeTab = _f[0], setActiveTab = _f[1];
    var childrenTypes = React.Children.map(props.children, function (child) {
        var _a, _b, _c;
        return {
            displayName: (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName,
            fixed: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.fixed,
            side: (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.side
        };
    });
    var isHeaderFixed = (_b = childrenTypes.find(function (c) { return c.displayName === types_1.displayNames.header; })) === null || _b === void 0 ? void 0 : _b.fixed;
    var isSiderLeftFixed = (_c = childrenTypes.find(function (c) { return c.displayName === types_1.displayNames.sider && c.side === 'left'; })) === null || _c === void 0 ? void 0 : _c.fixed;
    var isSiderRightFixed = (_d = childrenTypes.find(function (c) { return c.displayName === types_1.displayNames.sider && c.side === 'right'; })) === null || _d === void 0 ? void 0 : _d.fixed;
    var isFooterFixed = (_e = childrenTypes.find(function (c) { return c.displayName === types_1.displayNames.footer; })) === null || _e === void 0 ? void 0 : _e.fixed;
    // Checks if children have a valid displayName
    React.Children.map(props.children, function (child) {
        var _a;
        var displayName = (_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName;
        if (displayName !== types_1.displayNames.content &&
            displayName !== types_1.displayNames.footer &&
            displayName !== types_1.displayNames.header &&
            displayName !== types_1.displayNames.layout &&
            displayName !== types_1.displayNames.sider) {
            console.log("@nodeject/ui-components: you passed a React component as a child inside Layout.\n                        You can only pass a child with a displayName of\n                        'SchedioLayoutContent',\n                        'SchedioLayoutFooter',\n                        'SchedioLayoutHeader',\n                        'SchedioLayout',\n                        'SchedioLayoutSider'");
        }
    });
    var header = React.Children.map(props.children, function (child) {
        var _a;
        if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === types_1.displayNames.header) {
            return child;
        }
        else {
            return null;
        }
    });
    var siderLeft = React.Children.map(props.children, function (child) {
        var _a;
        if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === types_1.displayNames.sider &&
            child.props.side === 'left') {
            return child;
        }
        else {
            return null;
        }
    });
    var siderRight = React.Children.map(props.children, function (child) {
        var _a;
        if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === types_1.displayNames.sider &&
            child.props.side === 'right') {
            return child;
        }
        else {
            return null;
        }
    });
    var main = React.Children.map(props.children, function (child) {
        var _a, _b, _c;
        if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) ===
            types_1.displayNames.footer &&
            !isFooterFixed) {
            return child;
        }
        if (((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.displayName) === types_1.displayNames.sider &&
            !child.props.fixed) {
            return child;
        }
        if (((_c = child === null || child === void 0 ? void 0 : child.type) === null || _c === void 0 ? void 0 : _c.displayName) === types_1.displayNames.content) {
            return child;
        }
        return null;
        // if ((child?.type as React.FC)?.displayName === displayNames.layout) {
        //     return child.props.children
        // }
    });
    var footer = React.Children.map(props.children, function (child) {
        var _a;
        if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === types_1.displayNames.footer) {
            return child;
        }
        else {
            return null;
        }
    });
    var memoizedContextValue = React.useMemo(function () { return ({
        activeTab: activeTab,
        setActiveTab: setActiveTab
    }); }, [activeTab, setActiveTab]);
    var mainClassName = React.useMemo(function () {
        var siders = childrenTypes.filter(function (c) { return c.displayName === types_1.displayNames.sider; });
        var layoutClass;
        if (siders.length === 0) {
            layoutClass = styles.mainNoSider;
        }
        else if (siders.length === 1) {
            layoutClass =
                siders[0].side === 'left'
                    ? styles.mainLeftSider
                    : styles.mainRightSider;
        }
        else {
            layoutClass = styles.mainBothSider;
        }
        return layoutClass + " " + styles.main + " " + (isHeaderFixed || isFooterFixed ? styles.overflow : styles.noOverflow);
    }, [props.className, JSON.stringify(childrenTypes)]);
    var layoutClassName;
    if (isFooterFixed === undefined &&
        !isSiderLeftFixed &&
        isSiderRightFixed === undefined) {
        layoutClassName = styles.fixedFooterLeftRightSider;
    }
    else if (!isFooterFixed &&
        isSiderLeftFixed === undefined &&
        isSiderRightFixed === undefined) {
        layoutClassName = styles.schedioLayout;
    }
    else if (isFooterFixed && isSiderLeftFixed && isSiderRightFixed) {
        layoutClassName = styles.fixedFooterLeftRightSider;
    }
    else if (!isFooterFixed && isSiderLeftFixed && isSiderRightFixed) {
        layoutClassName = styles.fixedLeftRightSider;
    }
    else if (!isFooterFixed && !isSiderLeftFixed && isSiderRightFixed) {
        layoutClassName = styles.fixedRightSider;
    }
    else if (!isFooterFixed && isSiderLeftFixed && !isSiderRightFixed) {
        layoutClassName = styles.fixedLeftSider;
    }
    else if (isFooterFixed && !isSiderLeftFixed && isSiderRightFixed) {
        layoutClassName = styles.fixedFooterRightSider;
    }
    else if (isFooterFixed && isSiderLeftFixed && !isSiderRightFixed) {
        layoutClassName = styles.fixedFooterLeftSider;
    }
    else if (isFooterFixed && !isSiderLeftFixed && !isSiderRightFixed) {
        layoutClassName = styles.fixedFooter;
    }
    // className={styles.alert}
    return (React.createElement(LayoutContext.Provider, { value: memoizedContextValue },
        React.createElement("section", { className: classcat_1.default((_a = {
                    schedioLayout: true
                },
                _a[styles.fullSiteHeight] = Boolean(props.fullSiteHeight),
                _a[styles.containerSiteHeight] = !Boolean(props.fullSiteHeight),
                _a[layoutClassName] = true,
                _a[props.className] = Boolean(props.className),
                _a)), style: props.style },
            props.fullSiteHeight && props.alert // Adds grid-area to Alert component
                ? React.cloneElement(props.alert, {
                    className: styles.alert
                })
                : null,
            header,
            isSiderLeftFixed ? siderLeft : null,
            React.createElement("div", { className: mainClassName }, main),
            isSiderRightFixed ? siderRight : null,
            isFooterFixed ? footer : null)));
};
LayoutInner.Content = content_1.Content;
LayoutInner.Footer = footer_1.Footer;
LayoutInner.Header = header_1.Header;
LayoutInner.Sider = sider_1.Sider;
var SiteLayout = function (props) {
    return (React.createElement(react_div_100vh_1.default, null,
        React.createElement(LayoutInner, __assign({}, props, { fullSiteHeight: true }))));
};
exports.SiteLayout = SiteLayout;
SiteLayout.Content = content_1.Content;
SiteLayout.Footer = footer_1.Footer;
SiteLayout.Header = header_1.Header;
SiteLayout.Sider = sider_1.Sider;
SiteLayout.displayName = 'SchedioSiteLayout';
var Layout = function (props) {
    return React.createElement(LayoutInner, __assign({}, props, { fullSiteHeight: false, alert: null }));
};
exports.Layout = Layout;
Layout.Content = content_1.Content;
Layout.Footer = footer_1.Footer;
Layout.Header = header_1.Header;
Layout.Sider = sider_1.Sider;
Layout.displayName = 'SchedioLayout';