office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.62 kB
JavaScript
module.exports = "/* tslint:disable:no-unused-variable */\r\nimport * as React from 'react';\r\n/* tslint:enable:no-unused-variable */\r\nimport {\r\n Button,\r\n DetailsList,\r\n Fabric\r\n} from '../../../../index';\r\n\r\nlet _columns = [\r\n {\r\n key: 'name',\r\n name: 'Name',\r\n fieldName: 'name',\r\n minWidth: 100,\r\n maxWidth: 200,\r\n isResizable: true\r\n },\r\n {\r\n key: 'color',\r\n name: 'Color',\r\n fieldName: 'color',\r\n minWidth: 100,\r\n maxWidth: 200\r\n }\r\n];\r\nlet _items = [\r\n {\r\n key: 'a',\r\n name: 'a',\r\n color: 'red'\r\n },\r\n {\r\n key: 'b',\r\n name: 'b',\r\n color: 'red'\r\n },\r\n {\r\n key: 'c',\r\n name: 'c',\r\n color: 'blue'\r\n },\r\n {\r\n key: 'd',\r\n name: 'd',\r\n color: 'blue'\r\n },\r\n {\r\n key: 'e',\r\n name: 'e',\r\n color: 'blue'\r\n }\r\n];\r\n\r\nfunction groupBy(items, fieldName) {\r\n let groups = items.reduce((currentGroups, currentItem, index) => {\r\n let lastGroup = currentGroups[currentGroups.length - 1];\r\n let fieldValue = currentItem[fieldName];\r\n\r\n if (!lastGroup || lastGroup.value !== fieldValue) {\r\n currentGroups.push({\r\n key: 'group' + fieldValue + index,\r\n name: `By \"${fieldValue}\"`,\r\n value: fieldValue,\r\n startIndex: index,\r\n level: 0,\r\n count: 0\r\n });\r\n }\r\n if (lastGroup) {\r\n lastGroup.count = index - lastGroup.startIndex;\r\n }\r\n return currentGroups;\r\n }, []);\r\n\r\n // Fix last group count\r\n let lastGroup = groups[groups.length - 1];\r\n\r\n if (lastGroup) {\r\n lastGroup.count = items.length - lastGroup.startIndex;\r\n }\r\n\r\n return groups;\r\n}\r\n\r\nexport class DetailsListGroupedExample extends React.Component<any, any> {\r\n constructor() {\r\n super();\r\n\r\n this.state = {\r\n items: _items\r\n };\r\n }\r\n\r\n public render() {\r\n let { items } = this.state;\r\n\r\n return (\r\n <Fabric className='foo'>\r\n <Button onClick={ () => this._addItem() }>Add an item</Button>\r\n <DetailsList\r\n items={ items }\r\n groups={ groupBy(items, 'color') }\r\n columns={ _columns }\r\n />\r\n </Fabric>\r\n );\r\n }\r\n\r\n private _addItem() {\r\n let items = this.state.items;\r\n\r\n this.setState({\r\n items: items.concat([{\r\n key: 'item-' + items.length,\r\n name: 'New item ' + items.length,\r\n color: 'blue'\r\n }])\r\n });\r\n }\r\n\r\n}\r\n";