Convert TableOptionsWrapper to TypeScript

frontend/src/Components/Table/TableOptions/TableOptionsModal.tsx

@@ -21,12 +21,12 @@ import Column from '../Column';
 import TableOptionsColumn from './TableOptionsColumn';
 import styles from './TableOptionsModal.css';
 
-interface TableOptionsModalProps {
+export interface TableOptionsModalProps {
   isOpen: boolean;
   columns: Column[];
   pageSize?: number;
   maxPageSize?: number;
-  canModifyColumns: boolean;
+  canModifyColumns?: boolean;
   optionsComponent?: React.ElementType;
   onTableOptionChange: (payload: TableOptionsChangePayload) => void;
   onModalClose: () => void;
@@ -209,8 +209,4 @@ function TableOptionsModal({
   );
 }
 
-TableOptionsModal.defaultProps = {
-  canModifyColumns: true,
-};
-
 export default TableOptionsModal;

frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.js

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import TableOptionsModal from './TableOptionsModal';
-
-class TableOptionsModalWrapper extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isTableOptionsModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onTableOptionsPress = () => {
-    this.setState({ isTableOptionsModalOpen: true });
-  };
-
-  onTableOptionsModalClose = () => {
-    this.setState({ isTableOptionsModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      columns,
-      children,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <Fragment>
-        {
-          React.cloneElement(children, { onPress: this.onTableOptionsPress })
-        }
-
-        <TableOptionsModal
-          {...otherProps}
-          isOpen={this.state.isTableOptionsModalOpen}
-          columns={columns}
-          onModalClose={this.onTableOptionsModalClose}
-        />
-      </Fragment>
-    );
-  }
-}
-
-TableOptionsModalWrapper.propTypes = {
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  children: PropTypes.node.isRequired
-};
-
-export default TableOptionsModalWrapper;

frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.tsx

@@ -0,0 +1,43 @@
+import React, { ReactElement, useCallback, useState } from 'react';
+import { LinkProps } from 'Components/Link/Link';
+import Column from '../Column';
+import TableOptionsModal, { TableOptionsModalProps } from './TableOptionsModal';
+
+interface TableOptionsModalWrapperProps
+  extends Omit<TableOptionsModalProps, 'isOpen' | 'onModalClose'> {
+  columns: Column[];
+  children: ReactElement<LinkProps>;
+}
+
+function TableOptionsModalWrapper({
+  columns,
+  children,
+  ...otherProps
+}: TableOptionsModalWrapperProps) {
+  const [isTableOptionsModalOpen, setIsTableOptionsModalOpen] = useState(false);
+
+  const handleTableOptionsPress = useCallback(() => {
+    setIsTableOptionsModalOpen(true);
+  }, []);
+
+  const handleTableOptionsModalClose = useCallback(() => {
+    setIsTableOptionsModalOpen(false);
+  }, []);
+
+  return (
+    <>
+      {React.isValidElement(children)
+        ? React.cloneElement(children, { onPress: handleTableOptionsPress })
+        : null}
+
+      <TableOptionsModal
+        {...otherProps}
+        isOpen={isTableOptionsModalOpen}
+        columns={columns}
+        onModalClose={handleTableOptionsModalClose}
+      />
+    </>
+  );
+}
+
+export default TableOptionsModalWrapper;