diff --git a/frontend/src/Components/Table/TableOptions/TableOptionsModal.tsx b/frontend/src/Components/Table/TableOptions/TableOptionsModal.tsx
index 1d73a5c6d..4c0d69339 100644
--- a/frontend/src/Components/Table/TableOptions/TableOptionsModal.tsx
+++ b/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;
diff --git a/frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.js b/frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.js
deleted file mode 100644
index 6bc18bb82..000000000
--- a/frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.js
+++ /dev/null
@@ -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 (
-
- {
- React.cloneElement(children, { onPress: this.onTableOptionsPress })
- }
-
-
-
- );
- }
-}
-
-TableOptionsModalWrapper.propTypes = {
- columns: PropTypes.arrayOf(PropTypes.object).isRequired,
- children: PropTypes.node.isRequired
-};
-
-export default TableOptionsModalWrapper;
diff --git a/frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.tsx b/frontend/src/Components/Table/TableOptions/TableOptionsModalWrapper.tsx
new file mode 100644
index 000000000..eb2d359dc
--- /dev/null
+++ b/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 {
+ columns: Column[];
+ children: ReactElement;
+}
+
+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}
+
+
+ >
+ );
+}
+
+export default TableOptionsModalWrapper;