diff --git a/packages/dx-react-demos/src/bootstrap3/selection/hidden-checkboxes.jsx b/packages/dx-react-demos/src/bootstrap3/selection/hidden-checkboxes.jsx index 5aaf95c9f0..b7357a4ea4 100644 --- a/packages/dx-react-demos/src/bootstrap3/selection/hidden-checkboxes.jsx +++ b/packages/dx-react-demos/src/bootstrap3/selection/hidden-checkboxes.jsx @@ -44,7 +44,7 @@ export default class Demo extends React.PureComponent { diff --git a/packages/dx-react-demos/src/material-ui/selection/hidden-checkboxes.jsx b/packages/dx-react-demos/src/material-ui/selection/hidden-checkboxes.jsx index 4d1ebf70e2..0d1ed86315 100644 --- a/packages/dx-react-demos/src/material-ui/selection/hidden-checkboxes.jsx +++ b/packages/dx-react-demos/src/material-ui/selection/hidden-checkboxes.jsx @@ -45,7 +45,7 @@ export default class Demo extends React.PureComponent {
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/table-selection.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/table-selection.jsx index 424a1368db..d1dc0327a2 100644 --- a/packages/dx-react-grid-bootstrap3/src/plugins/table-selection.jsx +++ b/packages/dx-react-grid-bootstrap3/src/plugins/table-selection.jsx @@ -5,17 +5,13 @@ import { TableSelectAllCell } from '../templates/table-select-all-cell'; import { TableSelectCell } from '../templates/table-select-cell'; import { TableSelectRow } from '../templates/table-select-row'; -const selectCellTemplate = props => ; -const selectAllCellTemplate = props => ; -const selectRowTemplate = props => ; - export class TableSelection extends React.PureComponent { render() { return ( diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.jsx index 4069415078..07b5703d57 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.jsx @@ -2,54 +2,58 @@ import React from 'react'; import PropTypes from 'prop-types'; export const TableSelectAllCell = ({ - style, allSelected, someSelected, selectionAvailable, toggleAll, -}) => ( - -); + onClick={toggle} + > + { + if (ref) { + const checkbox = ref; + checkbox.indeterminate = someSelected; + } + }} + onChange={toggle} + onClick={e => e.stopPropagation()} + /> + + ); +}; TableSelectAllCell.propTypes = { style: PropTypes.object, allSelected: PropTypes.bool, someSelected: PropTypes.bool, - selectionAvailable: PropTypes.bool, - toggleAll: PropTypes.func, + disabled: PropTypes.bool, + onToggle: PropTypes.func, }; TableSelectAllCell.defaultProps = { style: null, allSelected: false, someSelected: false, - selectionAvailable: false, - toggleAll: () => {}, + disabled: false, + onToggle: () => {}, }; diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.test.jsx index 713566c290..9b7daab54a 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.test.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/table-select-all-cell.test.jsx @@ -26,20 +26,36 @@ describe('TableHeaderCell', () => { .toBeTruthy(); }); - it('should call the `toggleAll` function on cell click if selection is available', () => { - const toggleAll = jest.fn(); + it('should not fire the `onToggle` event on cell click if selection is not available', () => { + const onToggle = jest.fn(); const tree = mount(( )); tree.find('input').simulate('change'); - expect(toggleAll) + expect(onToggle) + .not.toHaveBeenCalled(); + }); + + it('should fire the `onToggle` event on cell click if selection is available', () => { + const onToggle = jest.fn(); + const tree = mount(( + + )); + tree.find('input').simulate('change'); + + expect(onToggle) .toHaveBeenCalledTimes(1); }); }); diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-select-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-select-cell.jsx index 2987ca9e6d..f906dc54d5 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/table-select-cell.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/table-select-cell.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -export const TableSelectCell = ({ style, selected, changeSelected }) => ( +export const TableSelectCell = ({ style, selected, onToggle }) => ( @@ -29,10 +29,10 @@ export const TableSelectCell = ({ style, selected, changeSelected }) => ( TableSelectCell.defaultProps = { style: null, selected: false, - changeSelected: () => {}, + onToggle: () => {}, }; TableSelectCell.propTypes = { style: PropTypes.object, selected: PropTypes.bool, - changeSelected: PropTypes.func, + onToggle: PropTypes.func, }; diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.jsx index 66a42df574..d536062027 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.jsx @@ -5,7 +5,7 @@ export const TableSelectRow = ({ selected, children, style, - changeSelected, + onToggle, selectByRowClick, }) => ( { if (!selectByRowClick) return; e.stopPropagation(); - changeSelected(); + onToggle(); }} > {children} @@ -24,14 +24,14 @@ export const TableSelectRow = ({ TableSelectRow.propTypes = { selected: PropTypes.bool, children: PropTypes.node, - changeSelected: PropTypes.func, + onToggle: PropTypes.func, selectByRowClick: PropTypes.bool, style: PropTypes.object, }; TableSelectRow.defaultProps = { children: null, - changeSelected: () => {}, + onToggle: () => {}, selected: false, selectByRowClick: false, style: null, diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.test.jsx index 081940b4d8..2e241aa7f1 100644 --- a/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.test.jsx +++ b/packages/dx-react-grid-bootstrap3/src/templates/table-select-row.test.jsx @@ -7,7 +7,7 @@ describe('Table Select Row', () => { const defaultProps = { selected: false, selectByRowClick: false, - changeSelected: () => {}, + onToggle: () => {}, }; let resetConsole; @@ -33,14 +33,14 @@ describe('Table Select Row', () => { }); it('should handle row click', () => { - const changeSelectedMock = jest.fn(); + const onToggleMock = jest.fn(); const tree = mount(); tree.find('tr').simulate('click'); - expect(changeSelectedMock).toBeCalled(); + expect(onToggleMock).toBeCalled(); }); }); diff --git a/packages/dx-react-grid-material-ui/src/plugins/table-selection.jsx b/packages/dx-react-grid-material-ui/src/plugins/table-selection.jsx index 2b799fc160..af3d26dfd7 100644 --- a/packages/dx-react-grid-material-ui/src/plugins/table-selection.jsx +++ b/packages/dx-react-grid-material-ui/src/plugins/table-selection.jsx @@ -5,17 +5,13 @@ import { TableSelectAllCell } from '../templates/table-select-all-cell'; import { TableSelectCell } from '../templates/table-select-cell'; import { TableSelectRow } from '../templates/table-select-row'; -const selectCellTemplate = props => ; -const selectAllCellTemplate = props => ; -const selectRowTemplate = props => ; - export class TableSelection extends React.PureComponent { render() { return ( diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx index dd256033ee..e3c845fa7a 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.jsx @@ -17,11 +17,11 @@ const styles = theme => ({ }); const TableSelectAllCellBase = ({ - style, allSelected, someSelected, selectionAvailable, toggleAll, classes, + style, allSelected, someSelected, disabled, onToggle, classes, }) => { const cellClasses = classNames({ [classes.cell]: true, - [classes.pointer]: selectionAvailable, + [classes.pointer]: !disabled, }); return ( @@ -33,12 +33,12 @@ const TableSelectAllCellBase = ({ { - if (!selectionAvailable) return; + if (disabled) return; e.stopPropagation(); - toggleAll(); + onToggle(); }} /> @@ -49,8 +49,8 @@ TableSelectAllCellBase.propTypes = { style: PropTypes.object, allSelected: PropTypes.bool, someSelected: PropTypes.bool, - selectionAvailable: PropTypes.bool, - toggleAll: PropTypes.func, + disabled: PropTypes.bool, + onToggle: PropTypes.func, classes: PropTypes.object.isRequired, }; @@ -58,8 +58,8 @@ TableSelectAllCellBase.defaultProps = { style: null, allSelected: false, someSelected: false, - selectionAvailable: false, - toggleAll: () => {}, + disabled: false, + onToggle: () => {}, }; export const TableSelectAllCell = withStyles(styles, { name: 'TableSelectAllCell' })(TableSelectAllCellBase); diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx index a09451ab64..b6b6d71109 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-all-cell.test.jsx @@ -31,36 +31,36 @@ describe('TableHeaderCell', () => { .toBeTruthy(); }); - it('should not call the `toggleAll` function on cell click if selection is not available', () => { - const toggleAll = jest.fn(); + it('should not fire the `onToggle` event on cell click if selection is not available', () => { + const onToggle = jest.fn(); const tree = mount(( )); tree.find(Checkbox).simulate('click'); - expect(toggleAll) + expect(onToggle) .not.toHaveBeenCalled(); }); - it('should call the `toggleAll` function on cell click if selection is available', () => { - const toggleAll = jest.fn(); + it('should fire the `onToggle` event on cell click if selection is available', () => { + const onToggle = jest.fn(); const tree = mount(( )); tree.find(Checkbox).simulate('click'); - expect(toggleAll) + expect(onToggle) .toHaveBeenCalledTimes(1); }); }); diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx index e5b5b2def4..673bc1b246 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.jsx @@ -24,7 +24,7 @@ const styles = theme => ({ }); export const TableSelectCellBase = ({ - style, selected, changeSelected, classes, + style, selected, onToggle, classes, }) => ( { e.stopPropagation(); - changeSelected(); + onToggle(); }} /> @@ -45,13 +45,13 @@ export const TableSelectCellBase = ({ TableSelectCellBase.defaultProps = { style: null, selected: false, - changeSelected: () => {}, + onToggle: () => {}, }; TableSelectCellBase.propTypes = { style: PropTypes.object, selected: PropTypes.bool, - changeSelected: PropTypes.func, + onToggle: PropTypes.func, classes: PropTypes.object.isRequired, }; diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx index 2aa73da7e7..6ba55ac74d 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-cell.test.jsx @@ -12,16 +12,16 @@ describe('TableHeaderCell', () => { mount = component => mountMUI(
{ - if (!selectionAvailable) return; + style, allSelected, someSelected, disabled, onToggle, +}) => { + const toggle = (e) => { + if (disabled) return; - e.stopPropagation(); - toggleAll(); - }} - > - { - if (ref) { - const checkbox = ref; - checkbox.indeterminate = someSelected; - } + cursor: !disabled && 'pointer', + verticalAlign: 'middle', + ...style, }} - onChange={toggleAll} - onClick={e => e.stopPropagation()} - /> - ( }} onClick={(e) => { e.stopPropagation(); - changeSelected(); + onToggle(); }} > ( }} type="checkbox" checked={selected} - onChange={changeSelected} + onChange={onToggle} onClick={e => e.stopPropagation()} />
{component}
); }); - it('should call the `changeSelected` function on cell click if selection is available', () => { - const changeSelected = jest.fn(); + it('should fire the `onToggle` event on cell click if selection is available', () => { + const onToggle = jest.fn(); const tree = mount(( )); tree.find(Checkbox).simulate('click'); - expect(changeSelected) + expect(onToggle) .toHaveBeenCalledTimes(1); }); }); diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx index 5684bbf9a3..f9ae417ca7 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-row.jsx @@ -6,7 +6,7 @@ export const TableSelectRow = ({ selected, children, style, - changeSelected, + onToggle, selectByRowClick, }) => ( { if (!selectByRowClick) return; e.stopPropagation(); - changeSelected(); + onToggle(); }} > {children} @@ -24,7 +24,7 @@ export const TableSelectRow = ({ TableSelectRow.propTypes = { children: PropTypes.node, - changeSelected: PropTypes.func, + onToggle: PropTypes.func, selected: PropTypes.bool, selectByRowClick: PropTypes.bool, style: PropTypes.object, @@ -32,7 +32,7 @@ TableSelectRow.propTypes = { TableSelectRow.defaultProps = { children: null, - changeSelected: () => {}, + onToggle: () => {}, selected: false, selectByRowClick: false, style: null, diff --git a/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx index b79342b7d5..163c316b79 100644 --- a/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx +++ b/packages/dx-react-grid-material-ui/src/templates/table-select-row.test.jsx @@ -10,7 +10,7 @@ describe('TableSelectRow', () => { const defaultProps = { selected: false, selectByRowClick: false, - changeSelected: () => {}, + onToggle: () => {}, }; beforeAll(() => { @@ -36,14 +36,14 @@ describe('TableSelectRow', () => { }); it('should handle row click', () => { - const changeSelectedMock = jest.fn(); + const onToggleMock = jest.fn(); const tree = mount(); tree.find(TableRowMUI).simulate('click'); - expect(changeSelectedMock).toBeCalled(); + expect(onToggleMock).toBeCalled(); }); }); diff --git a/packages/dx-react-grid/docs/guides/selection.md b/packages/dx-react-grid/docs/guides/selection.md index 1d56073010..b1c2a0c532 100644 --- a/packages/dx-react-grid/docs/guides/selection.md +++ b/packages/dx-react-grid/docs/guides/selection.md @@ -6,7 +6,7 @@ The Grid component supports selecting/deselecting rows programmatically or via t The following plugins implement selection features: -- [SelectionState](../reference/selection-state.md) - controls the selection state +- [SelectionState](../reference/selection-state.md) - controls the selection state - [TableSelection](../reference/table-selection.md) - renders selection check boxes or highlights the selected rows Note that [plugin order](./plugin-overview.md#plugin-order) is important. @@ -19,21 +19,21 @@ Import the plugins listed above to set up a simple Grid with selection enabled. ## Select by Row Click -A user can select a row using a check box click by default. Set the `TableSelection` plugin's `selectByRowClick` property to true to check/uncheck a check box by a row click as demonstrated in the following example: +A user can select a row using a checkbox click by default. Set the `TableSelection` plugin's `selectByRowClick` property to true to check/uncheck a checkbox by a row click as demonstrated in the following example: .embedded-demo(selection/select-by-row-click) -In some scenarios, it is useful to highlight selected rows instead of using check boxes. For this, hide check boxes setting the `TableSelection` plugin's `showSelectionColumn` property to false and assign true to the `selectByRowClick` and `highlightSelected` properties as demonstrated in the following demo: +In some scenarios, it is useful to highlight selected rows instead of using checkboxes. For this, hide checkboxes by setting the `TableSelection` plugin's `showSelectionColumn` property to false and assign true to the `selectByRowClick` and `highlightRow` properties as demonstrated in the following demo: .embedded-demo(selection/hidden-checkboxes) ## Select All -If your Grid configuration includes the `TableHeaderRow` plugin and the `TableSelection` plugin's `showSelectionColumn` property is set to true, the header row displays the Select All check box that provides the capability to select/deselect all rows. +If your Grid configuration includes the `TableHeaderRow` plugin and the `TableSelection` plugin's `showSelectionColumn` property is set to true, the header row displays the Select All checkbox that provides the capability to select/deselect all rows. ### Without Paging -The following example demonstrates selection without paging. We increase the row count using the Table's [virtual mode](virtual-scrolling.md). +The following example demonstrates selection without paging. You can increase the row count using the Table's [virtual mode](virtual-scrolling.md). .embedded-demo(selection/select-all-virtual) @@ -41,7 +41,7 @@ The following example demonstrates selection without paging. We increase the row If you are using the `LocalPaging` plugin, you can integrate the Select All behavior with the `PagingState` plugin. -The Select All check box selects/deselects all rows on a page or all pages depending on the `SelectionState` and `LocalPaging` plugin's order. +The Select All checkbox selects/deselects all rows on a page or all pages depending on the `SelectionState` and `LocalPaging` plugin's order. Place the `SelectionState` plugin after `LocalPaging` to implement the Select All behavior within a visible page: diff --git a/packages/dx-react-grid/docs/reference/table-selection.md b/packages/dx-react-grid/docs/reference/table-selection.md index 3ea1d76a3e..4b4c151acf 100644 --- a/packages/dx-react-grid/docs/reference/table-selection.md +++ b/packages/dx-react-grid/docs/reference/table-selection.md @@ -1,6 +1,6 @@ # TableSelection Plugin Reference -This plugin visualizes the selection state within a table by rendering selection checkboxes and highlighting the selected rows. +A plugin that visualizes table rows' selection state by rendering selection checkboxes and highlighting the selected rows. ## User Reference @@ -13,48 +13,40 @@ This plugin visualizes the selection state within a table by rendering selection Name | Type | Default | Description -----|------|---------|------------ -highlightSelected | boolean | false | If true, selected rows are highlighted. Note that the `Table` plugin's `rowComponent` is ignored in this case. -selectByRowClick | boolean | false | If true, a selected row is toggled by click. Note that the `Table` plugin's `rowComponent` is ignored in this case. -showSelectAll | boolean | true | If true, the 'select all' checkbox is rendered inside the heading row. -showSelectionColumn | boolean | false | If true, selection checkboxes are rendered inside each data row. -selectCellTemplate | (args: [SelectCellArgs](#select-cell-args)) => ReactElement | | A component that renders a data row selection checkbox. -selectAllCellTemplate | (args: [SelectAllCellArgs](#select-all-cell-args)) => ReactElement | | A component that renders the Select All checkbox. +highlightRow | boolean | false | If true, selected rows are highlighted. Note that `Table` plugin's `rowComponent` is ignored in this case. +selectByRowClick | boolean | false | If true, the row's selection state is toggled when a user clicks the row. Note that `Table` plugin's `rowComponent` is ignored in this case. +showSelectAll | boolean | true | If true, the 'select all' checkbox is rendered in the header row. +showSelectionColumn | boolean | true | If true, the selection column (that displays a selection checkbox) is rendered. +cellComponent | ElementType<[TableSelectCellProps](#tableselectcellprops)> | | A component that renders a selection cell (a cell containing a selection checkbox). +headerCellComponent | ElementType<[TableSelectHeaderCellProps](#tableselectcellprops)> | | A component that renders a cell containing the 'Select All' checkbox. selectionColumnWidth | number | | The selection column's width. ## Interfaces -### TableRow (Extension) +### TableSelectHeaderCellProps -A value with the [TableRow](table.md#tablerow) shape extended by the following fields: - -Field | Type | Description -------|------|------------ -selected? | boolean | Specifies if a row is selected. - -### SelectAllCellArgs - -Describes properties passed to the template that renders a cell with selection control. +Describes properties passed to a component that renders a cell containing the Select All checkbox. A value with the [TableCellProps](table.md#tablecellprops) shape extended by the following fields: Field | Type | Description ------|------|------------ -selectionAvailable | boolean | True if at least one row can be selected. -allSelected | boolean | True if all the rows available for selection are selected. -someSelected | boolean | True if at least one but not all rows available for selection are selected. -toggleAll | () => void | Selects or deselects all rows. +disabled | boolean | Indicates if there are no rows that can be selected. +allSelected | boolean | Indicates if all the rows available for selection are selected. +someSelected | boolean | Indicates if one or more but not all rows available for selection are selected. +onToggle | () => void | An event that initiates selecting or deselecting of all rows. -### SelectCellArgs +### TableSelectCellProps -Describes properties passed to a template that renders a cell with the selection control inside the heading row. +Describes properties passed to a component that renders a cell containing a selection checkbox. A value with the [TableCellProps](table.md#tablecellprops) shape extended by the following fields: Field | Type | Description ------|------|------------ row | any | A row. -selected | boolean | Specifies whether a row is selected. -changeSelected | () => void | Selects or deselects a row. +selected | boolean | Indicates if a row is selected. +onToggle | () => void | An event that initiates row selecting or deselecting. ## Plugin Developer Reference @@ -63,7 +55,7 @@ changeSelected | () => void | Selects or deselects a row. Name | Plugin | Type | Description -----|--------|------|------------ tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns. -tableBodyRows | Getter | Array<[TableRow](#tablerow)> | Body rows to be rendered. +tableBodyRows | Getter | Array<[TableRow](table.md#tablerow)> | Body rows to be rendered. selection | Getter | Array<number | string> | Selected rows. availableToSelect | Getter | Array<number | string> | Rows to be rendered, which are available for selection. setRowsSelection | Action | ({ rowIds: Array<number | string>, selected?: boolean }) => void | Selects/deselects rows. The `selected` argument specifies whether the rows should be selected (true), deselected (false), or their selection status should be set to the opposite value (undefined). In the last case, the function selects unselected rows and deselects selected ones. To select/deselect a single row, pass an array with a single item to the `rowIds` argument. @@ -75,4 +67,4 @@ tableRow | Template | [TableRowProps](table.md#tablerowprops) | A template that Name | Plugin | Type | Description -----|--------|------|------------ tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns including the selection column. -tableBodyRows | Getter | Array<[TableRow](#tablerow)> | Body rows to be rendered including the selected ones. +tableBodyRows | Getter | Array<[TableRow](table.md#tablerow)> | Body rows (including selected) to be rendered. diff --git a/packages/dx-react-grid/src/plugins/table-selection.jsx b/packages/dx-react-grid/src/plugins/table-selection.jsx index 4697390633..6a1f4a4911 100644 --- a/packages/dx-react-grid/src/plugins/table-selection.jsx +++ b/packages/dx-react-grid/src/plugins/table-selection.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Getter, Template, PluginContainer, - TemplateConnector, TemplateRenderer, + TemplateConnector, } from '@devexpress/dx-react-core'; import { tableColumnsWithSelection, @@ -11,43 +11,6 @@ import { isDataTableRow, } from '@devexpress/dx-grid-core'; -const getSelectTableCellTemplateArgs = ( - params, - { selection }, - { setRowsSelection }, -) => ({ - ...params, - row: params.tableRow.row, - selected: selection.indexOf(params.tableRow.rowId) > -1, - changeSelected: () => setRowsSelection({ rowIds: [params.tableRow.rowId] }), -}); - -const getSelectAllTableCellTemplateArgs = ( - params, - { availableToSelect, selection }, - { setRowsSelection }, -) => ({ - ...params, - selectionAvailable: !!availableToSelect.length, - allSelected: selection.length === availableToSelect.length && selection.length !== 0, - someSelected: selection.length !== availableToSelect.length && selection.length !== 0, - toggleAll: () => setRowsSelection({ rowIds: availableToSelect }), -}); - -const getSelectTableRowTemplateArgs = ( - { selectByRowClick, highlightSelected, ...restParams }, - { selection }, - { setRowsSelection }, -) => { - const { rowId } = restParams.tableRow; - return ({ - ...restParams, - selectByRowClick, - selected: highlightSelected && selection.indexOf(rowId) > -1, - changeSelected: () => setRowsSelection({ rowIds: [rowId] }), - }); -}; - const pluginDependencies = [ { pluginName: 'SelectionState' }, { pluginName: 'Table' }, @@ -56,14 +19,14 @@ const pluginDependencies = [ export class TableSelection extends React.PureComponent { render() { const { - highlightSelected, + highlightRow, + selectByRowClick, showSelectionColumn, showSelectAll, + headerCellComponent: HeaderCell, + cellComponent: Cell, + rowComponent: Row, selectionColumnWidth, - selectAllCellTemplate, - selectCellTemplate, - selectRowTemplate, - selectByRowClick, } = this.props; const tableColumnsComputed = ({ tableColumns }) => @@ -85,10 +48,15 @@ export class TableSelection extends React.PureComponent { > {params => ( - {(getters, actions) => ( - ( + setRowsSelection({ rowIds: availableToSelect })} /> )} @@ -102,33 +70,31 @@ export class TableSelection extends React.PureComponent { > {params => ( - {(getters, actions) => ( - ( + -1} + onToggle={() => setRowsSelection({ rowIds: [params.tableRow.rowId] })} /> )} )} )} - {(highlightSelected || selectByRowClick) && ( + {(highlightRow || selectByRowClick) && (