diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchIntegerTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchIntegerTerm.tsx new file mode 100644 index 000000000..96757e3e9 --- /dev/null +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchIntegerTerm.tsx @@ -0,0 +1,56 @@ +/** + * 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 + */ + +import {Input} from 'antd'; +import React from 'react'; + +type PowerSearchIntegerTermProps = { + onCancel: () => void; + onChange: (value: number) => void; +}; + +export const PowerSearchIntegerTerm: React.FC = ({ + onCancel, + onChange, +}) => { + return ( + { + const newValue = event.target.value; + + const normalizedValue = parseInt(newValue, 10); + + if (normalizedValue.toString() !== newValue) { + event.target.value = normalizedValue.toString(); + } + }} + onBlur={(event) => { + const newValue = event.target.value; + + if (!newValue) { + onCancel(); + return; + } + + const normalizedValue = parseInt(newValue, 10); + onChange(normalizedValue); + }} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === 'Escape') { + event.currentTarget.blur(); + } + }} + type="number" + step={1} + /> + ); +}; diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx index 932d5dff3..3f451a2ba 100644 --- a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx +++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchTerm.tsx @@ -11,12 +11,13 @@ import {CloseOutlined} from '@ant-design/icons'; import {Button, Space} from 'antd'; import * as React from 'react'; import {FieldConfig, OperatorConfig} from './PowerSearchConfig'; +import {PowerSearchIntegerTerm} from './PowerSearchIntegerTerm'; import {PowerSearchStringTerm} from './PowerSearchStringTerm'; export type IncompleteSearchExpressionTerm = { field: FieldConfig; operator: OperatorConfig; - searchValue?: string; + searchValue?: any; }; export type SearchExpressionTerm = Required; @@ -33,13 +34,10 @@ export const PowerSearchTerm: React.FC = ({ onCancel, onFinalize, }) => { - return ( - - - - {searchValueRenderer === 'button' ? ( - - ) : ( + let searchValueInputComponent: React.ReactNode = null; + switch (searchTerm.operator.valueType) { + case 'STRING': { + searchValueInputComponent = ( { @@ -49,6 +47,40 @@ export const PowerSearchTerm: React.FC = ({ }); }} /> + ); + break; + } + case 'INTEGER': { + searchValueInputComponent = ( + { + onFinalize({ + ...searchTerm, + searchValue: newValue, + }); + }} + /> + ); + break; + } + default: { + console.error( + 'PowerSearchTerm -> unknownoperator.valueType', + searchTerm.operator.valueType, + searchTerm, + ); + } + } + + return ( + + + + {searchValueRenderer === 'button' ? ( + + ) : ( + searchValueInputComponent )}