@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
104 lines (103 loc) • 6.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptableOptionsComponent = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const PanelWithButton_1 = require("../../Components/Panels/PanelWithButton");
const ButtonMinimise_1 = require("../../Components/Buttons/ButtonMinimise");
const ButtonMaximise_1 = require("../../Components/Buttons/ButtonMaximise");
const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
const AdaptablePopover_1 = require("../../AdaptablePopover");
const rebass_1 = require("rebass");
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_1.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_1.AdaptableObjectRow, { key: `${gridInfoOption.name}`, colItems: gridOptionColItems });
});
return (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: getAdaptableOptionsColItems(), items: gridInfoOptionComponents }));
};
const [gridInfoOptions, setGridInfoOptions] = (0, react_1.useState)();
const [gridInfoContainerComponents, setGridInfoContainerComponents] = (0, react_1.useState)();
(0, react_1.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] = (0, react_1.useState)('');
return (React.createElement(rebass_1.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))))));
};
exports.AdaptableOptionsComponent = AdaptableOptionsComponent;
const OptionContainerComponent = (props) => {
const { viewMode, name, label, onViewModeChange, children } = props;
const requestViewModeChange = () => {
onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
};
const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
return (React.createElement(PanelWithButton_1.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));
};