@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.68 kB
JavaScript
import * as React from 'react';
import { useState } from 'react';
import { Box, Flex } from 'rebass';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import Input from '../../../components/Input';
import { CheckBox } from '../../../components/CheckBox';
import ErrorBox from '../../../components/ErrorBox';
import { Tabs } from '../../../components/Tabs';
import { Tag } from '../../../components/Tag';
export const renderCalculatedColumnDefinitionSummary = (data) => {
return (React.createElement(Box, { fontSize: 2 },
React.createElement(Box, null,
"Column Identifier: ",
React.createElement(Tag, null, data.ColumnId)),
data.FriendlyName ? (React.createElement(Box, { mt: 3 },
"Column Name: ",
React.createElement(Tag, null, data.FriendlyName ?? data.ColumnId))) : null));
};
export const isValidCalculatedColumnDefinition = (data, api) => {
const columns = api.columnApi.getColumns();
if (!data.ColumnId) {
return 'Column Id cannot be empty';
}
const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
};
export const CalculatedColumnDefinitionWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const handleColumnIdChange = (event) => {
let e = event.target;
props.onChange({
...data,
ColumnId: e.value,
});
};
const handleColumnNameChange = (event) => {
let e = event.target;
props.onChange({
...data,
FriendlyName: e.value,
});
};
const inEdit = props.isEdit;
const validCheck = isValidCalculatedColumnDefinition(data, api);
const ErrorMessage = validCheck === true ? null : validCheck;
const [ColumnNameFocused, setColumnNameFocused] = useState(false);
const ColumnName = data.FriendlyName;
const ColumnId = data.ColumnId;
const { ShowToolTip, HeaderToolTip } = data.CalculatedColumnSettings ?? {};
const handleSpecialColumnSettingsChange = (settings) => {
props.onChange({
...data,
CalculatedColumnSettings: {
...data.CalculatedColumnSettings,
...settings,
},
});
};
return (React.createElement(Box, { "data-name": 'calculated-column-definition' },
React.createElement(Tabs, { autoFocus: false },
React.createElement(Tabs.Tab, null, "Column Details"),
React.createElement(Tabs.Content, null,
React.createElement(Flex, { flexDirection: "row" },
React.createElement(FormLayout, null,
React.createElement(FormRow, { label: "Column Id" },
React.createElement(Input, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
React.createElement(FormRow, { label: "Name" },
React.createElement(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
setColumnNameFocused(true);
}, onBlur: () => {
setColumnNameFocused(false);
}, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', width: 300, type: "text", placeholder: "Enter column name", onChange: handleColumnNameChange })),
React.createElement(FormRow, { label: "Header Tooltip" },
React.createElement(Input, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
HeaderToolTip: e.target.value,
}) })),
' ',
React.createElement(FormRow, { label: "" },
React.createElement(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
ErrorMessage ? React.createElement(ErrorBox, { marginTop: 2 }, ErrorMessage) : null));
};