refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/datatables/ColumnVisibilityMenu.tsx

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import { Menu, MenuButton, MenuList } from '@reach/menu-button';
+import { ColumnInstance } from 'react-table';
+
+import { Checkbox } from '@@/form-components/Checkbox';
+
+import { useTableContext } from './TableContainer';
+
+interface Props<D extends object> {
+  columns: ColumnInstance<D>[];
+  onChange: (value: string[]) => void;
+  value: string[];
+}
+
+export function ColumnVisibilityMenu<D extends object>({
+  columns,
+  onChange,
+  value,
+}: Props<D>) {
+  useTableContext();
+
+  return (
+    <Menu className="setting">
+      {({ isExpanded }) => (
+        <>
+          <MenuButton
+            className={clsx('table-setting-menu-btn', {
+              'setting-active': isExpanded,
+            })}
+          >
+            <i className="fa fa-columns" aria-hidden="true" /> Columns
+          </MenuButton>
+          <MenuList>
+            <div className="tableMenu">
+              <div className="menuHeader">Show / Hide Columns</div>
+              <div className="menuContent">
+                {columns.map((column) => (
+                  <div key={column.id}>
+                    <Checkbox
+                      checked={column.isVisible}
+                      label={column.Header as string}
+                      id={`visibility_${column.id}`}
+                      onChange={(e) =>
+                        handleChangeColumnVisibility(
+                          column.id,
+                          e.target.checked
+                        )
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </MenuList>
+        </>
+      )}
+    </Menu>
+  );
+
+  function handleChangeColumnVisibility(colId: string, visible: boolean) {
+    if (visible) {
+      onChange(value.filter((id) => id !== colId));
+      return;
+    }
+
+    onChange([...value, colId]);
+  }
+}