Update ListGuesser with DataTable

Author: erwanMarmelab

packages/ra-ui-materialui/src/list/ListGuesser.tsx

@@ -18,11 +18,11 @@ import { listFieldTypes } from './listFieldTypes';
 import { capitalize, singularize } from 'inflection';
 
 /**
- * List component rendering a <Datagrid> based on the result of the
+ * List component rendering a <DataTable> based on the result of the
  * dataProvider.getList() call.
  *
  * The result (choice and type of columns) isn't configurable, but the
- * <ListGuesser> outputs the <Datagrid> it has guessed to the console so that
+ * <ListGuesser> outputs the <DataTable> it has guessed to the console so that
  * developers can start from there.
  *
  * To be used as the list prop of a <Resource>.

packages/ra-ui-materialui/src/list/listFieldTypes.tsx

@@ -1,103 +1,118 @@
 import * as React from 'react';
-import { Datagrid } from './datagrid';
+import { DataTable } from './datatable';
 import { SingleFieldList } from './SingleFieldList';
 import {
     ArrayField,
     BooleanField,
     ChipField,
     DateField,
     EmailField,
-    NumberField,
     ReferenceField,
     ReferenceArrayField,
-    TextField,
     UrlField,
     ArrayFieldProps,
 } from '../field';
 
 export const listFieldTypes = {
     table: {
         component: props => {
-            return <Datagrid {...props} />;
+            return <DataTable {...props} />;
         },
-        representation: (_props, children) => `        <Datagrid>
+        representation: (_props, children) => `        <DataTable>
 ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
-        </Datagrid>`,
+        </DataTable>`,
     },
     array: {
         component: ({ children, ...props }: ArrayFieldProps) => {
             const childrenArray = React.Children.toArray(children);
             return (
-                <ArrayField {...props}>
-                    <SingleFieldList>
-                        <ChipField
-                            source={
-                                childrenArray.length > 0 &&
-                                React.isValidElement(childrenArray[0]) &&
-                                childrenArray[0].props.source
-                            }
-                        />
-                    </SingleFieldList>
-                </ArrayField>
+                <DataTable.Col {...props}>
+                    <ArrayField {...props}>
+                        <SingleFieldList>
+                            <ChipField
+                                source={
+                                    childrenArray.length > 0 &&
+                                    React.isValidElement(childrenArray[0]) &&
+                                    childrenArray[0].props.source
+                                }
+                            />
+                        </SingleFieldList>
+                    </ArrayField>
+                </DataTable.Col>
             );
         },
         representation: (props, children) =>
-            `<ArrayField source="${
+            `<DataTable.Col source="${props.source}"><ArrayField source="${
                 props.source
             }"><SingleFieldList><ChipField source="${
                 children.length > 0 && children[0].getProps().source
-            }" /></SingleFieldList></ArrayField>`,
+            }" /></SingleFieldList></ArrayField></DataTable.Col>`,
     },
     boolean: {
-        component: BooleanField,
-        representation: props => `<BooleanField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={BooleanField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={BooleanField} />`,
     },
     date: {
-        component: DateField,
-        representation: props => `<DateField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={DateField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={DateField} />`,
     },
     email: {
-        component: EmailField,
-        representation: props => `<EmailField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={EmailField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={EmailField} />`,
     },
     id: {
-        component: TextField,
-        representation: props => `<TextField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} />,
+        representation: props => `<DataTable.Col source="${props.source}" />`,
     },
     number: {
-        component: NumberField,
-        representation: props => `<NumberField source="${props.source}" />`,
+        component: DataTable.NumberCol,
+        representation: props =>
+            `<DataTable.NumberCol source="${props.source}" />`,
     },
     reference: {
-        component: ReferenceField,
+        component: props => (
+            <DataTable.Col {...props}>
+                <ReferenceField {...props} />
+            </DataTable.Col>
+        ),
         representation: props =>
-            `<ReferenceField source="${props.source}" reference="${props.reference}" />`,
+            `<DataTable.Col source="${props.source}"><ReferenceField source="${props.source}" reference="${props.reference}" /></DataTable.Col>`,
     },
     referenceChild: {
-        component: () => <TextField source="id" />,
-        representation: () => `<TextField source="id" />`,
+        component: () => <DataTable.Col source="id" />,
+        representation: () => `<DataTable.Col source="id" />`,
     },
     referenceArray: {
-        component: ReferenceArrayField,
+        component: props => (
+            <DataTable.Col {...props}>
+                <ReferenceArrayField {...props} />
+            </DataTable.Col>
+        ),
         representation: props =>
-            `<ReferenceArrayField source="${props.source}" reference="${props.reference}" />`,
+            `<DataTable.Col source="${props.source}"><ReferenceArrayField source="${props.source}" reference="${props.reference}" /></DataTable.Col>`,
     },
     referenceArrayChild: {
         component: () => (
-            <SingleFieldList>
-                <ChipField source="id" />
-            </SingleFieldList>
+            <DataTable.Col>
+                <SingleFieldList>
+                    <ChipField source="id" />
+                </SingleFieldList>
+            </DataTable.Col>
         ),
         representation: () =>
-            `<SingleFieldList><ChipField source="id" /></SingleFieldList>`,
+            `<DataTable.Col><SingleFieldList><ChipField source="id" /></SingleFieldList></DataTable.Col>`,
     },
     richText: undefined, // never display a rich text field in a datagrid
     string: {
-        component: TextField,
-        representation: props => `<TextField source="${props.source}" />`,
+        component: DataTable.Col,
+        representation: props => `<DataTable.Col source="${props.source}" />`,
     },
     url: {
-        component: UrlField,
-        representation: props => `<UrlField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={UrlField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={UrlField} />`,
     },
 };