@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
54 lines (53 loc) • 4.5 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import Input from '../../../components/Input';
import { Tag } from '../../../components/Tag';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
export const renderFreeTextColumnDefinitionSummary = (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 isValidFreeTextColumnDefinition = (data, api) => {
const columns = api.columnApi.getUIAvailableColumns();
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 FreeTextColumnDefinitionWizardSection = (props) => {
const { data } = useOnePageAdaptableWizardContext();
const [ColumnNameFocused, setColumnNameFocused] = useState(false);
const inEdit = props.isEdit;
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 handleSpecialColumnSettingsChange = (settings) => {
props.onChange({
...data,
FreeTextColumnSettings: {
...data.FreeTextColumnSettings,
...settings,
},
});
};
const { HeaderToolTip } = data.FreeTextColumnSettings ?? {};
return (_jsx(Box, { "data-name": "free-text-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 Free Text 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: "Optional display name shown in the grid header" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => setColumnNameFocused(true), onBlur: () => setColumnNameFocused(false), value: ColumnNameFocused
? data.FriendlyName || ''
: data.FriendlyName || data.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,
}) }) })] })] }) }));
};