feat(react-inline-edit-extension): convert to TS

packages/react-inline-edit-extension/package.json

@@ -41,14 +41,14 @@
     "react-dom": "^15.6.2 || ^16.4.0"
   },
   "scripts": {
-    "build": "yarn build:babel && node ./scripts/copyTS.js",
+    "build": "yarn build:babel && yarn build:types",
     "build:babel": "concurrently \"yarn build:babel:esm && yarn build:babel:umd\" \"yarn build:babel:cjs\"",
     "build:babel:cjs": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/js --presets=@babel/env",
     "build:babel:esm": "babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist/esm",
     "build:babel:umd": "babel --source-maps --extensions \".js\" dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
+    "build:types": "tsc -p tsconfig.gen-dts.json",
     "clean": "rimraf dist",
-    "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
-    "postbuild": "node ./build/copyStyles.js"
+    "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
@@ -61,10 +61,7 @@
     "@babel/preset-react": "^7.0.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-typescript-to-proptypes": "^0.17.1",
-    "css": "^2.2.3",
-    "fs-extra": "^6.0.1",
-    "glob": "^7.1.2",
-    "npmlog": "^4.1.2",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "typescript": "^3.8.3"
   }
 }

packages/react-inline-edit-extension/src/components/InlineEdit/editableTableBody.js → packages/react-inline-edit-extension/src/components/Body/Body.tsx

