@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
79 lines (78 loc) • 4.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cn } from '../../lib/utils';
import { Box, Flex } from '../Flex';
import { twMerge } from '../../twMerge';
export const baseClassName = 'ab-Panel';
const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-background twa:text-foreground';
const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
if (!children) {
return null;
}
return (_jsx(Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: twMerge(`${baseClassName}__header ${baseClassName}__header--variant-${variant}`, className), ...flexProps, children: children }));
};
const Body = ({ children, bodyScroll, variant, className, style, }) => {
if (!children) {
return null;
}
if (bodyScroll === true) {
bodyScroll = 'auto';
}
const bodyCls = cn(DEFAULT_BODY_CLS, `${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
'twa:bg-primarylight twa:text-primary-foreground twa:border-0': variant === 'modern',
}, className);
return (_jsx(Box, { style: style, className: bodyCls, children: children }));
};
const PlainHeader = ({ children, className }) => {
return (_jsx(Box, { className: cn(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className), children: children }));
};
const FlexBody = ({ children, className }) => {
return (_jsx(Box, { className: cn(DEFAULT_BODY_CLS, `${baseClassName}__body`, `${baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className), children: 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 = cn(baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col', className);
let headerCls = headerProps?.className;
if (cls.includes('twa:rounded-none')) {
headerCls = twMerge(headerCls, 'twa:rounded-none');
}
let bodyCls = bodyProps?.className;
if (cls.includes('twa:rounded-none')) {
bodyCls = twMerge(bodyCls, 'twa:rounded-none');
}
if (cls.includes('twa:border-none')) {
bodyCls = 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 = (_jsx(PlainHeader, { ...theHeader.props, className: cn(headerCls, theHeader.props.className ?? '') }));
}
if (theBody) {
theBody = (_jsx(FlexBody, { ...theBody.props, className: cn(bodyCls, theBody.props.className ?? '') }));
}
return (_jsxs(Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls, children: [theHeader ?? (_jsx(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls, children: header })), theBody ??
(childrenArr.length > 0 ? (_jsx(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: twMerge(bodyCls), children: childrenArr })) : null)] }));
};
Panel.PlainHeader = PlainHeader;
Panel.FlexBody = FlexBody;
export default Panel;