UNPKG

box-ui-elements-mlh

Version:
36 lines (30 loc) 1.03 kB
// @flow import * as React from 'react'; import { Draggable } from 'react-beautiful-dnd'; import Portal from '../portal'; import ListItem from './ListItem'; type Props = { children: React.Node, className?: string, id: string, index: number, isDraggableViaHandle?: boolean, }; const PortaledDraggableListItem = ({ children, className = '', id, index, isDraggableViaHandle }: Props) => { return ( <Draggable draggableId={id} index={index}> {(draggableProvided, draggableSnapshot) => { const listItem = ( <ListItem draggableProvided={draggableProvided} isDraggableViaHandle={isDraggableViaHandle}> {children} </ListItem> ); if (draggableSnapshot.isDragging) { return <Portal className={className}>{listItem}</Portal>; } return listItem; }} </Draggable> ); }; export default PortaledDraggableListItem;