@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
55 lines (54 loc) • 4.7 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import Radio, { RadioGroup } from '../../../components/Radio';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
import Input from '../../../components/Input';
import { TypeRadio } from '../../Wizard/TypeRadio';
export const renderFormatColumnSettingsSummary = (data) => {
return (_jsxs(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-x-4 twa:gap-y-2", children: [_jsxs(Box, { children: ["Name ", _jsx(Tag, { children: data.Name })] }), _jsxs(Box, { children: ["Target", ' ', _jsx(Tag, { children: !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header' })] }), _jsxs(Box, { children: ["Column Groups", ' ', _jsx(Tag, { children: !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
? 'Always'
: data.ColumnGroupScope })] })] }));
};
export const FormatColumnSettingsWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const nameInputRef = React.useRef(null);
React.useEffect(() => {
if (data?.Name) {
return;
}
const focusName = () => nameInputRef.current?.focus();
let innerRaf = 0;
const outerRaf = requestAnimationFrame(() => {
innerRaf = requestAnimationFrame(focusName);
});
const fallbackTimer = window.setTimeout(focusName, 150);
return () => {
cancelAnimationFrame(outerRaf);
cancelAnimationFrame(innerRaf);
window.clearTimeout(fallbackTimer);
};
}, []);
const currentTarget = data.Target ? data.Target : 'cell';
const handleTargetChange = (target) => {
props.onChange({
...data,
Target: target,
});
};
const onNameChange = (event) => {
props.onChange({
...data,
Name: event.target.value,
});
};
const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
return (_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: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Format Column" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { ref: nameInputRef, className: "twa:max-w-[300px] twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[700px]", children: "Choose whether Format Column applies to Column Cells or Column Header (latter doesn't support Conditions)" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }), _jsx(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsxs(Box, { className: "twa:font-medium", children: ["Column Group ", behaviourSpellingVariant] }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose when the Format Column is applied in a Column Group" })] }), _jsx(Card.Body, { children: _jsxs(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
props.onChange({
...data,
ColumnGroupScope: columnGroupScope,
});
}, children: [_jsx(Radio, { className: "twa:ml-1", value: "Both", children: "Always" }), _jsx(Radio, { className: "twa:ml-4", value: "Expanded", children: "When Expanded" }), _jsx(Radio, { className: "twa:ml-4", value: "Collapsed", children: "When Collapsed" })] }) })] })] }));
};