-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-grid): provide the custom data accessors capability (#264)
Fixes #176
- Loading branch information
1 parent
dbf19cc
commit 5f699bf
Showing
44 changed files
with
1,019 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 5 additions & 3 deletions
8
packages/dx-grid-core/src/plugins/filtering-state/computeds.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 8 additions & 6 deletions
14
packages/dx-grid-core/src/plugins/sorting-state/computeds.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,23 +1,25 @@ | ||
import mergeSort from '../../utils/merge-sort'; | ||
|
||
const createSortingCompare = (sorting, compareEqual) => (a, b) => { | ||
const sortColumn = sorting.columnName; | ||
const createSortingCompare = (sorting, compareEqual, getCellData) => (a, b) => { | ||
const inverse = sorting.direction === 'desc'; | ||
const columnName = sorting.columnName; | ||
const aValue = getCellData(a, columnName); | ||
const bValue = getCellData(b, columnName); | ||
|
||
if (a[sortColumn] === b[sortColumn]) { | ||
if (aValue === bValue) { | ||
return (compareEqual && compareEqual(a, b)) || 0; | ||
} | ||
|
||
return (a[sortColumn] < b[sortColumn]) ^ inverse ? -1 : 1; // eslint-disable-line no-bitwise | ||
return (aValue < bValue) ^ inverse ? -1 : 1; // eslint-disable-line no-bitwise | ||
}; | ||
|
||
export const sortedRows = (rows, sorting) => { | ||
export const sortedRows = (rows, sorting, getCellData) => { | ||
if (!sorting.length) return rows; | ||
|
||
const compare = Array.from(sorting) | ||
.reverse() | ||
.reduce((prevCompare, columnSorting) => | ||
createSortingCompare(columnSorting, prevCompare), () => 0); | ||
createSortingCompare(columnSorting, prevCompare, getCellData), () => 0); | ||
|
||
return mergeSort(Array.from(rows), compare); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
packages/dx-react-demos/src/bootstrap3/data-accessors/custom-data-accessors-in-columns.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import React from 'react'; | ||
import { | ||
EditingState, | ||
} from '@devexpress/dx-react-grid'; | ||
import { | ||
Grid, | ||
TableView, | ||
TableHeaderRow, | ||
TableEditRow, | ||
TableEditColumn, | ||
} from '@devexpress/dx-react-grid-bootstrap3'; | ||
|
||
import { | ||
generateRows, | ||
defaultNestedColumnValues, | ||
} from '../../demo-data/generator'; | ||
|
||
export default class Demo extends React.PureComponent { | ||
constructor(props) { | ||
super(props); | ||
|
||
this.state = { | ||
columns: [ | ||
{ | ||
name: 'firstName', | ||
title: 'First Name', | ||
getCellData: row => (row.user ? row.user.firstName : undefined), | ||
createRowChange: (row, value) => ({ | ||
user: { | ||
...row.user, | ||
firstName: value, | ||
}, | ||
}), | ||
}, | ||
{ | ||
name: 'lastName', | ||
title: 'Last Name', | ||
getCellData: row => (row.user ? row.user.lastName : undefined), | ||
createRowChange: (row, value) => ({ | ||
user: { | ||
...row.user, | ||
lastName: value, | ||
}, | ||
}), | ||
}, | ||
{ | ||
name: 'car', | ||
title: 'Car', | ||
getCellData: row => (row.car ? row.car.model : undefined), | ||
createRowChange: (row, value) => ({ | ||
car: { | ||
model: value, | ||
}, | ||
}), | ||
}, | ||
{ name: 'position', title: 'Position' }, | ||
{ name: 'city', title: 'City' }, | ||
], | ||
rows: generateRows({ | ||
columnValues: { id: ({ index }) => index, ...defaultNestedColumnValues }, | ||
length: 14, | ||
}), | ||
}; | ||
|
||
this.commitChanges = ({ added, changed, deleted }) => { | ||
let rows = this.state.rows; | ||
if (added) { | ||
const startingAddedId = (rows.length - 1) > 0 ? rows[rows.length - 1].id + 1 : 0; | ||
rows = [ | ||
...rows, | ||
...added.map((row, index) => ({ | ||
id: startingAddedId + index, | ||
...row, | ||
})), | ||
]; | ||
} | ||
if (changed) { | ||
rows = rows.map(row => (changed[row.id] ? { ...row, ...changed[row.id] } : row)); | ||
} | ||
if (deleted) { | ||
const deletedSet = new Set(deleted); | ||
rows = rows.filter(row => !deletedSet.has(row.id)); | ||
} | ||
this.setState({ rows }); | ||
}; | ||
} | ||
render() { | ||
const { rows, columns } = this.state; | ||
|
||
return ( | ||
<Grid | ||
rows={rows} | ||
columns={columns} | ||
getRowId={row => row.id} | ||
> | ||
<EditingState | ||
onCommitChanges={this.commitChanges} | ||
/> | ||
<TableView /> | ||
<TableHeaderRow /> | ||
<TableEditRow /> | ||
<TableEditColumn | ||
allowAdding | ||
allowEditing | ||
allowDeleting | ||
/> | ||
</Grid> | ||
); | ||
} | ||
} |
11 changes: 11 additions & 0 deletions
11
...es/dx-react-demos/src/bootstrap3/data-accessors/custom-data-accessors-in-columns.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import CustomDataAccessorsInColumns from './custom-data-accessors-in-columns'; | ||
|
||
describe('BS3: custom data accessors in columns demo', () => { | ||
it('should work', () => { | ||
mount( | ||
<CustomDataAccessorsInColumns />, | ||
); | ||
}); | ||
}); |
Oops, something went wrong.