office-ui-fabric-react/lib/demo/pages/GroupedListPage/examples/GroupedList.Custom.Example.tsx.js

Reusable React components for building experiences for Office 365.

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";