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:
committed by
Facebook GitHub Bot
parent
abc9785e0e
commit
7e4df00138
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user