diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx index 63bb2bc21..f32d67670 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx @@ -36,97 +36,106 @@ export const PowerSearchTerm: React.FC = ({ onCancel, onFinalize, }) => { - let searchValueInputComponent: React.ReactNode = null; - switch (searchTerm.operator.valueType) { - case 'STRING': { - searchValueInputComponent = ( - { - onFinalize({ - ...searchTerm, - searchValue: newValue, - }); - }} - /> - ); - break; + let searchValueComponent: React.ReactNode = null; + if (searchValueRenderer === 'input') { + switch (searchTerm.operator.valueType) { + case 'STRING': { + searchValueComponent = ( + { + onFinalize({ + ...searchTerm, + searchValue: newValue, + }); + }} + /> + ); + break; + } + case 'INTEGER': { + searchValueComponent = ( + { + onFinalize({ + ...searchTerm, + searchValue: newValue, + }); + }} + /> + ); + break; + } + case 'FLOAT': { + searchValueComponent = ( + { + 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 = ( + { + onFinalize({ + ...searchTerm, + searchValue: newValue, + }); + }} + enumLabels={searchTerm.operator.enumLabels} + /> + ); + break; + } + default: { + console.error( + 'PowerSearchTerm -> unknownoperator.valueType', + searchTerm.operator.valueType, + searchTerm, + ); + } } - case 'INTEGER': { - searchValueInputComponent = ( - { - onFinalize({ - ...searchTerm, - searchValue: newValue, - }); - }} - /> - ); - break; - } - case 'FLOAT': { - searchValueInputComponent = ( - { - 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 = ( - { - onFinalize({ - ...searchTerm, - searchValue: newValue, - }); - }} - enumLabels={searchTerm.operator.enumLabels} - /> - ); - break; - } - default: { - console.error( - 'PowerSearchTerm -> unknownoperator.valueType', - searchTerm.operator.valueType, - searchTerm, - ); + } else { + switch (searchTerm.operator.valueType) { + case 'ENUM': { + searchValueComponent = ( + + ); + break; + } + case 'NO_VALUE': { + searchValueComponent = null; + break; + } + default: { + searchValueComponent = ; + } } } - React.useEffect(() => { - if (searchTerm.operator.valueType === 'NO_VALUE') { - onFinalize({ - ...searchTerm, - searchValue: null, - }); - } - }, [searchTerm, onFinalize]); - return ( - - {searchValueRenderer === 'button' ? ( - - ) : ( - searchValueInputComponent - )} + {searchTerm.operator.label ? ( + + ) : null} + {searchValueComponent}