@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
115 lines (114 loc) • 7.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolPanelPopup = exports.ToolPanelConfigView = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
const Types_1 = require("../../../AdaptableState/Common/Types");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
const ModuleValueSelector_1 = require("../ModuleValueSelector");
const Tabs_1 = require("../../../components/Tabs");
var ToolPanelConfigView;
(function (ToolPanelConfigView) {
ToolPanelConfigView["Buttons"] = "Buttons";
ToolPanelConfigView["ToolPanels"] = "ToolPanels";
})(ToolPanelConfigView || (exports.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_1.default.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 = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.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_1.PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible Tool Panels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
React.createElement(ModuleValueSelector_1.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)),
};
}
exports.ToolPanelPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);