office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.18 kB
JavaScript
module.exports = "/* tslint:disable:no-unused-variable */\nimport * as React from 'react';\n/* tslint:enable:no-unused-variable */\nimport {\n DetailsList,\n MarqueeSelection,\n Selection,\n TextField,\n Link\n} from '../../../../index';\nimport { createListItems } from '../../../utilities/data';\n\nlet _items: any[];\n\nexport class DetailsListBasicExample extends React.Component<any, any> {\n private _selection: Selection;\n\n constructor() {\n super();\n\n _items = _items || createListItems(500);\n\n this._onRenderItemColumn = this._onRenderItemColumn.bind(this);\n this._selection = new Selection({\n onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })\n });\n\n this.state = {\n items: _items,\n selectionDetails: this._getSelectionDetails()\n };\n }\n\n public render() {\n let { items, selectionDetails } = this.state;\n\n return (\n <div>\n <div>{ selectionDetails }</div>\n <TextField\n label='Filter by name:'\n onChanged={ text => this.setState({ items: text ? _items.filter(i => i.name.toLowerCase().indexOf(text) > -1) : _items }) }\n />\n <MarqueeSelection selection={ this._selection }>\n <DetailsList\n items={ items }\n setKey='set'\n selection={ this._selection }\n onItemInvoked={ (item) => alert(`Item invoked: ${item.name}`) }\n onRenderItemColumn={ this._onRenderItemColumn }\n />\n </MarqueeSelection>\n </div>\n );\n }\n\n private _onRenderItemColumn(item, index, column) {\n if (column.key === 'name') {\n return <Link data-selection-invoke={ true }>{ item[column.key] }</Link>;\n }\n\n return item[column.key];\n }\n\n private _getSelectionDetails(): string {\n let selectionCount = this._selection.getSelectedCount();\n\n switch (selectionCount) {\n case 0:\n return 'No items selected';\n case 1:\n return '1 item selected: ' + (this._selection.getSelection()[0] as any).name;\n default:\n return `${ selectionCount } items selected`;\n }\n }\n}\n";