@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
57 lines (56 loc) • 3.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertViewPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
const AdaptablePopover_1 = require("../AdaptablePopover");
const rebass_1 = require("rebass");
const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
const getAlertButtonStyle_1 = require("./Utilities/getAlertButtonStyle");
const ActiveAlertsPanel_1 = require("./ActiveAlertsPanel");
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 messageType = UIHelper_1.default.getMessageTypeFromAdaptableAlerts(this.props.AdaptableAlerts);
const { color: buttonTextColor, background: buttonBackground } = (0, getAlertButtonStyle_1.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 = React.createElement(ActiveAlertsPanel_1.ActiveAlertsPanel, null);
const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__Alert__wrap` },
React.createElement(rebass_1.Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__Alert__text`, marginRight: 2, padding: 2, color: buttonTextColor, backgroundColor: buttonBackground, fontSize: 'var( --ab-font-size-2)', alignItems: "center" }, collapsedText),
this.props.AdaptableAlerts.length > 0 && (React.createElement(rebass_1.Flex, { alignItems: "center" },
React.createElement(AdaptablePopover_1.AdaptablePopover, { className: `ab-${elementType}__Alert__info`, headerText: "",
// tooltipText="Alerts"
bodyText: [alertsPanel], MessageType: messageType, 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)),
};
}
exports.AlertViewPanelControl = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(AlertViewPanelComponent);