flipper-plugin
Version:
Flipper Desktop plugin SDK and components
195 lines • 8.63 kB
JavaScript
;
/**
* 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableSearch = void 0;
const icons_1 = require("@ant-design/icons");
const antd_1 = require("antd");
const react_1 = __importStar(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const Layout_1 = require("../Layout");
const theme_1 = require("../theme");
const MAX_RECENT = 5;
exports.TableSearch = (0, react_1.memo)(function TableSearch({ searchValue, useRegex, filterSearchHistory, showHistory, showNumbered, dispatch, searchHistory, extraActions, contextMenu, searchInputRef, }) {
const filteredSearchHistory = (0, react_1.useMemo)(() => filterSearchHistory
? searchHistory.filter((value) => value.toUpperCase().indexOf(searchValue.toUpperCase()) !== -1)
: searchHistory, [filterSearchHistory, searchHistory, searchValue]);
const options = (0, react_1.useMemo)(() => {
return filteredSearchHistory.map((value, index) => ({
label: showNumbered && index < MAX_RECENT ? `${index + 1}: ${value}` : value,
value,
}));
}, [filteredSearchHistory, showNumbered]);
const onSearch = (0, react_1.useCallback)((value, addToHistory) => {
dispatch({ type: 'setSearchValue', value, addToHistory });
}, [dispatch]);
const onToggleRegex = (0, react_1.useCallback)((e) => {
e.stopPropagation();
e.preventDefault();
dispatch({ type: 'toggleUseRegex' });
}, [dispatch]);
const toggleSearchDropdown = (0, react_1.useCallback)((show) => {
dispatch({ type: 'showSearchDropdown', show });
}, [dispatch]);
const toggleShowNumberedHistory = (0, react_1.useCallback)((showNumberedHistory) => {
dispatch({ type: 'setShowNumberedHistory', showNumberedHistory });
}, [dispatch]);
const toggleHideResults = (0, react_1.useCallback)(() => {
dispatch({ type: 'toggleSearchValue' });
}, [dispatch]);
const onKeyDown = (0, react_1.useCallback)((e) => {
switch (e.key) {
case 'f':
if (e.ctrlKey && searchHistory.length > 0) {
if (!showHistory) {
toggleShowNumberedHistory(true);
}
toggleSearchDropdown(!showHistory);
}
break;
case 'Control':
if (showHistory) {
toggleShowNumberedHistory(true);
}
break;
default:
const possNumber = Number(e.key);
if (e.ctrlKey &&
possNumber &&
showNumbered &&
possNumber <= Math.min(MAX_RECENT, filteredSearchHistory.length)) {
toggleSearchDropdown(false);
onSearch(filteredSearchHistory[possNumber - 1], false);
e.preventDefault();
}
}
e.stopPropagation();
}, [
searchHistory.length,
showHistory,
showNumbered,
filteredSearchHistory,
toggleSearchDropdown,
toggleShowNumberedHistory,
onSearch,
]);
const onKeyUp = (0, react_1.useCallback)((e) => {
switch (e.key) {
case 'Control':
toggleShowNumberedHistory(false);
break;
}
e.stopPropagation();
e.preventDefault();
}, [toggleShowNumberedHistory]);
const regexError = (0, react_1.useMemo)(() => {
if (!useRegex || !searchValue) {
return;
}
try {
new RegExp(searchValue);
}
catch (e) {
return `${e}`;
}
}, [useRegex, searchValue]);
return (react_1.default.createElement(Searchbar, { gap: true, onKeyDown: onKeyDown, onKeyUp: onKeyUp },
react_1.default.createElement(antd_1.AutoComplete, { defaultOpen: false, open: showHistory, options: options, onSelect: (value) => {
toggleSearchDropdown(false);
onSearch(value, false);
}, onDropdownVisibleChange: (open) => {
if (!open) {
toggleSearchDropdown(false);
}
}, value: searchValue },
react_1.default.createElement(antd_1.Input.Search, { allowClear: true, ref: searchInputRef, value: searchValue, placeholder: "Search...", suffix: react_1.default.createElement(react_1.default.Fragment, null,
options.length ? (react_1.default.createElement(antd_1.Tooltip, { placement: "topLeft", title: "Show search history (ctrl+f)" },
react_1.default.createElement(RegexButton, { onClick: () => {
toggleSearchDropdown(!showHistory);
} },
react_1.default.createElement(icons_1.HistoryOutlined, null)))) : null,
react_1.default.createElement(RegexButton, { size: "small", onClick: onToggleRegex, style: useRegex
? {
background: regexError
? theme_1.theme.errorColor
: theme_1.theme.successColor,
color: theme_1.theme.white,
}
: {
color: theme_1.theme.disabledColor,
}, type: "default", title: regexError || 'Search using Regex' }, ".*"),
react_1.default.createElement(antd_1.Tooltip, { placement: "topRight", title: "Show/Hide search results (ctrl+t)" },
react_1.default.createElement(RegexButton, { onClick: () => {
toggleHideResults();
} },
react_1.default.createElement(icons_1.SwapOutlined, null)))), onChange: (e) => {
onSearch(e.target.value, false);
}, onSearch: (value) => {
onSearch(value, true);
} })),
extraActions,
contextMenu && (react_1.default.createElement(antd_1.Dropdown, { overlay: contextMenu, placement: "bottomRight" },
react_1.default.createElement(antd_1.Button, { type: "text", size: "small", style: { height: '100%' } },
react_1.default.createElement(icons_1.MenuOutlined, null))))));
});
const Searchbar = (0, styled_1.default)(Layout_1.Layout.Horizontal)({
backgroundColor: theme_1.theme.backgroundWash,
padding: theme_1.theme.space.small,
'.ant-input-affix-wrapper': {
height: 32,
},
'.ant-btn': {
padding: `${theme_1.theme.space.tiny}px ${theme_1.theme.space.small}px`,
background: 'transparent',
},
'> .ant-select': {
flex: 1,
},
});
const RegexButton = (0, styled_1.default)(antd_1.Button)({
padding: '0px !important',
borderRadius: 4,
// marginRight: -6,
// marginLeft: 4,
lineHeight: '20px',
width: 16,
height: 20,
border: 'none',
color: theme_1.theme.disabledColor,
'& :hover': {
color: theme_1.theme.primaryColor,
},
});
//# sourceMappingURL=TableSearch.js.map