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

Reusable React components for building experiences for Office 365.

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