@nodeject/ui-components
Version:
UI library for non-trivial components
204 lines (203 loc) • 9.66 kB
JavaScript
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);
};
import cc from 'classcat';
import * as React from 'react';
import { useState } from 'react';
import Div100vh from 'react-div-100vh';
import { Content } from './content';
import { Footer } from './footer';
import { Header } from './header';
import { Sider } from './sider';
import { displayNames } from './types';
import * as styles from './Layout.module.less';
var LayoutContext = React.createContext(null);
var LayoutInner = function (props) {
var _a;
var _b, _c, _d, _e;
var _f = 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 === displayNames.header; })) === null || _b === void 0 ? void 0 : _b.fixed;
var isSiderLeftFixed = (_c = childrenTypes.find(function (c) { return c.displayName === displayNames.sider && c.side === 'left'; })) === null || _c === void 0 ? void 0 : _c.fixed;
var isSiderRightFixed = (_d = childrenTypes.find(function (c) { return c.displayName === displayNames.sider && c.side === 'right'; })) === null || _d === void 0 ? void 0 : _d.fixed;
var isFooterFixed = (_e = childrenTypes.find(function (c) { return c.displayName === 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 !== displayNames.content &&
displayName !== displayNames.footer &&
displayName !== displayNames.header &&
displayName !== displayNames.layout &&
displayName !== 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) === 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) === 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) === 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) ===
displayNames.footer &&
!isFooterFixed) {
return child;
}
if (((_b = child === null || child === void 0 ? void 0 : child.type) === null || _b === void 0 ? void 0 : _b.displayName) === 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) === 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) === 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 === 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: cc((_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;
LayoutInner.Footer = Footer;
LayoutInner.Header = Header;
LayoutInner.Sider = Sider;
var SiteLayout = function (props) {
return (React.createElement(Div100vh, null,
React.createElement(LayoutInner, __assign({}, props, { fullSiteHeight: true }))));
};
SiteLayout.Content = Content;
SiteLayout.Footer = Footer;
SiteLayout.Header = Header;
SiteLayout.Sider = Sider;
SiteLayout.displayName = 'SchedioSiteLayout';
var Layout = function (props) {
return React.createElement(LayoutInner, __assign({}, props, { fullSiteHeight: false, alert: null }));
};
Layout.Content = Content;
Layout.Footer = Footer;
Layout.Header = Header;
Layout.Sider = Sider;
Layout.displayName = 'SchedioLayout';
export { Layout, SiteLayout };