@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
34 lines (33 loc) • 2.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { resolveBarStyleCellTextLayout } from '../../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
import { CheckBox } from '../../../../../components/CheckBox';
import { Box, Flex } from '../../../../../components/Flex';
import { FormRow } from '../../../../../components/FormLayout';
import { SingleSelect } from '../../../../../components/NewSelect';
const HORIZONTAL_CHOICES = [
{ value: 'Left', label: 'Left' },
{ value: 'Center', label: 'Center' },
{ value: 'Right', label: 'Right' },
];
const VERTICAL_CHOICES = [
{ value: 'Above', label: 'Above Bar' },
{ value: 'Below', label: 'Below Bar' },
{ value: 'Merged', label: 'Merged' },
];
const ROWS = [
{ token: 'CellValue', label: 'Cell Value:', key: 'CellValue' },
{ token: 'PercentageValue', label: 'Percent Value:', key: 'PercentValue' },
];
export const BarStyleCellTextLayoutEditor = ({ disabled, cellTextProperties, onToggle, onPlacementChange }) => {
const layout = resolveBarStyleCellTextLayout(cellTextProperties);
return (_jsx(_Fragment, { children: ROWS.map(({ token, label, key }) => {
const placement = layout[key];
const isShown = Boolean(placement);
const rowDisabled = disabled || !isShown;
return (_jsx(FormRow, { label: label, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-3", children: [_jsx(CheckBox, { disabled: disabled, checked: isShown, onChange: (checked) => onToggle(token, checked) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Horizontal ?? 'Left', onValueChange: (v) => onPlacementChange(token, {
Horizontal: v,
}), items: HORIZONTAL_CHOICES }) }), _jsx(Box, { className: "twa:w-[140px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: rowDisabled, value: placement?.Vertical ?? 'Below', onValueChange: (v) => onPlacementChange(token, {
Vertical: v,
}), items: VERTICAL_CHOICES }) })] }) }, token));
}) }));
};