@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
84 lines (83 loc) • 4.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.baseClassName = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Flex_1 = require("../Flex");
const twMerge_1 = require("../../twMerge");
exports.baseClassName = 'ab-Panel';
const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-text-on-defaultbackground';
const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
if (!children) {
return null;
}
return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: (0, twMerge_1.twMerge)(`${exports.baseClassName}__header ${exports.baseClassName}__header--variant-${variant}`, className), ...flexProps }, children));
};
const Body = ({ children, bodyScroll, variant, className, style, }) => {
if (!children) {
return null;
}
if (bodyScroll === true) {
bodyScroll = 'auto';
}
const bodyCls = (0, clsx_1.default)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
'twa:bg-primarylight twa:text-text-on-primary twa:border-0': variant === 'modern',
}, className);
return (React.createElement(Flex_1.Box, { style: style, className: bodyCls }, children));
};
const PlainHeader = ({ children, className }) => {
return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-plain`, className) }, children));
};
const FlexBody = ({ children, className }) => {
return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(DEFAULT_BODY_CLS, `${exports.baseClassName}__body`, `${exports.baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className) }, children));
};
const Panel = (props) => {
const { border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
const style = {};
const headerStyle = {
border,
...(headerProps ? headerProps.style : null),
};
const bodyStyle = {
border,
...(bodyProps ? bodyProps.style : null),
};
const cls = (0, twMerge_1.twMerge)((0, clsx_1.default)(exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col'), className);
let headerCls = headerProps?.className;
if (cls.includes('twa:rounded-none')) {
headerCls = (0, twMerge_1.twMerge)(headerCls, 'twa:rounded-none');
}
let bodyCls = bodyProps?.className;
if (cls.includes('twa:rounded-none')) {
bodyCls = (0, twMerge_1.twMerge)(bodyCls, 'twa:rounded-none');
}
if (cls.includes('twa:border-none')) {
bodyCls = (0, twMerge_1.twMerge)(bodyCls, 'twa:border-none');
}
let childrenArr = React.Children.toArray(children);
let theBody;
let theHeader;
childrenArr.forEach((child) => {
if (React.isValidElement(child) && child.type === FlexBody) {
theBody = child;
}
else if (React.isValidElement(child) && child.type === PlainHeader) {
theHeader = child;
}
});
if (theHeader) {
childrenArr = childrenArr.filter((child) => child !== theHeader);
theHeader = (React.createElement(PlainHeader, { ...theHeader.props, className: (0, clsx_1.default)(headerCls, theHeader.props.className ?? '') }));
}
if (theBody) {
theBody = (React.createElement(FlexBody, { ...theBody.props, className: (0, clsx_1.default)(bodyCls, theBody.props.className ?? '') }));
}
return (React.createElement(Flex_1.Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls },
theHeader ?? (React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls }, header)),
theBody ??
(childrenArr.length > 0 ? (React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: (0, twMerge_1.twMerge)(bodyCls) }, childrenArr)) : null)));
};
Panel.PlainHeader = PlainHeader;
Panel.FlexBody = FlexBody;
exports.default = Panel;