@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
59 lines (58 loc) • 5.28 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import Input from '../../../components/Input';
import { CheckBox } from '../../../components/CheckBox';
import { Tag } from '../../../components/Tag';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
export const renderCalculatedColumnDefinitionSummary = (data) => {
return (_jsxs(Box, { className: "twa:text-2 twa:grid twa:items-center twa:grid-cols-[auto_1fr] twa:gap-2", children: [_jsx(Box, { children: "Column Identifier:" }), _jsx(Box, { children: _jsx(Tag, { children: data.ColumnId }) }), data.FriendlyName ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "Column Name:" }), _jsx(Box, { children: _jsx(Tag, { children: data.FriendlyName ?? data.ColumnId }) })] })) : null] }));
};
export const isValidCalculatedColumnDefinition = (data, api) => {
const columns = api.columnApi.getColumns();
if (!data.ColumnId) {
return 'A Column Name is required';
}
const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
return hasAlreadyExistingId ? 'A column with this Name already exists' : true;
};
export const CalculatedColumnDefinitionWizardSection = (props) => {
const { data } = 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 [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 (_jsx(Box, { "data-name": 'calculated-column-definition', 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: "Column Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Unique identifier for the Calculated Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-id", value: data.ColumnId || '', className: "twa:max-w-[500px] twa:w-full", autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Header" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Display name shown in the Column Header (Name used if not provided)" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
setColumnNameFocused(true);
}, onBlur: () => {
setColumnNameFocused(false);
}, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', className: "twa:max-w-[500px] twa:w-full", type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Header Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional text shown when hovering over the Column Header" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "header-tooltip", type: "text", className: "twa:max-w-[500px] twa:w-full", value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
HeaderToolTip: e.target.value,
}) }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Show the Expression as a tooltip when hovering over each cell" })] }), _jsx(Card.Body, { children: _jsx(CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip, children: "Show Expression as Cell Tooltip" }) })] })] }) }));
};