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

Refine NO_VALUE renderer

Browse Source 
Summary: Project doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU

Reviewed By: lblasa

Differential Revision: D48637454

fbshipit-source-id: acc1926036e981c28ad678c2a3c1b7f0d5b9f992
This commit is contained in:
Andrey Goncharov
2023-08-30 07:26:35 -07:00
committed by Facebook GitHub Bot
parent 857e2d2ead
commit 52a4051b15
2 changed files with 97 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx
View File

@@ -36,10 +36,11 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
onCancel, onCancel,
onFinalize, onFinalize,
}) => { }) => {
let searchValueInputComponent: React.ReactNode = null; let searchValueComponent: React.ReactNode = null;
if (searchValueRenderer === 'input') {
switch (searchTerm.operator.valueType) { switch (searchTerm.operator.valueType) {
case 'STRING': { case 'STRING': {
searchValueInputComponent = ( searchValueComponent = (
<PowerSearchStringTerm <PowerSearchStringTerm
onCancel={onCancel} onCancel={onCancel}
onChange={(newValue) => { onChange={(newValue) => {
@@ -53,7 +54,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
break; break;
} }
case 'INTEGER': { case 'INTEGER': {
searchValueInputComponent = ( searchValueComponent = (
<PowerSearchIntegerTerm <PowerSearchIntegerTerm
onCancel={onCancel} onCancel={onCancel}
onChange={(newValue) => { onChange={(newValue) => {
@@ -67,7 +68,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
break; break;
} }
case 'FLOAT': { case 'FLOAT': {
searchValueInputComponent = ( searchValueComponent = (
<PowerSearchFloatTerm <PowerSearchFloatTerm
onCancel={onCancel} onCancel={onCancel}
onChange={(newValue) => { onChange={(newValue) => {
@@ -81,12 +82,12 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
break; break;
} }
case 'NO_VALUE': { case 'NO_VALUE': {
// Nothing needs to be done. The effect below is going to fire and mark it as the final value. // Nothing needs to be done. It should never be the case.
searchValueInputComponent = null; searchValueComponent = null;
break; break;
} }
case 'ENUM': { case 'ENUM': {
searchValueInputComponent = ( searchValueComponent = (
<PowerSearchEnumTerm <PowerSearchEnumTerm
onCancel={onCancel} onCancel={onCancel}
onChange={(newValue) => { onChange={(newValue) => {
@@ -108,25 +109,33 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
); );
} }
} }
} else {
React.useEffect(() => { switch (searchTerm.operator.valueType) {
if (searchTerm.operator.valueType === 'NO_VALUE') { case 'ENUM': {
onFinalize({ searchValueComponent = (
...searchTerm, <Button>
searchValue: null, {searchTerm.operator.enumLabels[searchTerm.searchValue]}
}); </Button>
);
break;
}
case 'NO_VALUE': {
searchValueComponent = null;
break;
}
default: {
searchValueComponent = <Button>{searchTerm.searchValue}</Button>;
}
}
} }
}, [searchTerm, onFinalize]);
return ( return (
<Space.Compact block size="small"> <Space.Compact block size="small">
<Button>{searchTerm.field.label}</Button> <Button>{searchTerm.field.label}</Button>
{searchTerm.operator.label ? (
<Button>{searchTerm.operator.label}</Button> <Button>{searchTerm.operator.label}</Button>
{searchValueRenderer === 'button' ? ( ) : null}
<Button>{searchTerm.searchValue ?? '...'}</Button> {searchValueComponent}
) : (
searchValueInputComponent
)}
<Button <Button
icon={<CloseOutlined />} icon={<CloseOutlined />}
onClick={() => { onClick={() => {

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

@@ -116,8 +116,9 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
onFinalize={(finalSearchTerm) => { onFinalize={(finalSearchTerm) => {
setSearchExpression((prevSearchExpression) => { setSearchExpression((prevSearchExpression) => {
return [ return [
...prevSearchExpression.slice(0, -1), ...prevSearchExpression.slice(0, i),
finalSearchTerm, finalSearchTerm,
...prevSearchExpression.slice(i + 1),
]; ];
}); });
searchTermFinderRef.current?.focus(); searchTermFinderRef.current?.focus();
@@ -140,6 +141,8 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
{ {
field: fieldConfig, field: fieldConfig,
operator: operatorConfig, operator: operatorConfig,
searchValue:
operatorConfig.valueType === 'NO_VALUE' ? null : undefined,
}, },
]); ]);
}} }}