import * as React from 'react' ; import { NULL_FUNCTION } from "polar-shared/src/util/Functions" ; import isEqual from "react-fast-compare" ; interface IDragContext { readonly active : boolean ; } export const DragContext = React . createContext < IDragContext > ( { active : false } ) ; export function useDragContext ( ) { return React . useContext ( DragContext ) ; } interface IProps { /**
     * Function to call when a drag has finished.
     */ readonly onDrop : ( event : React . DragEvent ) => void ; readonly acceptDrag ? : ( ) => boolean ; } interface IState { readonly active : boolean ; } export class DragTarget2 extends React . Component < IProps , IState > { constructor ( props , context ) { super ( props , context ) ; this . onDragOver = this . onDragOver . bind ( this ) ; this . onDragLeave = this . onDragLeave . bind ( this ) ; this . onDrop = this . onDrop . bind ( this ) ; this . acceptDrag = this . acceptDrag . bind ( this ) ; this . state = { active : false } ; } public shouldComponentUpdate ( nextProps , nextState , context ) { return ! isEqual ( this . props , nextProps ) || ! isEqual ( this . state , nextState ) ; } private acceptDrag ( ) { if ( this . props . acceptDrag ) { return this . props . acceptDrag ( ) ; } return true ; } private onDragOver ( event ) { if ( ! this . acceptDrag ( ) ) { return ; } if ( ! this . state . active ) { this . setState ( { active : true } ) ; } event . preventDefault ( ) ; event . stopPropagation ( ) ; } private onDragLeave ( event ) { if ( ! this . acceptDrag ( ) ) { return ; } if ( this . state . active ) { this . setState ( { active : false } ) ; } event . stopPropagation ( ) ; } private onDrop ( event ) { if ( ! this . acceptDrag ( ) ) { return ; } this . setState ( { active : false } ) ; this . props . onDrop ( event ) ; } public render ( ) { const { active } = this . state ; return ( < div onDragOver = { ( event ) => this . onDragOver ( event ) } onDragLeave = { ( event ) => this . onDragLeave ( event ) } onDrop = { ( event ) => this . onDrop ( event ) } > < DragContext . Provider value = { { active } } > { this . props . children } < /DragContext.Provider> < /div>); } }