@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
111 lines (110 loc) • 7.18 kB
JavaScript
import * as React from 'react';
import { connect } from 'react-redux';
import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
import { PopupPanel } from '../Popups/AdaptablePopup/PopupPanel';
import Radio from '../../../components/Radio';
import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { ModuleValueSelector } from '../ModuleValueSelector';
import { Tabs } from '../../../components/Tabs';
export var ToolPanelConfigView;
(function (ToolPanelConfigView) {
ToolPanelConfigView["Buttons"] = "Buttons";
ToolPanelConfigView["ToolPanels"] = "ToolPanels";
})(ToolPanelConfigView || (ToolPanelConfigView = {}));
class ToolPanelPopupComponent extends React.Component {
constructor(props) {
super(props);
const initialTab = props.popupParams?.config?.initialTab ?? ToolPanelConfigView.ToolPanels;
this.state = {
ToolPanelConfigView: initialTab,
};
}
render() {
// 1. process module buttons
const selectedModuleButtons = [];
if (ArrayExtensions.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
this.props.ToolPanelState.ModuleButtons.forEach((module) => {
let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == module);
if (menuItem?.isVisible) {
selectedModuleButtons.push(module);
}
});
}
const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
// 2. process tool panels
const availableModules = this.props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
// 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
if (!this.props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
availableModules.push('Dashboard');
}
if (this.props.api.pluginsApi.getipushpullPluginApi() &&
!this.props.api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
availableModules.push('IPushPull');
}
if (this.props.api.pluginsApi.getOpenFinPluginApi() &&
!this.props.api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
availableModules.push('OpenFin');
}
const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
const availableCustomToolPanels = this.props.api.toolPanelApi
.getCustomToolPanels()
.map((customToolPanel) => customToolPanel.name);
const availableToolPanels = [
...availableCustomToolPanels,
...availableModuleToolPanels,
];
const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
// ensure that the visible state has only valid tool panels
.filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
const isToolPanelReadOnly = this.props.api.entitlementApi.isModuleReadOnlyEntitlement('ToolPanel');
const isModuleCheckboxDisabled = (module) => {
if (module === 'SettingsPanel') {
return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
}
return false;
};
return (React.createElement(PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
React.createElement(Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
React.createElement(Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
React.createElement(Radio, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
React.createElement(Tabs.Tab, { value: ToolPanelConfigView.Buttons },
React.createElement(Radio, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
React.createElement(Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
React.createElement(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible Tool Panels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
React.createElement(Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
React.createElement(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
}
onShowGridPropertiesChanged(event) {
let e = event.target;
let ToolPanelConfigView = e.value;
this.setState({
ToolPanelConfigView: ToolPanelConfigView,
});
}
onToolPanelToolPanelsChanged(selectedValues) {
const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
// try to return the pre-existing definition (to maintain the previous collapsed state)
// otherwise select the new toolPanel with the default 'collapsed' state
let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {
return (currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
Name: selectedToolPanel,
VisibilityMode: 'collapsed',
});
});
this.props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
}
}
function mapStateToProps(state) {
return {
ToolPanelState: state.ToolPanel,
InternalState: state.Internal,
};
}
function mapDispatchToProps(dispatch) {
return {
onToolPanelSetModuleButtons: (moduleButtons) => dispatch(ToolPanelRedux.ToolPanelSetModuleButtons(moduleButtons)),
onToolPanelSetToolPanels: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
};
}
export let ToolPanelPopup = connect(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);