module.exports = "import * as React from 'react';\r\nimport {\r\n  css,\r\n  getRTL\r\n} from '@uifabric/utilities';\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 './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";