Implement context menu

Summary:
Re-introduced context menu to DataTable, due to popular demand.

Originally it wasn't there to better align with ant design principles, but in an app like Flipper it makes just too much sense to have it

See e.g. https://fb.workplace.com/groups/flippersupport/permalink/1138285579985432/

changelog: Restored context menu in data tables

Reviewed By: passy

Differential Revision: D28996137

fbshipit-source-id: 16ef4c90997c9313efa62da7576fd453a7853761
This commit is contained in:
Michel Weststrate
2021-06-10 12:55:56 -07:00
committed by Facebook GitHub Bot
parent abc9785e0e
commit 7e4df00138
8 changed files with 50 additions and 18 deletions

View File

@@ -45,19 +45,19 @@ export function tableContextMenuFactory<T>(
);
}
const hasSelection = selection.items.size > 0 ?? false;
return (
<Menu>
{onContextMenu
? onContextMenu(getSelectedItem(datasource, selection))
: null}
<SubMenu
key="filter same"
title="Filter on same"
icon={<FilterOutlined />}
disabled={!hasSelection}>
{visibleColumns.map((column) => (
{visibleColumns.map((column, idx) => (
<Item
key={column.key}
key={column.key ?? idx}
onClick={() => {
dispatch({
type: 'setColumnFilterFromSelection',
@@ -69,12 +69,13 @@ export function tableContextMenuFactory<T>(
))}
</SubMenu>
<SubMenu
key="copy cells"
title="Copy cell(s)"
icon={<CopyOutlined />}
disabled={!hasSelection}>
{visibleColumns.map((column) => (
{visibleColumns.map((column, idx) => (
<Item
key={column.key}
key={column.key ?? idx}
onClick={() => {
const items = getSelectedItems(datasource, selection);
if (items.length) {
@@ -88,6 +89,7 @@ export function tableContextMenuFactory<T>(
))}
</SubMenu>
<Item
key="copyToClipboard"
disabled={!hasSelection}
onClick={() => {
const items = getSelectedItems(datasource, selection);
@@ -99,6 +101,7 @@ export function tableContextMenuFactory<T>(
</Item>
{lib.isFB && (
<Item
key="createPaste"
disabled={!hasSelection}
onClick={() => {
const items = getSelectedItems(datasource, selection);
@@ -110,9 +113,9 @@ export function tableContextMenuFactory<T>(
</Item>
)}
<Menu.Divider />
<SubMenu title="Visible columns">
{columns.map((column) => (
<Menu.Item key={column.key}>
<SubMenu title="Visible columns" key="visible columns">
{columns.map((column, idx) => (
<Menu.Item key={column.key ?? idx}>
<Checkbox
checked={column.visible}
onClick={(e) => {