import * as React from 'react' ; import { cloneElement , Children , HtmlHTMLAttributes , ComponentType , } from 'react' ; import PropTypes from 'prop-types' ; import classnames from 'classnames' ; import LinearProgress from '@material-ui/core/LinearProgress' ; import { makeStyles } from '@material-ui/core/styles' ; import { linkToRecord , sanitizeListRestProps , useListContext , useResourceContext , Record , RecordMap , Identifier , RecordContextProvider , ComponentPropType , } from 'ra-core' ; import Link from '../Link' ; import { ClassesOverride } from '../types' ; const useStyles = makeStyles ( theme => ( { root : { display : 'flex' , flexWrap : 'wrap' , marginTop : - theme . spacing ( 1 ) , marginBottom : - theme . spacing ( 1 ) , } , link : { } , } ) , { name : 'RaSingleFieldList' } ) ; const stopPropagation = e => e . stopPropagation ( ) ; const handleClick = ( ) => { } ; example example example const SingleFieldList = ( props ) => { const { classes : classesOverride , className , children , linkType = 'edit' , component = 'div' , ... rest } = props ; const { ids , data , loaded , basePath } = useListContext ( props ) ; const resource = useResourceContext ( props ) ; const classes = useStyles ( props ) ; const Component = component ; if ( loaded === false ) { return < LinearProgress />; } return ( < Component className = { classnames ( classes . root , className ) } { ... sanitizeListRestProps ( rest ) } > { ids . map ( id => { const resourceLinkPath = ! linkType ? false : linkToRecord ( basePath , id , linkType ) ; if ( resourceLinkPath ) { return ( < RecordContextProvider value = { data [ id ] } key = { id } > < Link className = { classes . link } key = { id } to = { resourceLinkPath } onClick = { stopPropagation } > { cloneElement ( Children . only ( children ) , { record : data [ id ] , resource , basePath , onClick : handleClick , } ) } < /Link> < /RecordContextProvider>); } return ( < RecordContextProvider value = { data [ id ] } key = { id } > { cloneElement ( Children . only ( children ) , { key : id , record : data [ id ] , resource , basePath , } ) } < /RecordContextProvider>); } ) } < /Component>); } ; SingleFieldList . propTypes = { basePath : PropTypes . string , children : PropTypes . element . isRequired , classes : PropTypes . object , className : PropTypes . string , component : ComponentPropType , data : PropTypes . any , ids : PropTypes . array , linkType : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . bool ] ) , resource : PropTypes . string , } ; export interface SingleFieldListProps < RecordType extends Record = Record > extends HtmlHTMLAttributes < HTMLDivElement > { className ? : string ; classes ? : ClassesOverride < typeof useStyles > ; component ? : string | ComponentType < any > ; linkType ? : string | false ; children : React . ReactElement ; basePath ? : string ; data ? : RecordMap < RecordType > ; ids ? : Identifier [ ] ; loaded ? : boolean ; } export default SingleFieldList ;