office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 3.04 kB
JavaScript
module.exports = "/* tslint:disable:no-unused-variable */\nimport * as React from 'react';\n/* tslint:enable:no-unused-variable */\nimport {\n DetailsList,\n Link,\n Image,\n ImageFit,\n buildColumns,\n IColumn\n} from '../../../../index';\nimport { createListItems } from '../../../utilities/data';\n\nlet _items: any[];\n\nexport interface IDetailsListCustomColumnsExampleState {\n sortedItems?: any[];\n columns?: IColumn[];\n}\n\nexport class DetailsListCustomColumnsExample extends React.Component<{}, IDetailsListCustomColumnsExampleState> {\n\n constructor(props: {}) {\n super(props);\n\n _items = _items || createListItems(500);\n\n this.state = {\n sortedItems: _items,\n columns: _buildColumns()\n };\n }\n\n public render() {\n let { sortedItems, columns } = this.state;\n\n return (\n <DetailsList\n items={ sortedItems }\n setKey='set'\n columns={ columns }\n onRenderItemColumn={ _renderItemColumn }\n onColumnHeaderClick={ this._onColumnClick.bind(this) }\n onItemInvoked={ (item, index) => alert(`Item ${ item.name } at index ${ index } has been invoked.`) }\n onColumnHeaderContextMenu={ (column, ev) => console.log(`column ${ column.key } contextmenu opened.`) } />\n );\n }\n\n private _onColumnClick(column) {\n let { sortedItems, columns } = this.state;\n let isSortedDescending = column.isSortedDescending;\n\n // If we've sorted this column, flip it.\n if (column.isSorted) {\n isSortedDescending = !isSortedDescending;\n }\n\n // Sort the items.\n sortedItems = sortedItems.concat([]).sort((a, b) => {\n let firstValue = a[column.fieldName];\n let secondValue = b[column.fieldName];\n\n if (isSortedDescending) {\n return firstValue > secondValue ? -1 : 1;\n } else {\n return firstValue > secondValue ? 1 : -1;\n }\n });\n\n // Reset the items and columns to match the state.\n this.setState({\n sortedItems: sortedItems,\n columns: columns.map(col => {\n col.isSorted = (col.key === column.key);\n\n if (col.isSorted) {\n col.isSortedDescending = isSortedDescending;\n }\n\n return col;\n })\n });\n }\n}\n\nfunction _buildColumns() {\n let columns = buildColumns(_items);\n\n let thumbnailColumn = columns.filter(column => column.name === 'thumbnail')[0];\n\n // Special case one column's definition.\n thumbnailColumn.name = '';\n thumbnailColumn.maxWidth = 50;\n\n return columns;\n}\n\nfunction _renderItemColumn(item, index, column) {\n let fieldContent = item[column.fieldName];\n\n switch (column.key) {\n case 'thumbnail':\n return <Image src={ fieldContent } width={ 50 } height={ 50 } imageFit={ ImageFit.cover } />;\n\n case 'name':\n return <Link href='#'>{ fieldContent }</Link>;\n\n case 'color':\n return <span style={ { color: fieldContent } }>{ fieldContent }</span>;\n\n default:\n return <span>{ fieldContent }</span>;\n }\n}\n";