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

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

@@ -36,97 +36,106 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
onCancel, onCancel,
onFinalize, onFinalize,
}) => { }) => {
let searchValueInputComponent: React.ReactNode = null; let searchValueComponent: React.ReactNode = null;
switch (searchTerm.operator.valueType) { if (searchValueRenderer === 'input') {
case 'STRING': { switch (searchTerm.operator.valueType) {
searchValueInputComponent = ( case 'STRING': {
<PowerSearchStringTerm searchValueComponent = (
onCancel={onCancel} <PowerSearchStringTerm
onChange={(newValue) => { onCancel={onCancel}
onFinalize({ onChange={(newValue) => {
...searchTerm, onFinalize({
searchValue: newValue, ...searchTerm,
}); searchValue: newValue,
}} });
/> }}
); />
break; );
break;
}
case 'INTEGER': {
searchValueComponent = (
<PowerSearchIntegerTerm
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
/>
);
break;
}
case 'FLOAT': {
searchValueComponent = (
<PowerSearchFloatTerm
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
/>
);
break;
}
case 'NO_VALUE': {
// Nothing needs to be done. It should never be the case.
searchValueComponent = null;
break;
}
case 'ENUM': {
searchValueComponent = (
<PowerSearchEnumTerm
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
enumLabels={searchTerm.operator.enumLabels}
/>
);
break;
}
default: {
console.error(
'PowerSearchTerm -> unknownoperator.valueType',
searchTerm.operator.valueType,
searchTerm,
);
}
} }
case 'INTEGER': { } else {
searchValueInputComponent = ( switch (searchTerm.operator.valueType) {
<PowerSearchIntegerTerm case 'ENUM': {
onCancel={onCancel} searchValueComponent = (
onChange={(newValue) => { <Button>
onFinalize({ {searchTerm.operator.enumLabels[searchTerm.searchValue]}
...searchTerm, </Button>
searchValue: newValue, );
}); break;
}} }
/> case 'NO_VALUE': {
); searchValueComponent = null;
break; break;
} }
case 'FLOAT': { default: {
searchValueInputComponent = ( searchValueComponent = <Button>{searchTerm.searchValue}</Button>;
<PowerSearchFloatTerm }
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
/>
);
break;
}
case 'NO_VALUE': {
// Nothing needs to be done. The effect below is going to fire and mark it as the final value.
searchValueInputComponent = null;
break;
}
case 'ENUM': {
searchValueInputComponent = (
<PowerSearchEnumTerm
onCancel={onCancel}
onChange={(newValue) => {
onFinalize({
...searchTerm,
searchValue: newValue,
});
}}
enumLabels={searchTerm.operator.enumLabels}
/>
);
break;
}
default: {
console.error(
'PowerSearchTerm -> unknownoperator.valueType',
searchTerm.operator.valueType,
searchTerm,
);
} }
} }
React.useEffect(() => {
if (searchTerm.operator.valueType === 'NO_VALUE') {
onFinalize({
...searchTerm,
searchValue: null,
});
}
}, [searchTerm, onFinalize]);
return ( return (
<Space.Compact block size="small"> <Space.Compact block size="small">
<Button>{searchTerm.field.label}</Button> <Button>{searchTerm.field.label}</Button>
<Button>{searchTerm.operator.label}</Button> {searchTerm.operator.label ? (
{searchValueRenderer === 'button' ? ( <Button>{searchTerm.operator.label}</Button>
<Button>{searchTerm.searchValue ?? '...'}</Button> ) : null}
) : ( {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,
}, },
]); ]);
}} }}