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

Add an empty line for a term finder only when it is absolutely necessary

Browse Source 
Reviewed By: mweststrate

Differential Revision: D51507094

fbshipit-source-id: cb5e18ab702f60ebbf2e5573180fd21299371139
This commit is contained in:
Andrey Goncharov
2023-11-21 12:48:27 -08:00
committed by Facebook GitHub Bot
parent 88d8567310
commit 1c706b52bc
4 changed files with 34 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
View File

@@ -17,6 +17,7 @@ const containerStyle = css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline;
border-radius: ${theme.borderRadius}; border-radius: ${theme.borderRadius};
border: 1px solid ${theme.borderColor}; border: 1px solid ${theme.borderColor};
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

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

@@ -169,7 +169,7 @@ export const PowerSearchTerm: React.FC<PowerSearchTermProps> = ({
} }
return ( return (
<Space.Compact block size="small" style={{margin: theme.space.tiny / 2}}> <Space.Compact size="small" style={{margin: theme.space.tiny / 2}}>
<Button tabIndex={-1} style={{pointerEvents: 'none'}}> <Button tabIndex={-1} style={{pointerEvents: 'none'}}>
{searchTerm.field.label} {searchTerm.field.label}
</Button> </Button>

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

@@ -67,6 +67,7 @@ export const PowerSearchTermFinder = React.forwardRef<
setSearchTermFinderValue(null); setSearchTermFinderValue(null);
}}> }}>
<Input <Input
size="small"
bordered={false} bordered={false}
onKeyUp={(event) => { onKeyUp={(event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {

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

@@ -8,7 +8,6 @@
*/ */
import * as React from 'react'; import * as React from 'react';
import {Space} from 'antd';
import { import {
PowerSearchConfig, PowerSearchConfig,
FieldConfig, FieldConfig,
@@ -129,43 +128,41 @@ export const PowerSearch: React.FC<PowerSearchProps> = ({
return ( return (
<PowerSearchContainer> <PowerSearchContainer>
<Space size={0} wrap> <SearchOutlined
<SearchOutlined style={{
style={{ margin: theme.space.tiny,
margin: theme.space.tiny, color: theme.textColorSecondary,
color: theme.textColorSecondary, }}
}} />
/> {searchExpression.map((searchTerm, i) => {
{searchExpression.map((searchTerm, i) => { return (
return ( <PowerSearchTerm
<PowerSearchTerm key={JSON.stringify(searchTerm)}
key={JSON.stringify(searchTerm)} searchTerm={searchTerm}
searchTerm={searchTerm} onCancel={() => {
onCancel={() => { setSearchExpression((prevSearchExpression) => {
setSearchExpression((prevSearchExpression) => { if (prevSearchExpression[i]) {
if (prevSearchExpression[i]) {
return [
...prevSearchExpression.slice(0, i),
...prevSearchExpression.slice(i + 1),
];
}
return prevSearchExpression;
});
}}
onFinalize={(finalSearchTerm) => {
setSearchExpression((prevSearchExpression) => {
return [ return [
...prevSearchExpression.slice(0, i), ...prevSearchExpression.slice(0, i),
finalSearchTerm,
...prevSearchExpression.slice(i + 1), ...prevSearchExpression.slice(i + 1),
]; ];
}); }
searchTermFinderRef.current?.focus(); return prevSearchExpression;
}} });
/> }}
); onFinalize={(finalSearchTerm) => {
})} setSearchExpression((prevSearchExpression) => {
</Space> return [
...prevSearchExpression.slice(0, i),
finalSearchTerm,
...prevSearchExpression.slice(i + 1),
];
});
searchTermFinderRef.current?.focus();
}}
/>
);
})}
<PowerSearchTermFinder <PowerSearchTermFinder
ref={searchTermFinderRef} ref={searchTermFinderRef}
options={options} options={options}