import * as React from 'react' ; import { memo , useMemo , ReactElement } from 'react' ; import PropTypes from 'prop-types' ; import ImageEye from '@material-ui/icons/RemoveRedEye' ; import { Link } from 'react-router-dom' ; import { linkToRecord , Record , useResourceContext } from 'ra-core' ; import Button , { ButtonProps } from './Button' ; example const ShowButton = ( props ) => { const { basePath = '' , icon = defaultIcon , label = 'ra.action.show' , record , scrollToTop = true , ... rest } = props ; const resource = useResourceContext ( ) ; return ( < Button component = { Link } to = { useMemo ( ( ) => ( { pathname : record ? `${ linkToRecord ( basePath || `/${ resource }` , record . id ) }/show` : '' , state : { _scrollToTop : scrollToTop } , } ) , [ basePath , record , resource , scrollToTop ] ) } label = { label } onClick = { stopPropagation } { ... ( rest as any ) } > { icon } < /Button>); } ; const defaultIcon = < ImageEye />; const stopPropagation = e => e . stopPropagation ( ) ; interface Props { basePath ? : string ; icon ? : ReactElement ; label ? : string ; record ? : Record ; scrollToTop ? : boolean ; } export type ShowButtonProps = Props & ButtonProps ; ShowButton . propTypes = { basePath : PropTypes . string , icon : PropTypes . element , label : PropTypes . string , record : PropTypes . any , scrollToTop : PropTypes . bool , } ; const PureShowButton = memo ( ShowButton , ( props , nextProps ) => ( props . record && nextProps . record ? props . record . id === nextProps . record . id : props . record == nextProps . record ) && props . basePath === nextProps . basePath && props . to === nextProps . to && props . disabled === nextProps . disabled ) ; export default PureShowButton ;