office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.22 kB
JavaScript
define([], function() { return "/* tslint:disable:no-unused-variable */\r\nimport * as React from 'react';\r\n/* tslint:enable:no-unused-variable */\r\nimport {\r\n DetailsList,\r\n IGroup,\r\n Link\r\n} from '../../../../index';\r\nimport { createListItems, createGroups } from '../../../utilities/data';\r\nimport './DetailsListExample.scss';\r\n\r\nconst ITEMS_PER_GROUP = 20;\r\nconst GROUP_COUNT = 20;\r\n\r\nlet _items: any[];\r\nlet _groups: IGroup[];\r\n\r\nexport class DetailsListCustomGroupHeadersExample extends React.Component<any, any> {\r\n constructor() {\r\n super();\r\n\r\n _items = _items || createListItems(500);\r\n _groups = _groups || createGroups(GROUP_COUNT, 1, 0, ITEMS_PER_GROUP);\r\n }\r\n\r\n public render() {\r\n return (\r\n <div>\r\n <DetailsList\r\n items={_items}\r\n groups={_groups}\r\n groupProps={{\r\n onRenderHeader: props => (\r\n <div className='DetailsListExample-customHeader'>\r\n <div className='DetailsListExample-customHeaderTitle'>{`I am a custom header for: ${props.group.name}`}</div>\r\n <div className='DetailsListExample-customHeaderLinkSet'>\r\n <Link\r\n className='DetailsListExample-customHeaderLink'\r\n onClick={ () => props.onToggleSelectGroup(props.group) }>\r\n { props.isSelected ? 'Remove selection' : 'Select group' }\r\n </Link>\r\n <Link\r\n className='DetailsListExample-customHeaderLink'\r\n onClick={() => props.onToggleCollapse(props.group)}>\r\n { props.group.isCollapsed ? 'Expand group' : 'Collapse group' }\r\n </Link>\r\n </div>\r\n </div>\r\n ),\r\n onRenderFooter: props => (\r\n <div className='DetailsListExample-customHeader'>\r\n <div className='DetailsListExample-customHeaderTitle'>{`I'm a custom footer for: ${props.group.name}`}</div>\r\n </div>\r\n )\r\n }}\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n}\r\n"; });