import * as React from 'react' ; import { List } from 'office-ui-fabric-react/lib/List' ; import { FocusZone , FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone' ; import { getRTLSafeKeyCode , KeyCodes } from 'office-ui-fabric-react/lib/Utilities' ; import ITodoListProps from './ITodoListProps' ; import TodoListItem from '../TodoListItem/TodoListItem' ; import ITodoItem from '../../models/ITodoItem' ; import styles from './TodoList.module.scss' ; export default class TodoList extends React . Component < ITodoListProps , { } > { constructor ( props ) { super ( props ) ; this . _onRenderCell = this . _onRenderCell . bind ( this ) ; } public render ( ) { return ( < FocusZone direction = { FocusZoneDirection . vertical } isInnerZoneKeystroke = { ( ev ) => ev . which === getRTLSafeKeyCode ( KeyCodes . right ) } > < List className = { styles . todoList } items = { this . props . items } onRenderCell = { this . _onRenderCell } / > < /FocusZone>); } private _onRenderCell ( item , index ) { return ( < TodoListItem item = { item } isChecked = { item . PercentComplete >= 1 ? true : false } onCompleteListItem = { this . props . onCompleteTodoItem } onDeleteListItem = { this . props . onDeleteTodoItem } / > ) ; } }