b214806325
Summary: also made the controls component full width to push down the visualiser Reviewed By: lblasa Differential Revision: D41548665 fbshipit-source-id: 2bca527e70c92bc0ded120e51a0880f76f7cca87
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
/**
|
|
* 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 React from 'react';
|
|
import {plugin} from '../index';
|
|
import {Button, Input, Tooltip} from 'antd';
|
|
import {PauseCircleOutlined, PlayCircleOutlined} from '@ant-design/icons';
|
|
import {usePlugin, useValue, Layout} from 'flipper-plugin';
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
export const Controls: React.FC = () => {
|
|
const instance = usePlugin(plugin);
|
|
const searchTerm = useValue(instance.uiState.searchTerm);
|
|
const isPaused = useValue(instance.uiState.isPaused);
|
|
return (
|
|
<Layout.Horizontal pad="small" gap="small">
|
|
<Input
|
|
value={searchTerm}
|
|
onChange={(e) => instance.uiState.searchTerm.set(e.target.value)}
|
|
/>
|
|
<Button
|
|
type="default"
|
|
shape="circle"
|
|
onClick={() => instance.setPlayPause(!instance.uiState.isPaused.get())}
|
|
icon={
|
|
<Tooltip
|
|
title={isPaused ? 'Resume live updates' : 'Pause incoming updates'}>
|
|
{isPaused ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
|
|
</Tooltip>
|
|
}></Button>
|
|
</Layout.Horizontal>
|
|
);
|
|
};
|