refactor(react-grid): replace render functions with components in Tab…

…leSelection (#502) BREAKING CHANGES: The TableSelection plugin's `highlightSelected` property has been renamed to `highlightRow`. The `selectCellTemplate` and `selectAllCellTemplate` properties have been replaced with `cellComponent`, and `headerCellComponent` ones, which accept components instead of render functions. Find more details here: #496 Properties passed to `headerCellComponent` have the same names as arguments passed to the `selectAllCellTemplate` function with the following exceptions: - The `onToggle` property is used instead of the `toggleAll` argument. - The `disabled` property is used instead of the `selectionAvailable` argument and it's value is inverted. Properties passed to `cellComponent` have the same names as arguments passed to the `selectCellTemplate` function except for the `onToggle` property, which is used instead of the `changeSelected` argument.
DevExpress · Dec 4, 2017 · f9e3c88 · f9e3c88
1 parent fd9b7f9
commit f9e3c88
Show file tree

Hide file tree

Showing 19 changed files with 203 additions and 241 deletions.
diff --git 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 {
         <Table />
         <TableSelection
           selectByRowClick
-          highlightSelected
+          highlightRow
           showSelectionColumn={false}
         />
       </Grid>

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
@@ -45,7 +45,7 @@ export default class Demo extends React.PureComponent {
           <Table />
           <TableSelection
             selectByRowClick
-            highlightSelected
+            highlightRow
             showSelectionColumn={false}
           />
         </Grid>

diff --git 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 => <TableSelectCell {...props} />;
-const selectAllCellTemplate = props => <TableSelectAllCell {...props} />;
-const selectRowTemplate = props => <TableSelectRow {...props} />;
-
 export class TableSelection extends React.PureComponent {
   render() {
     return (
       <TableSelectionBase
-        selectCellTemplate={selectCellTemplate}
-        selectRowTemplate={selectRowTemplate}
-        selectAllCellTemplate={selectAllCellTemplate}
+        rowComponent={TableSelectRow}
+        cellComponent={TableSelectCell}
+        headerCellComponent={TableSelectAllCell}
         selectionColumnWidth={40}
         {...this.props}
       />

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
@@ -2,54 +2,58 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const TableSelectAllCell = ({
-  style, allSelected, someSelected, selectionAvailable, toggleAll,
-}) => (
-  <th
-    style={{
-      cursor: selectionAvailable && 'pointer',
-      verticalAlign: 'middle',
-      ...style,
-    }}
-    onClick={(e) => {
-      if (!selectionAvailable) return;
+  style, allSelected, someSelected, disabled, onToggle,
+}) => {
+  const toggle = (e) => {
+    if (disabled) return;
 
-      e.stopPropagation();
-      toggleAll();
-    }}
-  >
-    <input
+    e.stopPropagation();
+    onToggle();
+  };
+
+  return (
+    <th
       style={{
-        cursor: selectionAvailable && 'pointer',
-        margin: '0 auto',
-        display: 'block',
-      }}
-      type="checkbox"
-      disabled={!selectionAvailable}
-      checked={allSelected}
-      ref={(ref) => {
-        if (ref) {
-          const checkbox = ref;
-          checkbox.indeterminate = someSelected;
-        }
+        cursor: !disabled && 'pointer',
+        verticalAlign: 'middle',
+        ...style,
       }}
-      onChange={toggleAll}
-      onClick={e => e.stopPropagation()}
-    />
-  </th>
-);
+      onClick={toggle}
+    >
+      <input
+        style={{
+          cursor: !disabled && 'pointer',
+          margin: '0 auto',
+          display: 'block',
+        }}
+        type="checkbox"
+        disabled={disabled}
+        checked={allSelected}
+        ref={(ref) => {
+          if (ref) {
+            const checkbox = ref;
+            checkbox.indeterminate = someSelected;
+          }
+        }}
+        onChange={toggle}
+        onClick={e => e.stopPropagation()}
+      />
+    </th>
+  );
+};
 
 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
@@ -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((
       <TableSelectAllCell
         column={{
           name: 'Test',
         }}
-        selectionAvailable
-        toggleAll={toggleAll}
+        disabled
+        onToggle={onToggle}
       />
     ));
     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((
+      <TableSelectAllCell
+        column={{
+          name: 'Test',
+        }}
+        onToggle={onToggle}
+      />
+    ));
+    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
@@ -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 }) => (
   <td
     style={{
       cursor: 'pointer',
@@ -10,7 +10,7 @@ export const TableSelectCell = ({ style, selected, changeSelected }) => (
     }}
     onClick={(e) => {
       e.stopPropagation();
-      changeSelected();
+      onToggle();
     }}
   >
     <input
@@ -21,18 +21,18 @@ export const TableSelectCell = ({ style, selected, changeSelected }) => (
       }}
       type="checkbox"
       checked={selected}
-      onChange={changeSelected}
+      onChange={onToggle}
       onClick={e => e.stopPropagation()}
     />
   </td>
 );
 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
@@ -5,7 +5,7 @@ export const TableSelectRow = ({
   selected,
   children,
   style,
-  changeSelected,
+  onToggle,
   selectByRowClick,
 }) => (
   <tr
@@ -14,7 +14,7 @@ export const TableSelectRow = ({
     onClick={(e) => {
       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
@@ -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(<TableSelectRow
       {...defaultProps}
-      changeSelected={changeSelectedMock}
+      onToggle={onToggleMock}
       selectByRowClick
     />);
 
     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
@@ -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 => <TableSelectCell {...props} />;
-const selectAllCellTemplate = props => <TableSelectAllCell {...props} />;
-const selectRowTemplate = props => <TableSelectRow {...props} />;
-
 export class TableSelection extends React.PureComponent {
   render() {
     return (
       <TableSelectionBase
-        selectCellTemplate={selectCellTemplate}
-        selectRowTemplate={selectRowTemplate}
-        selectAllCellTemplate={selectAllCellTemplate}
+        rowComponent={TableSelectRow}
+        cellComponent={TableSelectCell}
+        headerCellComponent={TableSelectAllCell}
         selectionColumnWidth={58}
         {...this.props}
       />

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
@@ -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 = ({
       <Checkbox
         checked={allSelected}
         indeterminate={someSelected}
-        disabled={!selectionAvailable}
+        disabled={disabled}
         onClick={(e) => {
-          if (!selectionAvailable) return;
+          if (disabled) return;
 
           e.stopPropagation();
-          toggleAll();
+          onToggle();
         }}
       />
     </TableCell>
@@ -49,17 +49,17 @@ 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,
 };
 
 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
@@ -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((
       <TableSelectAllCell
         column={{
           name: 'Test',
         }}
-        toggleAll={toggleAll}
+        disabled
+        onToggle={onToggle}
       />
     ));
     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((
       <TableSelectAllCell
         column={{
           name: 'Test',
         }}
-        selectionAvailable
-        toggleAll={toggleAll}
+        onToggle={onToggle}
       />
     ));
     tree.find(Checkbox).simulate('click');
 
-    expect(toggleAll)
+    expect(onToggle)
       .toHaveBeenCalledTimes(1);
   });
 });