@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
99 lines (98 loc) • 5.83 kB
JavaScript
import * as React from 'react';
import { useEffect, useState } from 'react';
import { PanelWithButton } from '../../Components/Panels/PanelWithButton';
import { ButtonMinimise } from '../../Components/Buttons/ButtonMinimise';
import { ButtonMaximise } from '../../Components/Buttons/ButtonMaximise';
import { AdaptableObjectCollection } from '../../Components/AdaptableObjectCollection';
import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
import { AdaptablePopover } from '../../AdaptablePopover';
import { Box } from 'rebass';
export const AdaptableOptionsComponent = (props) => {
const { api } = props;
const getAdaptableOptionsColItems = () => [
{ Content: 'Property', Size: 5 },
{ Content: 'Value', Size: 5 },
{ Content: '', Size: 2 },
];
const formatOptionValue = (optionValue) => {
if (optionValue == undefined || optionValue == null) {
return 'None';
}
const optionValueType = typeof optionValue;
switch (optionValueType) {
case 'string':
case 'number':
case 'bigint':
return optionValue;
case 'boolean':
return optionValue ? 'True' : 'False';
case 'function':
return 'Function';
case 'object':
if (Array.isArray(optionValue)) {
return `[${optionValue
.map((optionValueItem) => formatOptionValue(optionValueItem))
.join(', ')}]`;
}
if (optionValue instanceof HTMLElement) {
return 'HTMLElement';
}
default:
// should never happen, but just in case, to avoid a react runtime error
return 'Complex value';
}
};
const buildGridInfoOptionEntry = (gridInfoOption) => {
const colItems = getAdaptableOptionsColItems();
colItems[0].Content = gridInfoOption.name;
const formattedOptionValue = formatOptionValue(gridInfoOption.value);
const isUserDefinedValue = gridInfoOption.value !== gridInfoOption.defaultValue;
colItems[1].Content = isUserDefinedValue ? (React.createElement(React.Fragment, null,
React.createElement("span", { style: { fontWeight: 'bold' } }, formattedOptionValue),
React.createElement("span", { style: { fontStyle: 'italic' } },
' ',
"(Default: ",
formatOptionValue(gridInfoOption.defaultValue),
")"))) : (formattedOptionValue);
let infoButton = React.createElement(AdaptablePopover, { headerText: null, bodyText: [gridInfoOption.description] });
colItems[2].Content = infoButton;
return colItems;
};
const buildGridInfoOptionComponentContainer = (containerContainerName, gridInfoOptionContainer) => {
const gridInfoOptionComponents = gridInfoOptionContainer.items.map((gridInfoOption) => {
const gridOptionColItems = buildGridInfoOptionEntry(gridInfoOption);
return React.createElement(AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
});
return (React.createElement(AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
};
const [gridInfoOptions, setGridInfoOptions] = useState();
const [gridInfoContainerComponents, setGridInfoContainerComponents] = useState();
useEffect(() => {
const gridInfoOptions = api.internalApi.getMetamodelService().getGridInfoOptions();
const gridInfoContainerComponentMap = new Map();
gridInfoOptions.forEach((gridInfoOptionContainer, containerName) => {
gridInfoContainerComponentMap.set(containerName, buildGridInfoOptionComponentContainer(containerName, gridInfoOptionContainer));
});
setGridInfoContainerComponents(gridInfoContainerComponentMap);
setGridInfoOptions(gridInfoOptions);
}, []);
const [expandedComponentContainer, setExpandedComponentContainer] = useState('');
return (React.createElement(Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
};
const OptionContainerComponent = (props) => {
const { viewMode, name, label, onViewModeChange, children } = props;
const requestViewModeChange = () => {
onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
};
const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
return (React.createElement(PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
fontSize: 3,
style: {
fontWeight: viewMode === 'expanded' ? 800 : 400,
cursor: 'pointer',
},
'data-name': `options-container-header-${name}`,
onClick: () => requestViewModeChange(),
}, button: panelButton, style: { marginBottom: 3 } }, viewMode === 'expanded' && children));
};