@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
218 lines (217 loc) • 12.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { kebabCase } from '../../../Utilities/Extensions/StringExtensions';
import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
import { connect } from 'react-redux';
import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView } from '../AdaptableButton';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import { Icon } from '../../../components/icons';
import { CheckBox } from '../../../components/CheckBox';
import { NewDropdownButton } from '../../../components/DropdownButton';
import { ALL_TOOL_PANELS, } from '../../../AdaptableState/Common/Types';
import SimpleButton from '../../../components/SimpleButton';
import { ButtonConfigure } from '../Buttons/ButtonConfigure';
import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
import { ToolPanelWrapper } from './ToolPanelWrapper';
import { ToolPanelConfigView } from './ToolPanelPopup';
import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants';
import HelpBlock from '../../../components/HelpBlock';
import { Flex } from '../../../components/Flex';
const preventDefault = (e) => e.preventDefault();
const AdaptableToolPanelComponent = (props) => {
const toolPanelsGlyph = _jsx(Icon, { name: 'align-justify' });
const moduleService = props.api.internalApi.getModuleService();
const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
const toolPanelOptions = adaptableOptions.toolPanelOptions;
const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
if (props.api.entitlementApi.isModuleHiddenEntitlement('ToolPanel')) {
return _jsx(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3", children: "Not enough rights" });
}
const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
const availableModules = availableModuleItems.map((menuItem) => menuItem.category);
if (!props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
availableModules.push('Dashboard');
}
if (props.api.pluginsApi.getipushpullPluginApi() &&
!props.api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
availableModules.push('IPushPull');
}
if (props.api.pluginsApi.getOpenFinPluginApi() &&
!props.api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
availableModules.push('OpenFin');
}
const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
const onStateChange = (toolPanel, visibilityMode) => {
if (visibilityMode === 'expanded') {
props.onExpandToolPanel(toolPanel);
}
else {
props.onCollapseToolPanel(toolPanel);
}
};
const isToolPanelModuleConfigurable = props.api.internalApi
.getModuleService()
.getModuleById(ToolPanelModuleId)
.isModuleEditable();
const visibleToolPanels = [];
const visibleToolPanelControls = (props.ToolPanels ?? []).map((toolPanelDefinition) => {
const visibilityMode = toolPanelDefinition.VisibilityMode ?? 'collapsed';
const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
if (customToolPanel) {
visibleToolPanels.push(customToolPanel.name);
return (_jsx(ToolPanelWrapper, { customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }, customToolPanel.name));
}
if (availableModuleToolPanels.some((module) => module === toolPanelDefinition.Name)) {
const moduleToolPanel = toolPanelDefinition.Name;
visibleToolPanels.push(moduleToolPanel);
return (_jsx(ToolPanelWrapper, { adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }, moduleToolPanel));
}
});
const renderToolPanelDropdowns = () => {
if (!toolPanelOptions.showToolPanelsDropdown) {
return;
}
let toolpanelItems = [
{
closeOnClick: false,
tooltip: 'Tool Panels',
label: (_jsxs("div", { children: [_jsx("span", { className: "twa:font-bold", children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
},
];
const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
const buildDropdownButtonItem = (toolPanel, label, isVisible) => {
return {
dataName: String(toolPanel),
closeOnClick: false,
onClick: () => {
onSetToolPanelVisibility(toolPanel, !isVisible);
},
tooltip: label,
label: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
};
};
props.api.toolPanelApi.getCustomToolPanels().forEach((customToolPanel) => {
const customToolPanelName = customToolPanel.name;
toolpanelItems.push(buildDropdownButtonItem(customToolPanelName, customToolPanelName, isItemVisible(customToolPanelName)));
});
availableModuleToolPanels.forEach((toolPanel) => {
let moduleName = moduleService.getModuleInfoByModule(toolPanel).FriendlyName;
toolpanelItems.push(buildDropdownButtonItem(toolPanel, moduleName, isItemVisible(toolPanel)));
});
toolpanelItems.sort((first, second) => {
if (first.label < second.label) {
return -1;
}
if (first.label > second.label) {
return 1;
}
return 0;
});
return (_jsx(NewDropdownButton, { variant: "text", tone: "none", id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", items: toolpanelItems, tooltip: "Manage Tool Panels", extraWidthChars: 5, children: toolPanelsGlyph }, 'dropdown-toolpanels'));
};
const renderToolPanelButtons = () => {
const toolPanelButtons = [];
let moduleButtons = props.ModuleButtons;
const shouldAddSettingsPanel = settingsPanelOptions.alwaysShowInToolPanel &&
!props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
if (shouldAddSettingsPanel && !moduleButtons.includes('SettingsPanel')) {
moduleButtons = ['SettingsPanel', ...moduleButtons];
}
if (moduleButtons?.length) {
toolPanelButtons.push(moduleButtons.map((x) => {
let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.category == x);
if (menuItem) {
return (_jsx(SimpleButton, { "data-name": menuItem.category, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL }, menuItem.label));
}
}));
}
return toolPanelButtons;
};
const renderCustomToolPanelButtons = () => {
return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
const toolPanelContext = {
...props.api.internalApi.buildBaseContext(),
toolPanelState: props.api.toolPanelApi.getToolPanelState(),
};
const buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
return (_jsx(AdaptableButtonView, { button: button, context: toolPanelContext, api: props.api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.toolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)}` }, buttonLabel || button.Uuid));
});
};
const onSetToolPanelVisibility = (name, checked) => {
if (checked) {
props.onShowToolPanel(name);
}
else {
props.onHideToolPanel(name);
}
};
const renderToolPanelConfigureButton = (initialTab) => {
const moduleParams = initialTab
? { source: 'Other', config: { initialTab } }
: undefined;
return (_jsx(ButtonConfigure, { iconSize: 16, tone: "none", className: "ab-ToolPanel__configure-button twa:ml-2", tooltip: 'Configure ToolPanels', onClick: () => {
props.api.internalApi.showSettingsPanel('ToolPanel', moduleParams);
} }));
};
const toolPanelButtons = renderToolPanelButtons();
return (_jsxs(Flex, { className: "ab-ToolPanel twa:p-2 twa:w-full", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", children: [_jsxs(Flex, { className: "ab-ToolPanel__header twa:p-1 twa:w-full twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: [isToolPanelModuleConfigurable && renderToolPanelDropdowns(), toolPanelButtons, isToolPanelModuleConfigurable && renderToolPanelConfigureButton()] }), Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (_jsx(Flex, { className: "ab-ToolPanel__header__buttons twa:p-1 twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: renderCustomToolPanelButtons() })), visibleToolPanelControls] }));
};
function mapStateToProps(state) {
return {
ToolPanels: state.ToolPanel.ToolPanels,
ModuleButtons: state.ToolPanel.ModuleButtons,
MainMenuItems: state.Internal.SettingsPanelModuleEntries,
Columns: state.Internal.Columns,
};
}
function mapDispatchToProps(dispatch) {
return {
onClick: (action) => dispatch(action),
onSetToolPanelVisibility: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
onShowToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelShowToolPanel(toolPanel)),
onHideToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelHideToolPanel(toolPanel)),
onExpandToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelExpandToolPanel(toolPanel)),
onCollapseToolPanel: (toolPanel) => dispatch(ToolPanelRedux.ToolPanelCollapseToolPanel(toolPanel)),
};
}
export const ConnectedAdaptableToolPanel = connect(mapStateToProps, mapDispatchToProps)(AdaptableToolPanelComponent);
const toolPanelContainerStyle = {
width: '100%',
overflow: 'auto',
};
export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
function getContainerId() {
return 'adaptable-tool-panel_' + adaptable.adaptableOptions.adaptableId;
}
if (adaptable.variant === 'react') {
return () => {
const content = renderWithAdaptableContext(_jsx(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
return (_jsx("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle, children: content }));
};
}
return class AdaptableToolPanelAgGridComponent {
gui;
unmountReactRoot;
init(params) {
const api = adaptable.api;
this.gui = document.createElement('div');
this.gui.id = getContainerId();
this.gui.className = 'ag-adaptable-panel';
Object.keys(toolPanelContainerStyle).forEach((key) => {
this.gui.style[key] = toolPanelContainerStyle[key];
});
this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(_jsx(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
}
getGui() {
if (!this.gui) {
this.init();
}
return this.gui;
}
refresh() {
}
destroy() {
this.unmountReactRoot?.();
}
};
};