import * as React from 'react' ; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox' ; import { Button , ButtonType , } from 'office-ui-fabric-react/lib/Button' ; import { FocusZone , FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone' ; import { css } from 'office-ui-fabric-react/lib/Utilities' ; import styles from './TodoListItem.module.scss' ; import ITodoItem from '../../models/ITodoItem' ; import ITodoListItemProps from './ITodoListItemProps' ; import * as update from 'immutability-helper' ; export default class TodoListItem extends React . Component < ITodoListItemProps , { } > { constructor ( props ) { super ( props ) ; this . _handleToggleChanged = this . _handleToggleChanged . bind ( this ) ; this . _handleDeleteClick = this . _handleDeleteClick . bind ( this ) ; } public shouldComponentUpdate ( newProps ) { return ( this . props . item !== newProps . item || this . props . isChecked !== newProps . isChecked ) ; } public render ( ) { const classTodoItem = css ( styles . todoListItem , 'ms-Grid' , 'ms-u-slideDownIn20' ) ; return ( < div role = 'row' className = { classTodoItem } data - is - focusable = { true } > < FocusZone direction = { FocusZoneDirection . horizontal } > < div className = { css ( styles . itemTaskRow , 'ms-Grid-row' ) } > < Checkbox className = { css ( styles . checkbox , 'ms-Grid-col' , 'ms-u-sm11' ) } label = { this . props . item . Title } onChange = { this . _handleToggleChanged } checked = { this . props . isChecked } / > < Button className = { css ( styles . deleteButton , 'ms-Grid-col' , 'ms-u-sm1' ) } buttonType = { ButtonType . icon } iconProps = { { iconName : 'Cancel' } } onClick = { this . _handleDeleteClick } / > < /div> < /FocusZone> < /div>); } private _handleToggleChanged ( ev , checked ) { const newItem = update ( this . props . item , { PercentComplete : { $set : this . props . item . PercentComplete >= 1 ? 0 : 1 } } ) ; this . props . onCompleteListItem ( newItem ) ; } private _handleDeleteClick ( event ) { this . props . onDeleteListItem ( this . props . item ) ; } }