@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
92 lines (91 loc) • 7.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Input from '../../../components/Input';
import Radio, { RadioGroup } from '../../../components/Radio';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import AdaptableInput from '../../Components/AdaptableInput';
import { CheckBox } from '../../../components/CheckBox';
import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
import { Tag } from '../../../components/Tag';
import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
import { Box, Flex } from '../../../components/Flex';
import { SingleSelect } from '../../../components/NewSelect';
import { Card } from '../../../components/Card';
import { getFreeTextColumnSettingsTags } from '../Utilities/getFreeTextColumnSettingsTags';
import { SummaryText } from '../../Wizard/OnePageAdaptableWizard';
const dataTypeOptions = [
{ value: 'number', label: 'Number' },
{ value: 'text', label: 'Text' },
{ value: 'date', label: 'Date' },
{ value: 'boolean', label: 'Boolean' },
];
export const renderFreeTextColumnSettingsSummary = (data) => {
const propertyTags = getFreeTextColumnSettingsTags(data.FreeTextColumnSettings);
return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Data Type: ", _jsx(Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? (_jsxs(SummaryText, { children: ["Default Value: ", _jsx(Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? (_jsxs(SummaryText, { children: ["Editor Type: ", _jsx(Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? (_jsxs(SummaryText, { children: ["Properties:", ' ', propertyTags.map((tag, index) => (_jsx(Tag, { className: index > 0 ? 'twa:ml-1' : undefined, children: tag }, String(tag))))] })) : null] }));
};
export const isValidFreeTextColumnSettings = (data) => {
if (!data.FreeTextColumnSettings?.DataType) {
return 'A data type is required for the column';
}
return true;
};
export const FreeTextColumnSettingsWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
const handleDataTypeChange = (DataType) => {
const newData = {
...data,
FreeTextColumnSettings: {
...data.FreeTextColumnSettings,
DataType,
},
};
delete newData.DefaultValue;
if (!DataType) {
delete newData.FreeTextColumnSettings?.DataType;
}
props.onChange(newData);
};
const handleDefaultValueChange = (event) => {
let e = event.target;
let DefaultValue = e.value;
if (data.FreeTextColumnSettings.DataType === 'date') {
DefaultValue = DateFormatter(DefaultValue, {
Pattern,
});
}
props.onChange({
...data,
DefaultValue,
});
};
const handleSpecialColumnSettingsChange = (settings) => {
props.onChange({
...data,
FreeTextColumnSettings: {
...data?.FreeTextColumnSettings,
...settings,
},
});
};
const { Width } = data.FreeTextColumnSettings ?? {};
return (_jsx(Box, { "data-name": "free-text-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Data Type" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for values entered in this column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "column-type-dropdown", className: "twa:max-w-[300px]", items: dataTypeOptions, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Default Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional initial value for each cell in the column" })] }), _jsx(Card.Body, { children: data.FreeTextColumnSettings.DataType === 'boolean' ? (_jsx(CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
props.onChange({
...data,
DefaultValue,
});
} })) : (_jsx(AdaptableInput, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
? parseToISO(data.DefaultValue, Pattern) || ''
: data.DefaultValue || '', className: "twa:max-w-[500px] twa:w-full", type: data.FreeTextColumnSettings.DataType === 'number'
? 'number'
: data.FreeTextColumnSettings.DataType === 'date'
? 'date'
: 'text', placeholder: "Enter a default value (optional)", onChange: handleDefaultValueChange })) })] }), data.FreeTextColumnSettings.DataType === 'text' ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Editor" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how text values are edited in the grid" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.TextEditor ?? 'Inline', name: "textEditor", orientation: "horizontal", onRadioChange: (TextEditor) => {
props.onChange({
...data,
TextEditor,
});
}, children: [_jsx(Radio, { className: "twa:ml-1", "data-name": "inline-editor", value: "Inline", children: "Inline Editor" }), _jsx(Radio, { className: "twa:ml-4", "data-name": "large-editor", value: "Large", children: "Large Editor" })] }) })] })) : null, _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Width" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional column width in pixels" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
Width: Number(e.target.value),
}) }) })] }), _jsx(SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
};