Bug fix - props haven't been passed to Layout components

README.md

@@ -27,7 +27,7 @@ yarn add ra-compact-ui
 ## Details View components
 
 ### Layouts
-Layout components which allow building custom Show Layouts using unlimited nesting of `material-ui`'s `Box` or `Grid` components while maintaining native use of all t of the `react-admin` field-related components. Each layout can be used inside the `Show` component as well as inside the `TabbedShowLayout`'s `Tab` component.
+Layout components which allow building custom Show Layouts using unlimited nesting of `material-ui`'s `Box` or `Grid` components while maintaining native use of all of the `react-admin` field-related components. Each layout can be used inside the `Show` component as well as inside the `TabbedShowLayout`'s `Tab` component.
 
 **Important** - In order for the layouts to work properly you should use the provided wrappers of the `material-ui`'s layout components named relatively - `RaBox` and `RaGrid`. They receive and pass directly all the props provided by the `material-ui`'s api.
 
@@ -92,7 +92,7 @@ const useStyles = makeStyles(theme => ({
 
 ## About Author
 
-An enthusiast in love with building software who likes to call it "the grown up's LEGO".
+An enthusiast in :sparkling_heart: with building software who likes to call it "the grown up's LEGO".
 
 If you enjoy the library and want to support me, you can always <a href="https://www.buymeacoffee.com/vdimitroff" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png" alt="Buy Me A Coffee" /></a>
 

package.json

@@ -27,7 +27,7 @@
     "test": "jest",
     "babel-transpile": "babel src -d dist",
     "build": "rimraf ./dist && yarn babel-transpile",
-    "prepublish": "yarn build"
+    "prepare": "yarn build"
   },
   "repository": "https://github.com/ValentinnDimitroff/ra-compact-ui.git",
   "author": "Valentin Dimitroff",

src/details/CompactShowLayout.js

@@ -4,7 +4,6 @@ import { CardContentInner } from 'react-admin';
 import RaField from './RaField';
 
 const EMPTY_LAYOUT_NODE_ERROR = "Layout node has no found children! Nesting layout components should always end with a ra-field of any type!"
-let count = 0;
 
 const sanitizeRestProps = ({
     children,
@@ -26,38 +25,34 @@ const isLayoutComponent = (child, layoutComponentName) => {
         child.type.displayName === layoutComponentName)
 }
 
-const recursivelyFindField = ({ child, index, ...props }) => {
-    count++;
-
+const recursivelyFindField = ({ child, ...props }) => {
+
     if (isLayoutComponent(child, props.layoutComponentName)) {
         // Clone current layout element and continue traversing children
         return cloneElement(
             child,
             {
-                key: `RaShowLayoutKey-${count}`,
                 children: Children.count(child.props.children) > 1
-                    ? child.props.children.map(innerChild =>
-                        recursivelyFindField({
-                            child: innerChild,
-                            index: index,
-                            ...props
-                        }))
-                    : recursivelyFindField({
-                        child: child.props.children,
-                        index: index,
-                        ...props
-                    })
+                        ? (
+                            child.props.children.map(innerChild =>
+                                recursivelyFindField({
+                                    child: innerChild,
+                                    ...props
+                                }))
+                        ) : (
+                            recursivelyFindField({
+                                child: child.props.children,
+                                ...props
+                            })
+                        )
             });
     }
 
-    const { layoutComponentName, ...rest } = props;
-
-    // Non-layout element found
+    // Non-layout element found - recursion end
     return (
         <RaField
-            key={child.props.source}
             field={child}
-            {...rest}
+            {...props}
         />
     );
 }
@@ -80,23 +75,22 @@ const CompactShowLayout = ({
             {...sanitizeRestProps(rest)}
         >
             {
-                Children.map(children, (child, index) =>
+                Children.map(children, (child) =>
                     child && isValidElement(child)
                         ? recursivelyFindField({
                             layoutComponentName,
                             child,
                             record,
                             resource,
                             basePath,
-                            index: index + 100,
                         }) : null
                 )
             }
         </CardContentInner>
     )
 }
 
-export const compactShowLayoutPropTypes = {
+CompactShowLayout.propTypes = {
     basePath: PropTypes.string,
     record: PropTypes.object,
     resource: PropTypes.string,
@@ -106,8 +100,4 @@ export const compactShowLayoutPropTypes = {
     layoutComponentName: PropTypes.string,
 }
 
-CompactShowLayout.propTypes = {
-    ...compactShowLayoutPropTypes,
-}
-
 export default CompactShowLayout

src/details/RaBox.js

@@ -1,11 +1,14 @@
 import React, { Children, cloneElement } from 'react'
 import Box from '@material-ui/core/Box'
 
-const RaBox = ({ children, props }) => (
-    <Box {...props}>
-        {Children.map(children, (ch, index) => cloneElement(ch, { key: index }))}
-    </Box>
-)
+const RaBox = ({ children, ...props }) => {
+
+    return (
+        <Box {...props}>
+            {Children.map(children, (child) => cloneElement(child))}
+        </Box>
+    )
+}
 
 RaBox.displayName = "RaBox";
 

src/details/RaField.js

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { Labeled } from 'react-admin'
 
+const sanitizeRestProps = ({
+    layoutComponentName,
+    ...rest
+}) => rest;
+
 const RaField = ({
     field,
     record,
@@ -12,11 +17,12 @@ const RaField = ({
 }) => {
     return (
         <div
-            {...props}
+            key={field.props.source}
             className={classnames(
                 `ra-field ra-field-${field.props.source}`,
                 field.props.className
             )}
+            {...sanitizeRestProps(props)}
         >
             {field.props.addLabel ? (
                 <Labeled

src/details/RaGrid.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import Grid from '@material-ui/core/Grid'
 
-const RaGrid = props => (
-    <Grid {...props} />
+const RaGrid = ({ children, ...props }) => (
+    <Grid {...props}>
+        {Children.map(children, (child) => cloneElement(child))}
+    </Grid>
 )
 
 RaGrid.displayName = "RaGrid";