@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
53 lines (52 loc) • 3.32 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cn } from '../../lib/utils';
import { connect } from 'react-redux';
import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
import { AdaptablePopover } from '../AdaptablePopover';
import { getAlertButtonStyle } from './Utilities/getAlertButtonStyle';
import { ActiveAlertsPanel } from './ActiveAlertsPanel';
import { Flex } from '../../components/Flex';
import { ButtonClear } from '../Components/Buttons/ButtonClear';
class AlertViewPanelComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
ShowMessage: false,
Alerts: this.props.AdaptableAlerts,
};
}
componentDidUpdate() {
if (this.state.Alerts.length != this.props.AdaptableAlerts.length) {
this.setState({ ShowMessage: true, Alerts: this.props.AdaptableAlerts });
}
}
render() {
const { color: buttonTextColor, background: buttonBackground } = getAlertButtonStyle(this.props.AdaptableAlerts);
const collapsedText = this.props.AdaptableAlerts.length == 0
? '0 Alerts'
: this.props.AdaptableAlerts.length == 1
? '1 Alert'
: this.props.AdaptableAlerts.length + ' Alerts';
const alertsPanel = _jsx(ActiveAlertsPanel, {});
const isToolbar = this.props.viewType === 'Toolbar';
const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
return (_jsxs(Flex, { alignItems: "stretch", className: cn(`ab-${elementType}__Alert__wrap twa:gap-1`, {
'twa:min-w-[140px] twa:w-[140px]': isToolbar,
[`twa:flex-1`]: !isToolbar,
}), children: [_jsx(Flex, { className: `ab-${elementType}__Alert__text twa:flex-1 twa:rounded-standard twa:p-2 text-2 twa:items-center twa:justify-center twa:min-h-input`, style: { color: buttonTextColor, backgroundColor: buttonBackground }, children: collapsedText }, `${buttonTextColor}_${buttonBackground}_${collapsedText}`), this.props.AdaptableAlerts.length > 0 && (_jsxs(Flex, { className: 'twa:gap-1', children: [_jsx(Flex, { className: "twa:flex twa:box-border", children: _jsx(ButtonClear, { "aria-label": 'Clear All Alerts', variant: 'outlined', className: `ab-${elementType}__Alert__clear`, onClick: () => this.props.onDeleteAllAlert(this.state.Alerts), tooltip: "Clear All Alerts", showText: this.props.viewType === 'ToolPanel', children: 'Clear Alerts' }) }), _jsx(AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "Alerts Details", bodyText: [alertsPanel], MessageType: 'Info', useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })] }))] }));
}
}
function mapStateToProps(state, ownProps) {
return {
AlertDefinitions: state.Alert.AlertDefinitions,
AdaptableAlerts: state.Internal.AdaptableAlerts,
};
}
function mapDispatchToProps(dispatch) {
return {
onDeleteAlert: (alert) => dispatch(InternalRedux.AdaptableAlertDelete(alert)),
onDeleteAllAlert: (alerts) => dispatch(InternalRedux.AdaptableAlertDeleteAll(alerts)),
};
}
export const AlertViewPanelControl = connect(mapStateToProps, mapDispatchToProps)(AlertViewPanelComponent);