@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
78 lines (77 loc) • 9.78 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { CheckBox } from '../../../../components/CheckBox';
import Radio from '../../../../components/Radio';
import { RadioGroup, radioGroupStyling } from '../../../../components/Radio';
import { Tag } from '../../../../components/Tag';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../../components/Flex';
import HelpBlock from '../../../../components/HelpBlock';
import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
import { AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
import { Card } from '../../../../components/Card';
export const RowSelectionSectionSummary = () => {
const { data: layout } = useOnePageAdaptableWizardContext();
if (layout.RowSelection === false) {
return (_jsx(Box, { children: _jsx(Tag, { children: "Row Selection Disabled" }) }));
}
if (!layout.RowSelection) {
return (_jsx(Box, { children: _jsx(Tag, { children: "Default (from Grid Options)" }) }));
}
const rs = layout.RowSelection;
return (_jsxs(Box, { children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Mode: ", rs.Mode === 'multiRow' ? 'Multi Row' : 'Single Row'] }), rs.Checkboxes != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Checkboxes: ", rs.Checkboxes ? 'Yes' : 'No'] })), rs.HeaderCheckbox != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Header Checkbox: ", rs.HeaderCheckbox ? 'Yes' : 'No'] })), rs.EnableClickSelection != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Click Selection: ", String(rs.EnableClickSelection)] })), rs.CheckboxInGroupColumn != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Checkbox Location: ", rs.CheckboxInGroupColumn ? 'Group Column' : 'Selection Column'] })), rs.GroupSelectMode != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Group Select Mode: ", rs.GroupSelectMode] })), rs.SelectAllMode != null && (_jsxs(Tag, { className: "twa:mr-2", children: ["Select All Mode: ", rs.SelectAllMode] }))] }));
};
const ROW_SELECTION_MODE_OPTIONS = [
{ value: false, label: 'Disabled' },
{ value: 'singleRow', label: 'Single Row' },
{ value: 'multiRow', label: 'Multi Row' },
];
function getMode(layout) {
if (!layout.RowSelection) {
return false;
}
return layout.RowSelection.Mode;
}
export const RowSelectionSection = (props) => {
const { data: layout } = useOnePageAdaptableWizardContext();
const mode = getMode(layout);
const isPivot = isPivotLayout(layout);
const rowSelection = layout.RowSelection ?? false;
const handleModeChange = (newMode) => {
if (newMode === false) {
props.onChange({ ...layout, RowSelection: false });
return;
}
const base = rowSelection
? { ...rowSelection, Mode: newMode }
: { Mode: newMode };
if (newMode === 'singleRow') {
delete base.HeaderCheckbox;
delete base.GroupSelectMode;
delete base.SelectAllMode;
}
props.onChange({ ...layout, RowSelection: base });
};
const updateRowSelection = (patch) => {
if (!rowSelection) {
return;
}
const newLayout = {
...layout,
RowSelection: { ...rowSelection, ...patch },
};
if (newLayout.RowSelection && !newLayout.RowSelection.CheckboxInGroupColumn) {
if (newLayout.TableColumns) {
if (!newLayout.TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
newLayout.TableColumns = [AG_GRID_SELECTION_COLUMN, ...(newLayout.TableColumns ?? [])];
}
}
else if (newLayout.PivotColumns) {
if (!newLayout.PivotColumns.includes(AG_GRID_SELECTION_COLUMN)) {
newLayout.PivotColumns = [AG_GRID_SELECTION_COLUMN, ...(newLayout.PivotColumns ?? [])];
}
}
}
props.onChange(newLayout);
};
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: "Row Selection Mode" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether row selection is disabled, single row, or multi row" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Flex, { flexDirection: "row", className: "twa:gap-2 twa:flex-wrap", children: _jsx(RadioGroup, { orientation: "horizontal", variant: "text-only", className: radioGroupStyling.horizontalTextOnly, value: mode, name: "rowSelectionMode", onRadioChange: (value) => handleModeChange(value), children: ROW_SELECTION_MODE_OPTIONS.map((option) => (_jsx(Radio, { value: option.value, "data-name": `row-selection-mode-${option.value === false ? 'disabled' : option.value}`, children: option.label }, String(option.value)))) }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Selection Column Checkboxes" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure checkboxes in the selection column cells and header" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Grouping Selection Checkboxes" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose where selection checkboxes appear when row grouping is enabled" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Row Click Selection" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure whether users can select or deselect rows by clicking outside the checkbox" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Grouped Row Selection Behaviour" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how selection cascades when a grouped row is selected" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Select All Behaviour" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose which rows are selected when the header Select All checkbox is used" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
};