office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.35 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n GroupedList,\r\n IGroup\r\n} from '../../../../components/GroupedList/index';\r\nimport { IColumn } from '../../../../DetailsList';\r\nimport { DetailsRow } from '../../../../components/DetailsList/DetailsRow';\r\nimport {\r\n FocusZone\r\n} from '../../../../FocusZone';\r\nimport {\r\n Selection,\r\n SelectionMode,\r\n SelectionZone\r\n} from '../../../../utilities/selection/index';\r\n\r\nimport {\r\n createListItems,\r\n createGroups\r\n} from '../../../utilities/data';\r\n\r\nconst groupCount = 15;\r\nconst groupDepth = 3;\r\nconst items = createListItems(Math.pow(groupCount, groupDepth + 1));\r\n\r\nexport class GroupedListBasicExample extends React.Component<any, any> {\r\n private _selection: Selection;\r\n private _groups: IGroup[];\r\n\r\n constructor() {\r\n super();\r\n this._onRenderCell = this._onRenderCell.bind(this);\r\n this._selection = new Selection;\r\n this._selection.setItems(items);\r\n\r\n this._groups = createGroups(groupCount, groupDepth, 0, groupCount);\r\n }\r\n\r\n public render() {\r\n return (\r\n <FocusZone>\r\n <SelectionZone\r\n selection={ this._selection }\r\n selectionMode={ SelectionMode.multiple }\r\n >\r\n <GroupedList\r\n items={ items }\r\n onRenderCell={ this._onRenderCell }\r\n selection={ this._selection }\r\n selectionMode={ SelectionMode.multiple }\r\n groups={ this._groups }\r\n />\r\n </SelectionZone>\r\n </FocusZone>\r\n );\r\n }\r\n\r\n private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {\r\n let {\r\n _selection: selection\r\n } = this;\r\n return (\r\n <DetailsRow\r\n columns={\r\n Object.keys(item).slice(0, 3).map((value): IColumn => {\r\n return {\r\n key: value,\r\n name: value,\r\n fieldName: value,\r\n minWidth: 300\r\n };\r\n })\r\n }\r\n groupNestingDepth={ nestingDepth }\r\n item={ item }\r\n itemIndex={ itemIndex }\r\n selection={ selection }\r\n selectionMode={ SelectionMode.multiple }\r\n />\r\n );\r\n }\r\n}\r\n"; });