@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
45 lines (44 loc) • 2.94 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import Panel from '../../../../components/Panel';
import { ButtonClose } from '../../Buttons/ButtonClose';
import { ButtonConfigure } from '../../Buttons/ButtonConfigure';
import { ButtonMinimise } from '../../Buttons/ButtonMinimise';
import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
import { twMerge } from '../../../../twMerge';
import { Flex } from '../../../../components/Flex';
export class PanelToolPanel extends React.Component {
static defaultProps = {
headerText: '',
onClose: null,
onConfigure: null,
onMinimiseChanged: null,
isMinimised: true,
};
render() {
const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
let header = (_jsxs(_Fragment, { children: [!isMinimised ? (_jsx(ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise twa:mr-1", onClick: () => onMinimiseChanged() })) : (_jsx(ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise twa:mr-1", onClick: () => onMinimiseChanged() })), _jsx(Flex, { className: "ab-ToolPanelPanel__header-text twa:flex-1 twa:ml-0", alignItems: "center", children: headerText }), onConfigure && (_jsx(ButtonConfigure, { iconSize: 16, className: "ab-ToolPanelPanel__header-configure-button twa:ml-1", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })), onClose && (_jsx(ButtonClose, { className: "ab-ToolPanelPanel__header-close-button twa:ml-0", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))] }));
return (_jsx(Panel, { ...props, className: twMerge('ab-ToolPanelPanel', props.className), header: header, style: {
...props.style,
}, headerProps: {
...props.headerProps,
alignItems: 'stretch',
className: twMerge('twa:border-none', props.headerProps?.className),
style: {
padding: 'var(--ab-cmp-toolpanelpanel_header__padding)',
background: 'var(--ab-cmp-toolpanelpanel_header__background)',
color: 'var(--ab-cmp-toolpanelpanel_header__color)',
fill: 'var(--ab-cmp-toolpanelpanel_header__fill)',
...(props.headerProps ? props.headerProps.style : null),
},
}, bodyProps: {
...props.bodyProps,
className: twMerge('twa:border-none twa:flex twa:flex-col', props.bodyProps?.className),
style: {
padding: 'var(--ab-cmp-dashboardpanel_body__padding)',
background: 'var(--ab-cmp-dashboardpanel_body__background)',
...(props.bodyProps ? props.bodyProps.style : null),
},
} }));
}
}