diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js index d8dd16205ca..a11202dfe88 100644 --- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js +++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js @@ -1,16 +1,9 @@ -import React, { - Component, - Children, - cloneElement, - isValidElement, -} from 'react'; +import React, { Children, cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; import Divider from '@material-ui/core/Divider'; import { withRouter, Route } from 'react-router-dom'; -import compose from 'recompose/compose'; -import { translate } from 'ra-core'; +import { makeStyles } from '@material-ui/core/styles'; -import CardContentInner from '../layout/CardContentInner'; import TabbedShowLayoutTabs from './TabbedShowLayoutTabs'; const sanitizeRestProps = ({ @@ -32,6 +25,14 @@ const getTabFullPath = (tab, index, baseUrl) => tab.props.path ? `/${tab.props.path}` : index > 0 ? `/${index}` : '' }`; +const useStyles = makeStyles(theme => ({ + content: { + paddingTop: theme.spacing(1), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + }, +})); + /** * Tabbed Layout for a Show view, showing fields grouped in tabs. * @@ -71,63 +72,56 @@ const getTabFullPath = (tab, index, baseUrl) => * ); * export default App; */ -export class TabbedShowLayout extends Component { - render() { - const { - basePath, - children, - className, - location, - match, - record, - resource, - translate, - version, - value, - tabs, - ...rest - } = this.props; +const TabbedShowLayout = ({ + basePath, + children, + classes: classesOverride, + className, + location, + match, + record, + resource, + version, + value, + tabs, + ...rest +}) => { + const classes = useStyles({ classes: classesOverride }); + return ( +
+ {cloneElement( + tabs, + { + // The location pathname will contain the page path including the current tab path + // so we can use it as a way to determine the current tab + value: location.pathname, + match, + }, + children + )} - return ( -
- {cloneElement( - tabs, - { - // The location pathname will contain the page path including the current tab path - // so we can use it as a way to determine the current tab - value: location.pathname, - match, - }, - children + +
+ {Children.map(children, (tab, index) => + tab && isValidElement(tab) ? ( + + cloneElement(tab, { + context: 'content', + resource, + record, + basePath, + }) + } + /> + ) : null )} - - - - {Children.map(children, (tab, index) => - tab && isValidElement(tab) ? ( - - cloneElement(tab, { - context: 'content', - resource, - record, - basePath, - }) - } - /> - ) : null - )} -
- ); - } -} +
+ ); +}; TabbedShowLayout.propTypes = { children: PropTypes.node, @@ -139,7 +133,6 @@ TabbedShowLayout.propTypes = { basePath: PropTypes.string, value: PropTypes.number, version: PropTypes.number, - translate: PropTypes.func, tabs: PropTypes.element, }; @@ -147,9 +140,4 @@ TabbedShowLayout.defaultProps = { tabs: , }; -const enhance = compose( - withRouter, - translate -); - -export default enhance(TabbedShowLayout); +export default withRouter(TabbedShowLayout); diff --git a/packages/ra-ui-materialui/src/input/Labeled.tsx b/packages/ra-ui-materialui/src/input/Labeled.tsx index 46d91055fe4..1e0f64837e3 100644 --- a/packages/ra-ui-materialui/src/input/Labeled.tsx +++ b/packages/ra-ui-materialui/src/input/Labeled.tsx @@ -61,6 +61,7 @@ export const Labeled: FunctionComponent = ({ input, isRequired, label, + margin = 'dense', meta, resource, source, @@ -82,6 +83,7 @@ export const Labeled: FunctionComponent = ({ className={className} fullWidth={fullWidth} error={meta && meta.touched && !!meta.error} + margin={margin} >