office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.97 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n GroupedList,\r\n IGroup,\r\n IGroupDividerProps\r\n} from '../../../../components/GroupedList/index';\r\nimport { Link } from '../../../../Link';\r\nimport { createListItems, createGroups } from '../../../utilities/data';\r\nimport './GroupedList.Custom.Example.scss';\r\n\r\nexport class GroupedListCustomExample extends React.Component<any, any> {\r\n private _items: any[];\r\n private _groups: IGroup[];\r\n\r\n constructor() {\r\n super();\r\n\r\n this._items = createListItems(20);\r\n this._groups = createGroups(4, 0, 0, 5);\r\n }\r\n\r\n public render() {\r\n return (\r\n <GroupedList\r\n ref='groupedList'\r\n items={this._items}\r\n onRenderCell={this._onRenderCell}\r\n groupProps={\r\n {\r\n onRenderHeader: this._onRenderHeader,\r\n onRenderFooter: this._onRenderFooter\r\n }\r\n }\r\n groups={this._groups}\r\n />\r\n );\r\n }\r\n\r\n private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {\r\n return (\r\n <div data-selection-index={itemIndex}>\r\n <span className='ms-GroupedListExample-name'>\r\n {item.name}\r\n </span>\r\n </div>\r\n );\r\n }\r\n\r\n private _onRenderHeader(props: IGroupDividerProps): JSX.Element {\r\n return (\r\n <div className='ms-GroupedListExample-header ms-font-xl'>\r\n This is a custom header for {props.group.name}\r\n (<Link onClick={ () => props.onToggleCollapse(props.group) }>{ props.group.isCollapsed ? 'Expand' : 'Collapse' }</Link>)\r\n </div>\r\n );\r\n }\r\n\r\n private _onRenderFooter(props: IGroupDividerProps): JSX.Element {\r\n return (\r\n <div className='ms-GroupedListExample-footer ms-font-xl'>\r\n This is a custom footer for {props.group.name}\r\n </div>\r\n );\r\n }\r\n}\r\n"; });