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

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport {\r\n  FocusZone,\r\n  FocusZoneDirection,\r\n  TextField,\r\n  Image,\r\n  ImageFit,\r\n  List\r\n} from '../../../../index';\r\nimport { css } from '../../../../utilities/css';\r\nimport { getRTL } from '../../../../utilities/rtl';\r\nimport './List.Basic.Example.scss';\r\n\r\nexport interface IListBasicExampleProps {\r\n  items: any[];\r\n}\r\n\r\nexport interface IListBasicExampleState {\r\n  filterText?: string;\r\n  items?: any[];\r\n}\r\n\r\nexport class ListBasicExample extends React.Component<IListBasicExampleProps, any> {\r\n  constructor(props: IListBasicExampleProps) {\r\n    super(props);\r\n\r\n    this._onFilterChanged = this._onFilterChanged.bind(this);\r\n\r\n    this.state = {\r\n      filterText: '',\r\n      items: props.items\r\n    };\r\n  }\r\n\r\n  public render() {\r\n    let { items: originalItems } = this.props;\r\n    let { items } = this.state;\r\n    let resultCountText = items.length === originalItems.length ? '' : ` (${ items.length } of ${ originalItems.length } shown)`;\r\n\r\n    return (\r\n      <FocusZone direction={ FocusZoneDirection.vertical }>\r\n        <TextField label={ 'Filter by name' + resultCountText } onBeforeChange={ this._onFilterChanged } />\r\n          <List\r\n            items={ items }\r\n            onRenderCell={ (item, index) => (\r\n              <div className='ms-ListBasicExample-itemCell' data-is-focusable={ true }>\r\n                <Image\r\n                  className='ms-ListBasicExample-itemImage'\r\n                  src={ item.thumbnail }\r\n                  width={ 50 }\r\n                  height={ 50 }\r\n                  imageFit={ ImageFit.cover }\r\n                 />\r\n                <div className='ms-ListBasicExample-itemContent'>\r\n                  <div className='ms-ListBasicExample-itemName ms-font-xl'>{ item.name }</div>\r\n                  <div className='ms-ListBasicExample-itemIndex'>{ `Item ${ index }` }</div>\r\n                  <div className='ms-ListBasicExample-itemDesc ms-font-s'>{ item.description }</div>\r\n                </div>\r\n                <i className={ css('ms-ListBasicExample-chevron ms-Icon', {\r\n                  'ms-Icon--chevronRight': !getRTL(),\r\n                  'ms-Icon--chevronLeft': getRTL()\r\n                }) } />\r\n              </div>\r\n            ) }\r\n          />\r\n        </FocusZone>\r\n    );\r\n  }\r\n\r\n  private _onFilterChanged(text: string) {\r\n    let { items } = this.props;\r\n\r\n    this.setState({\r\n      filterText: text,\r\n      items: text ?\r\n        items.filter(item => item.name.toLowerCase().indexOf(text.toLowerCase()) >= 0) :\r\n        items\r\n    });\r\n  }\r\n}\r\n"; });