@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
84 lines (83 loc) • 4.47 kB
JavaScript
import * as React from 'react';
import { useMemo } from 'react';
import { Box, Flex } from 'rebass';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import Input from '../../../components/Input';
import ErrorBox from '../../../components/ErrorBox';
import { Tabs } from '../../../components/Tabs';
import { ValueOptionsTags } from '../../Components/ValueSelector';
import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
import { getCalculatedColumnSettingsTags } from '../Utilities/getCalculatedColumnSettingsTags';
import { Select } from '../../../components/Select';
export const renderCalculatedColumnSettingsSummary = (data) => {
const options = getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
return (React.createElement(Box, { fontSize: 2 },
React.createElement(ValueOptionsTags, { toLabel: (x) => x, toIdentifier: (c) => c, readOnly: true, options: options, value: options })));
};
export const isValidCalculatedColumnSettings = (data) => {
if (!data.CalculatedColumnSettings?.DataType) {
return 'No data type is specified and it could not be inferred from the defined expression';
}
return true;
};
export const CalculatedColumnSettingsWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const calculatedColumnExpressionService = useMemo(() => api.internalApi.getCalculatedColumnExpressionService(), []);
const handleDataTypeChange = (dataType) => {
const aggregatable = dataType == 'number' ? data.CalculatedColumnSettings?.Aggregatable : false;
props.onChange({
...data,
CalculatedColumnSettings: {
...data.CalculatedColumnSettings,
DataType: dataType,
Aggregatable: aggregatable,
},
});
};
const validCheck = isValidCalculatedColumnSettings(data);
const ErrorMessage = validCheck === true ? null : validCheck;
const { DataType: dataType } = data.CalculatedColumnSettings ?? {};
const { Width } = data.CalculatedColumnSettings ?? {};
const handleSpecialColumnSettingsChange = (settings) => {
props.onChange({
...data,
CalculatedColumnSettings: {
...data.CalculatedColumnSettings,
...settings,
},
});
};
React.useEffect(() => {
if (!dataType) {
const computedDataType = calculatedColumnExpressionService.getCalculatedColumnDataType(data.Query);
handleSpecialColumnSettingsChange({
...data?.CalculatedColumnSettings,
DataType: computedDataType,
});
}
}, []);
const options = [
{ value: 'number', label: 'Number' },
{ value: 'text', label: 'Text' },
{ value: 'date', label: 'Date' },
{ value: 'boolean', label: 'Boolean' },
{ value: 'numberArray', label: 'NumberArray' },
];
return (React.createElement(Box, { "data-name": 'calculated-column-settings' },
React.createElement(Tabs, { autoFocus: false },
React.createElement(Tabs.Tab, null, "Column Settings"),
React.createElement(Tabs.Content, null,
React.createElement(Flex, { flexDirection: "row" },
React.createElement(FormLayout, null,
React.createElement(FormRow, { label: "Data Type" },
React.createElement(Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
React.createElement(FormRow, { label: "Width" },
React.createElement(Input, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
Width: Number(e.target.value),
}) })))))),
ErrorMessage ? React.createElement(ErrorBox, { marginTop: 2 }, ErrorMessage) : null,
React.createElement(SpecialColumnSettingsWizardStep, { isEditable: false,
// @ts-ignore CalculatedColumn has a broader DataType
settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
};