import React from 'react' ; import TopAppBar , { TopAppBarIcon , TopAppBarRow , TopAppBarSection , TopAppBarTitle , } from '../../../packages/top-app-bar' ; import MainTopAppBarContent from './mainContent' ; import { mapActionItem } from './index' ; import { actionItems } from './actionItems' ; import { withRipple , InjectedProps } from '../../../packages/ripple' ; interface RippleProps extends InjectedProps < HTMLAnchorElement > { hasRipple ? : boolean ; } const NavigationIcon = ( { hasRipple , initRipple , unbounded , ... otherProps } ) => ( < a onClick = { ( ) => console . log ( 'navigation icon click' ) } ref = { initRipple } { ... otherProps } > < svg width = '24px' height = '24px' xmlns = 'http://www.w3.org/2000/svg' className = 'material-icons' viewBox = '0 0 24 24' fill = '#fff' > < path fill = 'none' d = 'M0 0h24v24H0z' / > < path d = 'M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11 - 4.93 11 - 11 zM5 17.64 C3 .75 16.1 3 14.14 3 12 c0 - 2.13 .76 - 4.08 2 - 5.63 v11 .27 zM17 .64 5 H6 .36 C7 .9 3.75 9.86 3 12 3 s4 .1 .75 5.64 2 zM12 14.53 L8 .24 7 h7 .53 L12 14.53 zM17 9 v8h - 4 l4 - 8 zm - 6 8 H7V9l4 8 zm6 .64 2 c - 1.55 1.25 - 3.51 2 - 5.64 2 s - 4.1 - .75 - 5.64 - 2 h11 .28 zM21 12 c0 2.14 - .75 4.1 - 2 5.64 V6 .37 c1 .24 1.55 2 3.5 2 5.63 z '/> < /svg> < /a>); const NavigationIconWithRipple = withRipple < RippleProps , HTMLAnchorElement > ( NavigationIcon ) ; const title = 'Miami, FL' ; const TopAppBarStandardWithNavigationIconElementScreenshotTest = ( ) => { return ( < div className = 'top-app-bar-container' > < TopAppBar > < TopAppBarRow > < TopAppBarSection align = 'start' > < TopAppBarIcon navIcon tabIndex = { 0 } > < NavigationIconWithRipple unbounded / > < /TopAppBarIcon> < TopAppBarTitle > { title } < /TopAppBarTitle> < /TopAppBarSection> < TopAppBarSection align = 'end' role = 'toolbar' > { actionItems . map ( mapActionItem ) } < /TopAppBarSection> < /TopAppBarRow> < /TopAppBar> < MainTopAppBarContent / > < /div>); } ; export default TopAppBarStandardWithNavigationIconElementScreenshotTest ;