flipper-plugin
Version:
Flipper Desktop plugin SDK and components
152 lines • 9.31 kB
JavaScript
"use strict";
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.tableContextMenuFactory = void 0;
const icons_1 = require("@ant-design/icons");
const antd_1 = require("antd");
const DataTableManager_1 = require("./DataTableManager");
const react_1 = __importDefault(require("react"));
const toFirstUpper_1 = require("../../utils/toFirstUpper");
const TableRow_1 = require("./TableRow");
const textContent_1 = require("../../utils/textContent");
const theme_1 = require("../theme");
const FlipperLib_1 = require("../../plugin/FlipperLib");
const Layout_1 = require("../Layout");
const { Item, SubMenu } = antd_1.Menu;
const { Option } = antd_1.Select;
function tableContextMenuFactory(dataView, dispatch, selection, highlightSearchSetting, filterSearchHistory, columns, visibleColumns, onCopyRows = defaultOnCopyRows, onContextMenu, sideBySideOption) {
const lib = (0, FlipperLib_1.tryGetFlipperLibImplementation)();
if (!lib) {
return (react_1.default.createElement(antd_1.Menu, null,
react_1.default.createElement(Item, null, "Menu not ready")));
}
const hasSelection = selection.items.size > 0 ?? false;
return (react_1.default.createElement(antd_1.Menu, null,
onContextMenu
? onContextMenu((0, DataTableManager_1.getSelectedItem)(dataView, selection))
: null,
react_1.default.createElement(SubMenu, { key: "filter same", title: "Filter on same", icon: react_1.default.createElement(icons_1.FilterOutlined, null), disabled: !hasSelection }, visibleColumns.map((column, idx) => (react_1.default.createElement(Item, { key: column.key ?? idx, onClick: () => {
dispatch({
type: 'setColumnFilterFromSelection',
column: column.key,
});
} }, friendlyColumnTitle(column))))),
react_1.default.createElement(SubMenu, { key: "copy rows", title: "Copy row(s)", icon: react_1.default.createElement(icons_1.TableOutlined, null), disabled: !hasSelection },
react_1.default.createElement(Item, { key: "copyToClipboard", disabled: !hasSelection, onClick: () => {
const items = (0, DataTableManager_1.getSelectedItems)(dataView, selection);
if (items.length) {
lib.writeTextToClipboard(onCopyRows(items, visibleColumns));
}
} }, "Copy row(s)"),
lib.isFB && (react_1.default.createElement(Item, { key: "createPaste", disabled: !hasSelection, onClick: () => {
const items = (0, DataTableManager_1.getSelectedItems)(dataView, selection);
if (items.length) {
lib.createPaste(onCopyRows(items, visibleColumns));
}
} }, "Create paste")),
react_1.default.createElement(Item, { key: "copyToClipboardJSON", disabled: !hasSelection, onClick: () => {
const items = (0, DataTableManager_1.getSelectedItems)(dataView, selection);
if (items.length) {
lib.writeTextToClipboard(rowsToJson(items));
}
} }, "Copy row(s) (JSON)"),
lib.isFB && (react_1.default.createElement(Item, { key: "createPasteJSON", disabled: !hasSelection, onClick: () => {
const items = (0, DataTableManager_1.getSelectedItems)(dataView, selection);
if (items.length) {
lib.createPaste(rowsToJson(items));
}
} }, "Create paste (JSON)"))),
react_1.default.createElement(SubMenu, { key: "copy cells", title: "Copy cell(s)", icon: react_1.default.createElement(icons_1.CopyOutlined, null), disabled: !hasSelection }, visibleColumns.map((column, idx) => (react_1.default.createElement(Item, { key: `copy cell${column.key ?? idx}`, onClick: () => {
const items = (0, DataTableManager_1.getSelectedItems)(dataView, selection);
if (items.length) {
lib.writeTextToClipboard(items
.map((item) => `${(0, DataTableManager_1.getValueAtPath)(item, column.key)}`)
.join('\n'));
}
} }, friendlyColumnTitle(column))))),
react_1.default.createElement(antd_1.Menu.Divider, null),
react_1.default.createElement(SubMenu, { title: "Visible columns", key: "visible columns" }, columns.map((column, idx) => (react_1.default.createElement(antd_1.Menu.Item, { key: `visible column ${column.key ?? idx}` },
react_1.default.createElement(antd_1.Checkbox, { checked: column.visible, onClick: (e) => {
e.stopPropagation();
e.preventDefault();
dispatch({ type: 'toggleColumnVisibility', column: column.key });
} }, friendlyColumnTitle(column)))))),
react_1.default.createElement(antd_1.Menu.Item, { key: "resetFilters", onClick: () => {
dispatch({ type: 'resetFilters' });
} }, "Reset filters"),
react_1.default.createElement(antd_1.Menu.Item, { key: "reset", onClick: () => {
dispatch({ type: 'reset' });
} }, "Reset view"),
react_1.default.createElement(SubMenu, { title: "Search Options", key: "search options" },
react_1.default.createElement(antd_1.Menu.Item, { key: "clear history", onClick: () => {
dispatch({ type: 'clearSearchHistory' });
} }, "Clear search history"),
react_1.default.createElement(antd_1.Menu.Item, { key: "highlight search setting" },
react_1.default.createElement(Layout_1.Layout.Horizontal, { gap: true, center: true, onClick: (e) => {
e.stopPropagation();
e.preventDefault();
} },
"Highlight search terms",
react_1.default.createElement(antd_1.Switch, { checked: highlightSearchSetting.highlightEnabled, size: "small", onChange: () => {
dispatch({
type: 'toggleHighlightSearch',
});
} }))),
react_1.default.createElement(antd_1.Menu.Item, { key: "highlight search color" },
react_1.default.createElement(Layout_1.Layout.Horizontal, { gap: true, center: true, onClick: (e) => {
e.stopPropagation();
e.preventDefault();
} },
"Highlight search color",
react_1.default.createElement(antd_1.Select, { style: { width: '7em' }, defaultValue: highlightSearchSetting.color, onChange: (color) => {
dispatch({
type: 'setSearchHighlightColor',
color,
});
} }, Object.entries(theme_1.theme.searchHighlightBackground).map(([colorName, color]) => (react_1.default.createElement(Option, { key: colorName, value: color },
react_1.default.createElement(antd_1.Badge, { text: react_1.default.createElement("span", { style: { backgroundColor: color } }, colorName.charAt(0).toUpperCase() +
colorName.slice(1)), color: color }))))))),
react_1.default.createElement(antd_1.Menu.Item, { key: "toggle search auto complete" },
react_1.default.createElement(Layout_1.Layout.Horizontal, { gap: true, center: true, onClick: (e) => {
e.stopPropagation();
e.preventDefault();
} },
"Filter Search History",
react_1.default.createElement(antd_1.Switch, { checked: filterSearchHistory, size: "small", onChange: () => {
dispatch({
type: 'toggleFilterSearchHistory',
});
} })))),
sideBySideOption));
}
exports.tableContextMenuFactory = tableContextMenuFactory;
function friendlyColumnTitle(column) {
const name = column.title || column.key;
return (0, toFirstUpper_1.toFirstUpper)(name);
}
function defaultOnCopyRows(items, visibleColumns) {
return `${visibleColumns.map(friendlyColumnTitle).join('\t')}\n${items
.map((row, idx) => visibleColumns
.map((col) => (0, textContent_1.textContent)((0, TableRow_1.renderColumnValue)(col, row, true, idx)))
.join('\t'))
.join('\n')}`;
}
function rowsToJson(items) {
return JSON.stringify(items.length > 1 ? items : items[0], function (_key, value) {
if (typeof value === 'bigint') {
return `${value.toString()}n`;
}
return value;
}, 2);
}
//# sourceMappingURL=TableContextMenu.js.map