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