@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
91 lines (90 loc) • 5.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalculatedColumnDefinitionWizardSection = exports.isValidCalculatedColumnDefinition = exports.renderCalculatedColumnDefinitionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const rebass_1 = require("rebass");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const CheckBox_1 = require("../../../components/CheckBox");
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const Tabs_1 = require("../../../components/Tabs");
const Tag_1 = require("../../../components/Tag");
const renderCalculatedColumnDefinitionSummary = (data) => {
return (React.createElement(rebass_1.Box, { fontSize: 2 },
React.createElement(rebass_1.Box, null,
"Column Identifier: ",
React.createElement(Tag_1.Tag, null, data.ColumnId)),
data.FriendlyName ? (React.createElement(rebass_1.Box, { mt: 3 },
"Column Name: ",
React.createElement(Tag_1.Tag, null, data.FriendlyName ?? data.ColumnId))) : null));
};
exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefinitionSummary;
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;
};
exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
const CalculatedColumnDefinitionWizardSection = (props) => {
const { data, api } = (0, OnePageAdaptableWizard_1.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 = (0, exports.isValidCalculatedColumnDefinition)(data, api);
const ErrorMessage = validCheck === true ? null : validCheck;
const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.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(rebass_1.Box, { "data-name": 'calculated-column-definition' },
React.createElement(Tabs_1.Tabs, { autoFocus: false },
React.createElement(Tabs_1.Tabs.Tab, null, "Column Details"),
React.createElement(Tabs_1.Tabs.Content, null,
React.createElement(rebass_1.Flex, { flexDirection: "row" },
React.createElement(FormLayout_1.default, null,
React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Name" },
React.createElement(Input_1.default, { "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(FormLayout_1.FormRow, { label: "Header Tooltip" },
React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
HeaderToolTip: e.target.value,
}) })),
' ',
React.createElement(FormLayout_1.FormRow, { label: "" },
React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null));
};
exports.CalculatedColumnDefinitionWizardSection = CalculatedColumnDefinitionWizardSection;