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

Add context menu

Browse Source 
Summary: Doc: https://docs.google.com/document/d/1miofxds9DJgWScj0zFyBbdpRH5Rj0T9FqiCapof5-vU/edit#heading=h.pg8svtdjlx7

Reviewed By: LukeDefeo

Differential Revision: D49276995

fbshipit-source-id: 83c1346c6c5869c2608b73b11d40f7f55a7a694b
This commit is contained in:
Andrey Goncharov
2023-09-19 08:19:25 -07:00
committed by Facebook GitHub Bot
parent bad3dfa20a
commit 54085eb79f
2 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,6 +12,8 @@ import {css} from '@emotion/css';
import {theme} from '../theme'; import {theme} from '../theme';
const containerStyle = css` const containerStyle = css`
flex: 1 0 auto;
background-color: ${theme.white};
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-radius: ${theme.borderRadius}; border-radius: ${theme.borderRadius};

48
desktop/flipper-plugin/src/ui/data-table/DataTableWithPowerSearch.tsx
View File

@@ -43,8 +43,13 @@ import {
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import {theme} from '../theme'; import {theme} from '../theme';
import {tableContextMenuFactory} from './PowerSearchTableContextMenu'; import {tableContextMenuFactory} from './PowerSearchTableContextMenu';
import {Menu, Switch, InputRef, Typography} from 'antd'; import {Menu, Switch, InputRef, Typography, Dropdown, Button} from 'antd';
import {CoffeeOutlined, SearchOutlined, PushpinFilled} from '@ant-design/icons'; import {
CoffeeOutlined,
SearchOutlined,
PushpinFilled,
MenuOutlined,
} from '@ant-design/icons';
import {useAssertStableRef} from '../../utils/useAssertStableRef'; import {useAssertStableRef} from '../../utils/useAssertStableRef';
import {Formatter} from '../DataFormatter'; import {Formatter} from '../DataFormatter';
import {usePluginInstanceMaybe} from '../../plugin/PluginContext'; import {usePluginInstanceMaybe} from '../../plugin/PluginContext';
@@ -143,6 +148,21 @@ export interface TableRowRenderContext<T = any> {
onContextMenu?(): React.ReactElement; onContextMenu?(): React.ReactElement;
} }
const Searchbar = styled(Layout.Horizontal)({
backgroundColor: theme.backgroundWash,
padding: theme.space.small,
'.ant-input-affix-wrapper': {
height: 32,
},
'.ant-btn': {
padding: `${theme.space.tiny}px ${theme.space.small}px`,
background: 'transparent',
},
'> .ant-select': {
flex: 1,
},
});
export type DataTableProps<T> = DataTableInput<T> & DataTableBaseProps<T>; export type DataTableProps<T> = DataTableInput<T> & DataTableBaseProps<T>;
export function DataTable<T extends object>( export function DataTable<T extends object>(
@@ -591,13 +611,23 @@ export function DataTable<T extends object>(
const header = ( const header = (
<Layout.Container> <Layout.Container>
{props.enableSearchbar && ( {props.enableSearchbar && (
<PowerSearch <Searchbar gap>
config={powerSearchExampleConfig} <PowerSearch
initialSearchExpression={searchExpression} config={powerSearchExampleConfig}
onSearchExpressionChange={(newSearchExpression) => { initialSearchExpression={searchExpression}
tableManager.setSearchExpression(newSearchExpression); onSearchExpressionChange={(newSearchExpression) => {
}} tableManager.setSearchExpression(newSearchExpression);
/> }}
/>
{props.extraActions}
{contexMenu && (
<Dropdown overlay={contexMenu} placement="bottomRight">
<Button type="text" size="small" style={{height: '100%'}}>
<MenuOutlined />
</Button>
</Dropdown>
)}
</Searchbar>
)} )}
</Layout.Container> </Layout.Container>
); );