@@ -1,29 +1,17 @@
-import React from 'react';
-import { TableContext, TableBody, isRowExpanded } from '@patternfly/react-table';
-
-import PropTypes from 'prop-types';
-import { TableEditConfirmation } from './constants';
-import { showIdWarnings } from './utils/utils';
-
-const propTypes = {
-  ...TableBody.propTypes,
-  editConfig: PropTypes.shape({
-    editConfirmationType: PropTypes.oneOf(Object.values(TableEditConfirmation)),
-    onEditCellClicked: PropTypes.func,
-    onEditConfirmed: PropTypes.func,
-    onEditCanceled: PropTypes.func
-  }).isRequired,
-  /** Function that is fired when user clicks on a row if not editing.  */
-  onRowClick: PropTypes.func
-};
-
-const defaultProps = {
-  ...TableBody.defaultProps,
-  editConfig: null,
-  onRowClick: () => undefined
-};
-
-const resolveCascadeEditability = rows => {
+import * as React from 'react';
+import {
+  TableBodyProps,
+  isRowExpanded,
+  IRowData,
+  IExtraRowData,
+  TableBody,
+  IRow,
+  IComputedData
+} from '@patternfly/react-table';
+import { showIdWarnings, TableEditConfirmation } from '../../utils';
+import { IEditedCellData } from '../InlineEdit/editableTableBody';
+
+const resolveCascadeEditability = (rows: ExtendedIRow[]) => {
   // eslint-disable-next-line no-undef
   const isRowExpandedIndexes = new Set(
     rows.map((row, idx) => (isRowExpanded(row, rows) ? idx : null)).filter(row => row !== null)
@@ -56,14 +44,20 @@ const resolveCascadeEditability = rows => {
   }
 };
 
-const onRow = (event, row, rowProps, computedData, { onRowClick, editConfig }) => {
-  const { target } = event;
+const onRow = (
+  event: React.MouseEvent<Element, MouseEvent>,
+  row: IRow,
+  rowProps: IExtraRowData,
+  computedData: IComputedData,
+  { onRowClick, editConfig }: InlineEditBodyProps
+) => {
+  const target = event.target as any;
   const cell = target.closest('[data-key]');
   // eslint-disable-next-line radix
   const cellNumber = parseInt(cell && cell.getAttribute('data-key'), 10);
   const hasCellNumber = !Number.isNaN(cellNumber);
 
-  let onEditCellClicked;
+  let onEditCellClicked: () => void;
 
   if (hasCellNumber && editConfig && typeof editConfig.onEditCellClicked === 'function') {
     // resolve closest (e.g. for dropdowns) usable id of a clicked element inside a cell
@@ -75,7 +69,7 @@ const onRow = (event, row, rowProps, computedData, { onRowClick, editConfig }) =
     }
 
     onEditCellClicked = () => {
-      editConfig.onEditCellClicked(event, row, {
+      editConfig.onEditCellClicked(event as any, row, {
         ...rowProps,
         columnIndex: cellNumber,
         elementId
@@ -98,13 +92,34 @@ const onRow = (event, row, rowProps, computedData, { onRowClick, editConfig }) =
   }, 0);
 };
 
-const Body = ({ BodyComponent, rows, editConfig, onRowClick, ...props }) => {
+export interface EditConfig {
+  editConfirmationType?: typeof TableEditConfirmation | keyof typeof TableEditConfirmation;
+  onEditCellClicked?: (value: React.MouseEvent, row: IRowData, extra: IEditedCellData) => void;
+  onEditConfirmed?: (value: React.MouseEvent, row: IRowData, rowProps: IExtraRowData) => void;
+  onEditCanceled?: (value: React.MouseEvent, row: IRowData, rowProps: IExtraRowData) => void;
+}
+
+export interface InlineEditBodyProps extends TableBodyProps {
+  editConfig: EditConfig;
+}
+
+export interface BodyProps extends TableBodyProps {
+  BodyComponent: typeof TableBody;
+  editConfig: EditConfig;
+}
+
+interface ExtendedIRow extends IRow {
+  editConfig: EditConfig;
+  isTableEditing: boolean;
+}
+
+export const Body = ({ BodyComponent, rows = [], editConfig, onRowClick = () => {}, ...props }: BodyProps) => {
   const isTableEditing = rows.some(row => row.isEditing);
   const mappedRows = rows.map(row => ({
     ...row,
     editConfig,
     isTableEditing
-  }));
+  })) as ExtendedIRow[];
 
   resolveCascadeEditability(mappedRows);
 
@@ -118,38 +133,3 @@ const Body = ({ BodyComponent, rows, editConfig, onRowClick, ...props }) => {
     />
   );
 };
-
-Body.propTypes = {
-  BodyComponent: PropTypes.any.isRequired,
-  rows: PropTypes.array,
-  editConfig: PropTypes.any,
-  onRowClick: PropTypes.func
-};
-
-Body.defaultProps = {
-  rows: [],
-  editConfig: null,
-  onRowClick: () => undefined
-};
-
-export const editableTableBody = BodyComponent => {
-  const InlineEditBody = ({ editConfig, onRowClick, ...props }) => (
-    <TableContext.Consumer>
-      {({ rows, ...consumedProps }) => (
-        <Body
-          {...consumedProps}
-          rows={rows}
-          {...props}
-          editConfig={editConfig}
-          onRowClick={onRowClick}
-          BodyComponent={BodyComponent}
-        />
-      )}
-    </TableContext.Consumer>
-  );
-
-  InlineEditBody.propTypes = propTypes;
-  InlineEditBody.defaultProps = defaultProps;
-
-  return InlineEditBody;
-};

packages/react-inline-edit-extension/src/components/Body/index.ts

@@ -0,0 +1 @@
+export * from './Body';

packages/react-inline-edit-extension/src/components/CancelButton/CancelButton.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon';
+import { Button, ButtonProps } from '@patternfly/react-core';
+
+export const CancelButton: React.FunctionComponent<ButtonProps> = ({ variant = 'plain', ...props }: ButtonProps) => (
+  <Button variant={variant} {...props}>
+    <CloseIcon />
+  </Button>
+);

packages/react-inline-edit-extension/src/components/ConfirmButton/ConfirmButton.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import { Button, ButtonProps } from '@patternfly/react-core';
+
+export const ConfirmButton: React.FunctionComponent<ButtonProps> = ({ variant = 'primary', ...props }: ButtonProps) => (
+  <Button variant={variant} {...props}>
+    <CheckIcon />
+  </Button>
+);