diff --git a/src-docs/src/views/table_of_records/full_featured.js b/src-docs/src/views/table_of_records/full_featured.js index 9fc7ef9732db..0083cd329fc4 100644 --- a/src-docs/src/views/table_of_records/full_featured.js +++ b/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 = ( + + + {label} + + + ); + } + return (
- + + { deleteButton } { + 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', () => { + + }); + }); + }); +}); diff --git a/src/components/table_of_records/table_of_records.js b/src/components/table_of_records/table_of_records.js index d710db5f3f04..bb6bcc34ab20 100644 --- a/src/components/table_of_records/table_of_records.js +++ b/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;