diff --git a/desktop/app/src/chrome/ConsoleLogs.tsx b/desktop/app/src/chrome/ConsoleLogs.tsx index 8c0e4ec16..76e8da247 100644 --- a/desktop/app/src/chrome/ConsoleLogs.tsx +++ b/desktop/app/src/chrome/ConsoleLogs.tsx @@ -8,15 +8,17 @@ */ import {useMemo} from 'react'; -import {Button, Layout} from '../ui'; import React from 'react'; import {Console, Hook} from 'console-feed'; import type {Methods} from 'console-feed/lib/definitions/Methods'; import type {Styles} from 'console-feed/lib/definitions/Styles'; import {createState, useValue} from 'flipper-plugin'; import {useLocalStorageState} from 'flipper-plugin'; -import {theme, Toolbar} from 'flipper-plugin'; +import {theme, Toolbar, Layout} from 'flipper-plugin'; import {useIsDarkMode} from '../utils/useIsDarkMode'; +import {Button, Dropdown, Menu, Checkbox} from 'antd'; +import {DownOutlined} from '@ant-design/icons'; +import {DeleteOutlined} from '@ant-design/icons'; const MAX_LOG_ITEMS = 1000; @@ -71,32 +73,37 @@ export function ConsoleLogs() { defaultLogLevels, ); - const dropdown = useMemo(() => { - return allLogLevels.map( - (l): Electron.MenuItemConstructorOptions => ({ - label: l, - checked: logLevels.includes(l), - type: 'checkbox', - click() { - setLogLevels((state) => - state.includes(l) - ? state.filter((level) => level !== l) - : [l, ...state], - ); - }, - }), - ); - }, [logLevels, setLogLevels]); - const styles = useMemo(buildTheme, []); return ( - - + + {allLogLevels.map((l) => ( + { + setLogLevels((state) => + state.includes(l) + ? state.filter((level) => level !== l) + : [l, ...state], + ); + }}> + {l} + + ))} + + }> + + ; /** * Name of the icon dispalyed next to the text */ @@ -109,14 +103,11 @@ function SandyButton({ children, iconSize, iconVariant, - dropdown, type, onClick, href, ...restProps }: Props) { - const [dropdownVisible, setDropdownVible] = useState(false); - const handleClick = useCallback( (e: React.MouseEvent) => { if (disabled === true) { @@ -129,9 +120,6 @@ function SandyButton({ }, [disabled, onClick, href], ); - const handleVisibleChange = useCallback((flag: boolean) => { - setDropdownVible(flag); - }, []); let iconComponent; if (icon != null) { iconComponent = ( @@ -145,39 +133,7 @@ function SandyButton({ ); } - const dropdownItems = useMemo( - () => - dropdown && ( - - {dropdown!.map((item, idx) => ( - { - // @ts-ignore this event args are bound to electron, remove in the future - item.click(item); - if (item.checked !== undefined) { - // keep the menu item for check lists - e.domEvent.stopPropagation(); - e.domEvent.preventDefault(); - } - }} - disabled={item.enabled === false} - icon={ - item.checked !== undefined && ( - - ) - } - key={idx}> - {item.label} - - ))} - - ), - [dropdown], - ); - - const button = ( + return ( {children} - {dropdown ? : null} ); - if (dropdown) { - return ( - - {button} - - ); - } else { - return button; - } }