import React from 'react' ; import classnames from 'classnames' ; export interface ListItemTextProps { tabIndex ? : number ; className ? : string ; primaryText ? : React . ReactNode ; secondaryText ? : React . ReactNode ; childrenTabIndex ? : number ; } function isReactElement ( element ) { return element !== null && element . props !== undefined ; } const ListItemText = ( { primaryText = '' , secondaryText = '' , tabIndex = - 1 , className = '' , ... otherProps } ) => { const renderText = ( text , className ) => { if ( text === undefined ) return null ; if ( typeof text === 'string' || typeof text === 'number' ) { return ( < span className = { className } tabIndex = { tabIndex !== undefined ? tabIndex : - 1 } > { text } < /span>); } if ( ! isReactElement ( text ) ) return null ; const { className : textClassName , ... otherProps } = text . props ; className = classnames ( className , textClassName ) ; const props = { ... otherProps , className } ; return React . cloneElement ( text , props ) ; } ; if ( ! secondaryText ) { return renderText ( primaryText , classnames ( 'mdc-list-item__text' , className ) ) ; } return ( < span className = { classnames ( 'mdc-list-item__text' , className ) } tabIndex = { tabIndex !== undefined ? tabIndex : - 1 } { ... otherProps } > { renderText ( primaryText , 'mdc-list-item__primary-text' ) } { renderText ( secondaryText , 'mdc-list-item__secondary-text' ) } < /span>); } ; export default ListItemText ;