import React, { memo } from 'react'; import { animated } from 'react-spring'; import { useDrag } from 'react-use-gesture'; import { FlowsTableColumnsSelector, Props as FlowsTableColumnsSelectorProps, } from '~/components/FlowsTable/ColumnsSelector'; import css from './styles.scss'; export interface Props { flowsTableVisibleColumns: FlowsTableColumnsSelectorProps['visibleColumns']; onToggleFlowsTableColumn: FlowsTableColumnsSelectorProps['onToggleColumn']; onResize?: (dy: number) => void; onStreamStop?: () => void; } export const Component = function DragPanelComponent(props: Props) { const bind = useDrag(e => { const dy = e.delta[1]; props.onResize && props.onResize(dy); }); return ( <animated.div {...bind()} className={css.dragPanel}> <div className={css.left}> <FlowsTableColumnsSelector visibleColumns={props.flowsTableVisibleColumns} onToggleColumn={props.onToggleFlowsTableColumn} /> </div> <div className={css.center} /> <div className={css.right} /> </animated.div> ); }; export const DragPanel = memo<Props>(Component); DragPanel.displayName = 'DragPanelMemoized';