WIP

src-docs/src/views/table_of_records/full_featured.js

@@ -5,6 +5,7 @@ import uuid from 'uuid/v1';
 import { times } from 'lodash';
 
 import {
+  EuiButton,
   EuiTableOfRecords,
   EuiHealth,
   EuiSwitch,
@@ -62,6 +63,7 @@ export default class PeopleTable extends Component {
     super(props);
 
     this.state = {
+      selectedIds: [],
       features: {
         pagination: true,
         sorting: true,
@@ -96,18 +98,35 @@ export default class PeopleTable extends Component {
     };
   }
 
+  onSelectionChanged = selection => {
+    const selectedIds = selection.map(item => item.id);
+    this.setState({
+      selectedIds,
+    });
+  };
+
   onDataCriteriaChange(criteria) {
     this.setState(this.computeTableState(criteria));
   }
 
   deletePerson(personToDelete) {
     const i = people.findIndex((person) => person.id === personToDelete.id);
-    if (i >= 0) {
+    if (i !== -1) {
       people.splice(i, 1);
     }
     this.onDataCriteriaChange(this.state.criteria);
   }
 
+  deleteSelectedPeople = () => {
+    this.state.selectedIds.forEach(id => {
+      const i = people.findIndex((person) => person.id === id);
+      if (i !== -1) {
+        people.splice(i, 1);
+      }
+    });
+    this.onDataCriteriaChange(this.state.criteria);
+  };
+
   clonePerson(personToClone) {
     const i = people.findIndex((person) => person.id === personToClone.id);
     const clone = { ...personToClone, id: uuid() };
@@ -235,13 +254,15 @@ export default class PeopleTable extends Component {
 
       selection: features.selection ? {
         selectable: (record) => record.online,
-        selectableMessage: person => !person.online ? `${person.firstName} is offline` : undefined
+        selectableMessage: person => !person.online ? `${person.firstName} is offline` : undefined,
+        onSelectionChanged: this.onSelectionChanged,
       } : undefined,
 
       onDataCriteriaChange: (criteria) => this.onDataCriteriaChange(criteria)
     };
 
     const {
+      selectedIds,
       data,
       criteria: {
         page,
@@ -257,9 +278,23 @@ export default class PeopleTable extends Component {
       },
     };
 
+    let deleteButton;
+
+    if (selectedIds.length) {
+      const label = selectedIds.length > 1 ? `Delete ${selectedIds.length} people` : `Delete 1 person`;
+      deleteButton = (
+        <EuiFlexItem grow={false}>
+          <EuiButton color="danger" onClick={this.deleteSelectedPeople}>
+            {label}
+          </EuiButton>
+        </EuiFlexItem>
+      );
+    }
+
     return (
       <div>
-        <EuiFlexGroup>
+        <EuiFlexGroup alignItems="center">
+          { deleteButton }
           <EuiFlexItem grow={false}>
             <EuiSwitch
               label="Pagination"

src/components/table_of_records/table_of_records.behavior.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiTableOfRecords } from './table_of_records';
+
+describe('EuiTableOfRecords', () => {
+  describe('behavior', () => {
+    describe('selected items', () => {
+      test('check the select all checkbox when all are selected', () => {
+
+      });
+
+      test('uncheck the select all checkbox when some are selected', () => {
+
+      });
+
+      test('are all selected when the select all checkbox is checked', () => {
+
+      });
+
+      test('select all checkbox becomes unchecked when selected items are deleted', () => {
+
+      });
+    });
+  });
+});

src/components/table_of_records/table_of_records.js

@@ -235,6 +235,25 @@ export class EuiTableOfRecords extends React.Component {
     this.setState({ hoverRecordId: null });
   }
 
+  componentWillReceiveProps(nextProps) {
+    // Don't call changeSelection here or else we can get into an infinite loop:
+    // changeSelection calls owner -> owner sets its state -> we receive new props -> ad infinitum
+    if (!this.props.config.selection) {
+      return;
+    }
+
+    this.setState(prevState => {
+      // Remove any records which don't exist any more.
+      const newSelection = prevState.selection.filter(selectedRecord => (
+        nextProps.model.data.records.findIndex(record => record.id === selectedRecord.id) !== -1
+      ));
+
+      return {
+        selection: newSelection,
+      };
+    });
+  }
+
   render() {
     const { className, config, model, ...rest } = this.props;