diff --git a/packages/ra-ui-materialui/src/list/SingleFieldList.tsx b/packages/ra-ui-materialui/src/list/SingleFieldList.tsx index 4fd949ab371..8e91e74bcba 100644 --- a/packages/ra-ui-materialui/src/list/SingleFieldList.tsx +++ b/packages/ra-ui-materialui/src/list/SingleFieldList.tsx @@ -1,5 +1,11 @@ import * as React from 'react'; -import { cloneElement, Children, HtmlHTMLAttributes, FC } from 'react'; +import { + cloneElement, + Children, + HtmlHTMLAttributes, + FC, + ComponentType, +} from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import LinearProgress from '@material-ui/core/LinearProgress'; @@ -10,6 +16,7 @@ import { useListContext, useResourceContext, RecordContextProvider, + ComponentPropType, } from 'ra-core'; import Link from '../Link'; @@ -74,19 +81,21 @@ const SingleFieldList: FC = props => { 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 ; } return ( -
@@ -97,7 +106,7 @@ const SingleFieldList: FC = props => { if (resourceLinkPath) { return ( - + = props => { } return ( - + {cloneElement(Children.only(children), { key: id, record: data[id], @@ -127,7 +136,7 @@ const SingleFieldList: FC = props => { ); })} -
+ ); }; @@ -136,6 +145,7 @@ SingleFieldList.propTypes = { children: PropTypes.element.isRequired, classes: PropTypes.object, className: PropTypes.string, + component: ComponentPropType, data: PropTypes.object, ids: PropTypes.array, // @ts-ignore @@ -147,6 +157,7 @@ export interface SingleFieldListProps extends HtmlHTMLAttributes { className?: string; classes?: ClassesOverride; + component?: ComponentType; linkType?: string | false; children: React.ReactElement; }