Merge pull request #6115 from Sage/FE-4791-FT-TS

refactor(flat-table): convert all files in directory to typescript FE-4791

cypress/locators/flat-table/index.js

@@ -32,7 +32,7 @@ export const flatTableBodyRows = () => flatTable().find("tbody tr");
 export const flatTableClickableRow = (index) =>
   cy.get(FLAT_TABLE_COMPONENT).find("tbody tr").eq(index);
 export const flatTableSortable = () =>
-  cy.get(FLAT_TABLE_COMPONENT).find("thead tr th div [type=button]");
+  cy.get(FLAT_TABLE_COMPONENT).find("thead tr th div [role=button]");
 export const flatTableCell = (index) => cy.get(FLAT_TABLE_CELL).eq(index);
 export const flatTableCheckboxCell = (index) =>
   cy.get(FLAT_TABLE_CHECKBOX_CELL).eq(index);

src/__spec_helper__/test-utils.ts

@@ -31,7 +31,8 @@ const assertStyleMatch = <Props>(
     | ShallowWrapper<Props>
     | ReactTestRendererJSON
     | ReactTestRendererJSON[]
-    | null,
+    | null
+    | HTMLElement,
   opts?: jest.Options
 ) => {
   Object.entries(styleSpec).forEach(([attr, value]) => {

src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js → src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.tsx

@@ -1,13 +1,23 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useDrop, DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import PropTypes from "prop-types";
 
 import StyledIcon from "../../icon/icon.style";
 import StyledFlatTableBodyDraggable from "./flat-table-body-draggable.style";
 import FlatTableCell from "../flat-table-cell/flat-table-cell.component";
 
-const DropTarget = ({ children, getOrder, ...rest }) => {
+export interface FlatTableBodyDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** Callback fired when order is changed */
+  getOrder?: (draggableItemIds?: number[]) => void;
+}
+
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}: FlatTableBodyDraggableProps) => {
   const [isDragging, setIsDragging] = useState(false);
 
   const [, drop] = useDrop({
@@ -17,7 +27,7 @@ const DropTarget = ({ children, getOrder, ...rest }) => {
     },
     drop() {
       setIsDragging(false);
-      getOrder();
+      getOrder?.();
     },
   });
 
@@ -33,12 +43,11 @@ const DropTarget = ({ children, getOrder, ...rest }) => {
   );
 };
 
-DropTarget.propTypes = {
-  children: PropTypes.node.isRequired,
-  getOrder: PropTypes.func,
-};
-
-const FlatTableBodyDraggable = ({ children, getOrder, ...rest }) => {
+export const FlatTableBodyDraggable = ({
+  children,
+  getOrder,
+  ...rest
+}: FlatTableBodyDraggableProps) => {
   const [draggableItems, setDraggableItems] = useState(
     React.Children.toArray(children)
   );
@@ -52,9 +61,9 @@ const FlatTableBodyDraggable = ({ children, getOrder, ...rest }) => {
     }
   }, [children]);
 
-  const findItem = (id) => {
+  const findItem = (id: string | number) => {
     const draggableItem = draggableItems.filter(
-      (item) => `${item.props.id}` === id
+      (item) => React.isValidElement(item) && `${item.props.id}` === id
     )[0];
 
     return {
@@ -63,7 +72,7 @@ const FlatTableBodyDraggable = ({ children, getOrder, ...rest }) => {
     };
   };
 
-  const moveItem = (id, atIndex) => {
+  const moveItem = (id: string | number, atIndex: number) => {
     const { draggableItem, index } = findItem(id);
     if (!draggableItem) return;
 
@@ -79,7 +88,8 @@ const FlatTableBodyDraggable = ({ children, getOrder, ...rest }) => {
     }
 
     const draggableItemIds = draggableItems.map(
-      (draggableItem) => draggableItem.props.id
+      (draggableItem) =>
+        React.isValidElement(draggableItem) && draggableItem.props.id
     );
 
     getOrder(draggableItemIds);
@@ -88,33 +98,28 @@ const FlatTableBodyDraggable = ({ children, getOrder, ...rest }) => {
   return (
     <DndProvider backend={HTML5Backend}>
       <DropTarget getOrder={getItemsId} {...rest}>
-        {draggableItems.map((item) =>
-          React.cloneElement(
-            item,
-            {
-              id: `${item.props.id}`,
-              moveItem,
-              findItem,
-              draggable: true,
-            },
-            [
-              <FlatTableCell key={item.props.id}>
-                <StyledIcon type="drag" />
-              </FlatTableCell>,
-              item.props.children,
-            ]
-          )
+        {draggableItems.map(
+          (item) =>
+            React.isValidElement(item) &&
+            React.cloneElement(
+              item as React.ReactElement,
+              {
+                id: `${item.props.id}`,
+                moveItem,
+                findItem,
+                draggable: true,
+              },
+              [
+                <FlatTableCell key={item.props.id}>
+                  <StyledIcon type="drag" />
+                </FlatTableCell>,
+                item.props.children,
+              ]
+            )
         )}
       </DropTarget>
     </DndProvider>
   );
 };
 
-FlatTableBodyDraggable.propTypes = {
-  /** Callback fired when order is changed */
-  getOrder: PropTypes.func,
-  /** Array of FlatTableRow. */
-  children: PropTypes.node.isRequired,
-};
-
 export default FlatTableBodyDraggable;

src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.spec.js → src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.spec.tsx

@@ -15,10 +15,10 @@ describe("FlatTableBodyDraggable", () => {
       render(
         <FlatTable>
           <FlatTableBodyDraggable data-testid="test">
-            <FlatTableRow key={0} id={0} index={0}>
+            <FlatTableRow key={0} id={0}>
               <FlatTableCell>UK</FlatTableCell>
             </FlatTableRow>
-            <FlatTableRow key={1} id={1} index={1}>
+            <FlatTableRow key={1} id={1}>
               <FlatTableCell>Germany</FlatTableCell>
             </FlatTableRow>
           </FlatTableBodyDraggable>
@@ -143,24 +143,24 @@ describe("FlatTableBodyDraggable", () => {
   describe("with sub rows", () => {
     beforeEach(() => {
       const subRows = [
-        <FlatTableRow>
+        <FlatTableRow key="sub-row-1">
           <FlatTableCell>Sub row one</FlatTableCell>
         </FlatTableRow>,
-        <FlatTableRow>
+        <FlatTableRow key="sub-row-2">
           <FlatTableCell>Sub row two</FlatTableCell>
         </FlatTableRow>,
       ];
 
       render(
         <FlatTable>
           <FlatTableBodyDraggable>
-            <FlatTableRow expandable subRow={subRows} key="0" id={0}>
+            <FlatTableRow expandable subRows={subRows} key="0" id={0}>
               <FlatTableCell>Row one</FlatTableCell>
             </FlatTableRow>
-            <FlatTableRow expandable subRow={subRows} key="1" id={1}>
+            <FlatTableRow expandable subRows={subRows} key="1" id={1}>
               <FlatTableCell>Row two</FlatTableCell>
             </FlatTableRow>
-            <FlatTableRow expandable subRow={subRows} key="2" id={2}>
+            <FlatTableRow expandable subRows={subRows} key="2" id={2}>
               <FlatTableCell>Row three</FlatTableCell>
             </FlatTableRow>
           </FlatTableBodyDraggable>
@@ -310,7 +310,7 @@ describe("FlatTableBodyDraggable", () => {
               <FlatTableRow expandable key="0" id={0} data-testid="table-1-row">
                 <FlatTableCell>Row one</FlatTableCell>
               </FlatTableRow>
-              <FlatTableRow expandablekey="1" id={1} data-testid="table-1-row">
+              <FlatTableRow expandable key="1" id={1} data-testid="table-1-row">
                 <FlatTableCell>Row two</FlatTableCell>
               </FlatTableRow>
               <FlatTableRow expandable key="2" id={2} data-testid="table-1-row">

src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js → src/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.ts

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 
-const StyledFlatTableBodyDraggable = styled.tbody`
+const StyledFlatTableBodyDraggable = styled.tbody<{ isDragging: boolean }>`
   ${({ isDragging }) =>
     isDragging &&
     css`

src/components/flat-table/flat-table-body-draggable/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-body-draggable.component";
+export type { FlatTableBodyDraggableProps } from "./flat-table-body-draggable.component";

src/components/flat-table/flat-table-body/flat-table-body.component.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export interface FlatTableBodyProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+}
+
+export const FlatTableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  FlatTableBodyProps
+>(({ children, ...rest }: FlatTableBodyProps, ref) => {
+  return (
+    <tbody ref={ref} {...rest}>
+      {children}
+    </tbody>
+  );
+});
+
+FlatTableBody.displayName = "FlatTableBody";
+
+export default FlatTableBody;

src/components/flat-table/flat-table-body/flat-table-body.spec.js → src/components/flat-table/flat-table-body/flat-table-body.spec.tsx

@@ -19,7 +19,7 @@ describe("FlatTableBody", () => {
     it("should be added to the root element", () => {
       const wrapper = renderComponent({ "data-role": "test" });
 
-      expect(wrapper.find("tbody").props()["data-role"]).toEqual("test");
+      expect(wrapper.find("tbody").prop("data-role")).toEqual("test");
     });
   });
 });

src/components/flat-table/flat-table-body/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-body.component";
+export type { FlatTableBodyProps } from "./flat-table-body.component";