jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow handling arbitrary text

Browse Source 
Summary:
When a user enters any arbitrary text, we will treat as an input for the search through the entire row.
Based on feedback from https://fb.workplace.com/groups/flippersupport/permalink/1703929480087703/

Reviewed By: lblasa

Differential Revision: D49911868

fbshipit-source-id: 4c569e4b01e468f0ca112ea4b00fe143b30bed2a
This commit is contained in:
Andrey Goncharov
2023-10-05 03:54:29 -07:00
committed by Facebook GitHub Bot
parent 0346dc1120
commit c4fbd10e68
2 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTermFinder.tsx
View File

@@ -25,12 +25,17 @@ type PowerSearchTermFinderProps = {
options: PowerSearchTermFinderOptionGroup[]; options: PowerSearchTermFinderOptionGroup[];
onSelect: (selectedOption: PowerSearchTermFinderOption) => void; onSelect: (selectedOption: PowerSearchTermFinderOption) => void;
onBackspacePressWhileEmpty: () => void; onBackspacePressWhileEmpty: () => void;
onConfirmUnknownOption?: (searchString: string) => void;
}; };
export const PowerSearchTermFinder = React.forwardRef< export const PowerSearchTermFinder = React.forwardRef<
PowerSearchTermFinderRef, PowerSearchTermFinderRef,
PowerSearchTermFinderProps PowerSearchTermFinderProps
>(({options, onSelect, onBackspacePressWhileEmpty}, ref) => { >(
(
{options, onSelect, onBackspacePressWhileEmpty, onConfirmUnknownOption},
ref,
) => {
const [searchTermFinderValue, setSearchTermFinderValue] = React.useState< const [searchTermFinderValue, setSearchTermFinderValue] = React.useState<
string | null string | null
>(null); >(null);
@@ -52,7 +57,9 @@ export const PowerSearchTermFinder = React.forwardRef<
setSearchTermFinderValue(null); setSearchTermFinderValue(null);
}} }}
filterOption={(inputValue, option) => { filterOption={(inputValue, option) => {
return !!option?.label.toLowerCase().includes(inputValue.toLowerCase()); return !!option?.label
.toLowerCase()
.includes(inputValue.toLowerCase());
}} }}
value={searchTermFinderValue} value={searchTermFinderValue}
onChange={setSearchTermFinderValue} onChange={setSearchTermFinderValue}
@@ -61,6 +68,9 @@ export const PowerSearchTermFinder = React.forwardRef<
}} }}
onInputKeyDown={(event) => { onInputKeyDown={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
if (searchTermFinderValue && onConfirmUnknownOption) {
onConfirmUnknownOption(searchTermFinderValue);
}
setSearchTermFinderValue(null); setSearchTermFinderValue(null);
} }
if (event.key === 'Backspace' && !searchTermFinderValue) { if (event.key === 'Backspace' && !searchTermFinderValue) {
@@ -69,4 +79,5 @@ export const PowerSearchTermFinder = React.forwardRef<
}} }}
/> />
); );
}); },
);

19
desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
View File

@@ -37,6 +37,9 @@ type PowerSearchProps = {
config: PowerSearchConfig; config: PowerSearchConfig;
initialSearchExpression?: SearchExpressionTerm[]; initialSearchExpression?: SearchExpressionTerm[];
onSearchExpressionChange: (searchExpression: SearchExpressionTerm[]) => void; onSearchExpressionChange: (searchExpression: SearchExpressionTerm[]) => void;
onConfirmUnknownOption?: (
searchString: string,
) => SearchExpressionTerm | undefined;
}; };
const OPTION_KEY_DELIMITER = '::'; const OPTION_KEY_DELIMITER = '::';
@@ -45,6 +48,7 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
config, config,
initialSearchExpression, initialSearchExpression,
onSearchExpressionChange, onSearchExpressionChange,
onConfirmUnknownOption,
}) => { }) => {
const [searchExpression, setSearchExpression] = React.useState< const [searchExpression, setSearchExpression] = React.useState<
IncompleteSearchExpressionTerm[] IncompleteSearchExpressionTerm[]
@@ -162,6 +166,21 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
); );
}); });
}} }}
onConfirmUnknownOption={
onConfirmUnknownOption
? (searchString) => {
const searchExpressionTerm =
onConfirmUnknownOption(searchString);
if (searchExpressionTerm) {
setSearchExpression((prevSearchExpression) => [
...prevSearchExpression,
searchExpressionTerm,
]);
}
}
: undefined
}
/> />
</PowerSearchContainer> </PowerSearchContainer>
); );