refactor: [DHIS2-17650] Replace Material-UI Table, TableBody, TableCell, TableHead and TableRow

src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js

@@ -4,12 +4,7 @@ import React, { Component } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'react-addons-update';
-
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
+import { DataTable, TableHead, TableBody, DataTableRow, DataTableColumnHeader } from '@dhis2/ui';
 
 import i18n from '@dhis2/d2-i18n';
 
@@ -47,11 +42,13 @@ export class DragDropList extends Component<Props> {
 
         return (
             <DndProvider backend={HTML5Backend}>
-                <Table>
+                <DataTable>
                     <TableHead>
-                        <TableRow>
-                            <TableCell colSpan={12}>{i18n.t('Column')}</TableCell>
-                        </TableRow>
+                        <DataTableRow>
+                            <DataTableColumnHeader>
+                                {i18n.t('Column')}
+                            </DataTableColumnHeader>
+                        </DataTableRow>
                     </TableHead>
                     <TableBody>
                         {listItems.map((item, i) => (
@@ -66,7 +63,7 @@ export class DragDropList extends Component<Props> {
                             />
                         ))}
                     </TableBody>
-                </Table>
+                </DataTable>
             </DndProvider>
         );
     }

src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js

@@ -1,14 +1,20 @@
 // @flow
 import React, { Component } from 'react';
 import { DragSource, DropTarget } from 'react-dnd';
-import { Checkbox, IconReorder24, spacersNum } from '@dhis2/ui';
-import TableCell from '@material-ui/core/TableCell';
+import { Checkbox, DataTableRow, DataTableCell } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = () => ({
-    checkbox: {
-        marginTop: spacersNum.dp12,
-        marginBottom: spacersNum.dp12,
+    container: {
+        cursor: 'move',
+        width: '100%',
+    },
+    row: {
+        display: 'flex',
+    },
+    checkboxContainer: {
+        flex: 1,
+        display: 'flex',
     },
 });
 
@@ -21,15 +27,12 @@ type Props = {
     connectDragSource: (any) => void,
     connectDropTarget: (any) => void,
     classes: {
-        checkbox: string,
+        container: string,
+        row: string,
+        checkboxContainer: string,
     }
 };
 
-const style = {
-    cursor: 'move',
-    outline: 'none',
-};
-
 const ItemTypes = {
     LISTITEM: 'listItem',
 };
@@ -71,24 +74,19 @@ class Index extends Component<Props> {
 
         // $FlowFixMe[incompatible-extend] automated comment
         return connectDropTarget(connectDragSource(
-            <tr key={this.props.id} tabIndex={-1} style={{ ...style, opacity }}>
-                <TableCell component="th" scope="row">
-                    <Checkbox
-                        checked={this.props.visible}
-                        tabIndex={-1}
-                        onChange={this.props.handleToggle(this.props.id)}
-                        label={text}
-                        className={this.props.classes.checkbox}
-                        valid
-                        dense
-                    />
-                </TableCell>
-                <TableCell>
-                    <span style={{ float: 'right' }}>
-                        <IconReorder24 />
-                    </span>
-                </TableCell>
-            </tr>,
+            <div className={this.props.classes.container} style={{ opacity }}>
+                <DataTableRow className={this.props.classes.row} draggable>
+                    <DataTableCell className={this.props.classes.checkboxContainer}>
+                        <Checkbox
+                            checked={this.props.visible}
+                            onChange={this.props.handleToggle(this.props.id)}
+                            label={text}
+                            valid
+                            dense
+                        />
+                    </DataTableCell>
+                </DataTableRow>
+            </div>,
         ));
     }
 }