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