office-ui-fabric-react/lib/demo/pages/ListPage/examples/List.Mail.Example.tsx.js

Reusable React components for building experiences for Office 365.

module.exports = "import * as React from 'react';\nimport {\n  List\n} from '../../../../index';\nimport './List.Mail.Example.scss';\n\nexport class MailTile extends React.Component<any, any> {\n  public render() {\n    let { item } = this.props;\n    return (\n      <div className='ms-ListItem is-unread is-selectable'>\n        <span className='ms-ListItem-primaryText'>{ item.name }</span>\n        <span className='ms-ListItem-secondaryText'>{ item.title }</span>\n        <span className='ms-ListItem-tertiaryText'>{ item.description }</span>\n        <span className='ms-ListItem-metaText'>2:42p</span>\n        <div className='ms-ListItem-selectionTarget js-toggleSelection'></div>\n        <div className='ms-ListItem-actions'>\n          <div className='ms-ListItem-action'></div>\n          <div className='ms-ListItem-action'></div>\n          <div className='ms-ListItem-action'></div>\n          <div className='ms-ListItem-action'></div>\n        </div>\n    </div>\n    );\n  }\n}\n\nexport interface IListMailExampleProps {\n  items: any[];\n}\n\nexport class ListMailExample extends React.Component<IListMailExampleProps, any> {\n  public render() {\n    return (\n      <div>\n        <h1 className='ms-font-xxl'>Inbox</h1>\n        <div className='MailList' data-is-scrollable={ true }>\n          <List\n            items={ this.props.items }\n            onRenderCell={ (item, index) => (\n              <MailTile item={ item } />\n            )}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n";