Change all imports to material-ui/Table

newIDE/app/scripts/codemod-replace-ui-components.js

@@ -38,6 +38,10 @@ const importsToReplace = [
     oldImport: 'material-ui/Checkbox',
     newImport: path.join(newIdeAppSrcPath, 'UI/Checkbox'),
   },
+  {
+    oldImport: 'material-ui/Table',
+    newImport: path.join(newIdeAppSrcPath, 'UI/Table'),
+  },
 ];
 
 /**

newIDE/app/src/BehaviorsEditor/Editors/Physics2Editor/PolygonEditor.js

@@ -7,7 +7,7 @@ import {
   TableBody,
   TableHeader,
   TableHeaderColumn,
-} from 'material-ui/Table';
+} from '../../../UI/Table';
 import SemiControlledTextField from '../../../UI/SemiControlledTextField';
 import Warning from 'material-ui/svg-icons/alert/warning';
 import IconButton from '../../../UI/IconButton';

newIDE/app/src/LayersList/BackgroundColorRow.js

@@ -2,7 +2,7 @@
 import { Trans } from '@lingui/macro';
 
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../UI/Table';
 import TextField from '../UI/TextField';
 
 import styles from './styles';

newIDE/app/src/LayersList/LayerRow.js

@@ -2,7 +2,7 @@
 import { Trans } from '@lingui/macro';
 
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../UI/Table';
 import InlineCheckbox from '../UI/InlineCheckbox';
 import Visibility from 'material-ui/svg-icons/action/visibility';
 import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';

newIDE/app/src/LayersList/index.js

@@ -8,7 +8,7 @@ import {
   TableHeaderColumn,
   TableRow,
   TableRowColumn,
-} from 'material-ui/Table';
+} from '../UI/Table';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import newNameGenerator from '../Utils/NewNameGenerator';
 import { mapReverseFor } from '../Utils/MapFor';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/AddPolygonRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../../../../UI/Table';
 import Add from 'material-ui/svg-icons/content/add';
 import IconButton from '../../../../UI/IconButton';
 import styles from './styles';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/AddVerticeRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../../../../UI/Table';
 import AddCircle from 'material-ui/svg-icons/content/add-circle';
 import IconButton from '../../../../UI/IconButton';
 import styles from './styles';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/PolygonRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../../../../UI/Table';
 import IconButton from '../../../../UI/IconButton';
 import Delete from 'material-ui/svg-icons/action/delete';
 import muiThemeable from 'material-ui/styles/muiThemeable';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/PolygonsList.js

@@ -8,7 +8,7 @@ import {
   TableHeaderColumn,
   TableRow,
   TableRowColumn,
-} from 'material-ui/Table';
+} from '../../../../UI/Table';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { mapVector } from '../../../../Utils/MapFor';
 import styles from './styles';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/CollisionMasksEditor/VerticeRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../../../../UI/Table';
 import IconButton from '../../../../UI/IconButton';
 import Delete from 'material-ui/svg-icons/action/delete';
 import TextField from '../../../../UI/TextField';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/PointsEditor/AddPointRow.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../../../../UI/Table';
 import Add from 'material-ui/svg-icons/content/add';
 import IconButton from '../../../../UI/IconButton';
 import styles from './styles';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/PointsEditor/PointRow.js

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro';
 import React from 'react';
-import { TableRow, TableRowColumn } from 'material-ui/Table';
+import { TableRow, TableRowColumn } from '../../../../UI/Table';
 import IconButton from '../../../../UI/IconButton';
 import Delete from 'material-ui/svg-icons/action/delete';
 import ModeEdit from 'material-ui/svg-icons/editor/mode-edit';

newIDE/app/src/ObjectEditor/Editors/SpriteEditor/PointsEditor/PointsList.js

@@ -6,7 +6,7 @@ import {
   TableHeaderColumn,
   TableRow,
   TableRowColumn,
-} from 'material-ui/Table';
+} from '../../../../UI/Table';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import newNameGenerator from '../../../../Utils/NewNameGenerator';
 import { mapVector } from '../../../../Utils/MapFor';

newIDE/app/src/Profile/UsagesDetails.js

@@ -9,7 +9,7 @@ import {
   TableHeaderColumn,
   TableRow,
   TableRowColumn,
-} from 'material-ui/Table';
+} from '../UI/Table';
 import { type Usages } from '../Utils/GDevelopServices/Usage';
 import { Column, Line } from '../UI/Grid';
 import EmptyMessage from '../UI/EmptyMessage';

newIDE/app/src/UI/Table.js

@@ -0,0 +1,138 @@
+// @flow
+import * as React from 'react';
+import {
+  Table as MUITable,
+  TableBody as MUITableBody,
+  TableHeader as MUITableHeader,
+  TableHeaderColumn as MUITableHeaderColumn,
+  TableRow as MUITableRow,
+  TableRowColumn as MUITableRowColumn,
+} from 'material-ui/Table';
+
+// We support a subset of the props supported by Material-UI v0.x Table
+// They should be self descriptive - refer to Material UI docs otherwise.
+type TableProps = {|
+  selectable?: boolean,
+  children: React.Node, // Should be TableHeader, TableBody or TableFooter
+|};
+
+/**
+ * A Table based on Material-UI Table.
+ */
+export class Table extends React.Component<TableProps, {||}> {
+  static muiName = 'Table';
+  render() {
+    return <MUITable {...this.props} />;
+  }
+}
+
+// We support a subset of the props supported by Material-UI v0.x TableBodyProps
+// They should be self descriptive - refer to Material UI docs otherwise.
+type TableBodyProps = {|
+  displayRowCheckbox?: boolean,
+  deselectOnClickaway?: boolean,
+  showRowHover?: boolean,
+  children?: React.Node, // Should be TableRow
+|};
+
+/**
+ * A TableBody based on Material-UI TableBody.
+ */
+export class TableBody extends React.Component<TableBodyProps, {||}> {
+  // Set muiName to let Material-UI's v0.x Table recognise
+  // the component.
+  static muiName = 'TableBody';
+  render() {
+    return <MUITableBody {...this.props} />;
+  }
+}
+
+// We support a subset of the props supported by Material-UI v0.x TableHeaderProps
+// They should be self descriptive - refer to Material UI docs otherwise.
+type TableHeaderProps = {|
+  adjustForCheckbox?: boolean,
+  displaySelectAll?: boolean,
+  children: React.Node, // Should be a TableRow
+|};
+
+/**
+ * A TableHeader based on Material-UI TableHeader.
+ */
+export class TableHeader extends React.Component<TableHeaderProps, {||}> {
+  // Set muiName to let Material-UI's v0.x Table recognise
+  // the component.
+  static muiName = 'TableHeader';
+  render() {
+    return <MUITableHeader {...this.props} />;
+  }
+}
+
+// We support a subset of the props supported by Material-UI v0.x TableHeaderColumnProps
+// They should be self descriptive - refer to Material UI docs otherwise.
+type TableHeaderColumnProps = {|
+  children?: React.Node, // Text of the column
+  style?: {|
+    textAlign: 'left' | 'right',
+    paddingRight: number,
+  |},
+|};
+
+/**
+ * A TableHeaderColumn based on Material-UI TableHeaderColumn.
+ */
+export class TableHeaderColumn extends React.Component<
+  TableHeaderColumnProps,
+  {||}
+> {
+  // Set muiName to let Material-UI's v0.x TableHeader recognise
+  // the component.
+  static muiName = 'TableHeaderColumn';
+  render() {
+    return <MUITableHeaderColumn {...this.props} />;
+  }
+}
+
+// We support a subset of the props supported by Material-UI v0.x TableRow
+// They should be self descriptive - refer to Material UI docs otherwise.
+type TableRowProps = {|
+  children: React.Node,
+  style?: {|
+    backgroundColor: string,
+  |},
+|};
+
+/**
+ * A TableRow based on Material-UI TableRow.
+ */
+export class TableRow extends React.Component<TableRowProps, {||}> {
+  // Set muiName to let Material-UI's v0.x TableBody recognise
+  // the component.
+  static muiName = 'TableRow';
+  render() {
+    return <MUITableRow {...this.props} />;
+  }
+}
+
+// We support a subset of the props supported by Material-UI v0.x TableRow
+// They should be self descriptive - refer to Material UI docs otherwise.
+type TableRowColumnProps = {|
+  children?: React.Node, // Content for the cell
+  style?: {|
+    width?: number,
+    paddingLeft?: number,
+    paddingRight?: number,
+    textAlign?: string,
+  |},
+|};
+
+/**
+ * A TableRowColumn based on Material-UI TableRowColumn.
+ */
+export class TableRowColumn extends React.Component<TableRowColumnProps, {||}> {
+  // Set muiName to let Material-UI's v0.x TableBody recognise
+  // the component.
+  static muiName = 'TableRowColumn';
+  render() {
+    return <MUITableRowColumn {...this.props} />;
+  }
+}

newIDE/app/src/VariablesList/index.js

@@ -1,11 +1,6 @@
 // @flow
 import * as React from 'react';
-import {
-  Table,
-  TableHeader,
-  TableHeaderColumn,
-  TableRow,
-} from 'material-ui/Table';
+import { Table, TableHeader, TableHeaderColumn, TableRow } from '../UI/Table';
 import flatten from 'lodash/flatten';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { mapFor } from '../Utils/MapFor';