import React from 'react' ; import './index.less' ; import { DragDropContext , Droppable , Draggable , DropResult , } from 'react-beautiful-dnd' ; import classnames from 'classnames' ; import { useModel } from 'umi' ; import DynamicComponent from '../DynamicComponent' ; import { useBoolean } from 'ahooks' ; export default function ( ) { const [ isOrdering , setIsOrdering ] = useBoolean ( false ) ; const { isDraging , pageSchema , selectPageIndex , dragingComponentIndex , selectComponent , onDragEnter , onDragLeave , onDrop , onSelectComponent , onSortEnd , showSelectComponentBorder , } = useModel ( 'bridge' ) ; let components = [ ] ; if ( pageSchema . length > 0 && selectPageIndex !== - 1 ) { components = pageSchema [ selectPageIndex ] . components ; } return ( < DragDropContext onDragStart = { ( ) => { setIsOrdering . setTrue ( ) ; } } onDragEnd = { ( result ) => { onSortEnd ( result , components ) ; setIsOrdering . setFalse ( ) ; } } > < Droppable droppableId = "droppable" > { ( provided , snapshot ) => ( < div { ... provided . droppableProps } ref = { provided . innerRef } > { components . length > 0 && components . map ( ( item , index ) => ( < Draggable key = { item . uuid } draggableId = { item . uuid } index = { index } > { ( provided , snapshot ) => ( < > < div className = { classnames ( 'h5-canvas-empty-block' , { show : isDraging , over : dragingComponentIndex === index , } ) } onDragEnter = { ( ) => { onDragEnter ( index ) ; } } onDragLeave = { ( ) => { onDragLeave ( ) ; } } onDragOver = { ( event ) => { event . preventDefault ( ) ; } } onDrop = { ( event ) => { onDrop ( event , index ) ; } } /> < div className = { classnames ( 'h5-canvas-block' , { 'blur' : ! snapshot . isDragging && isOrdering , 'isSelected' : selectComponent ?. uuid === item . uuid , 'border' : selectComponent ?. uuid === item . uuid && showSelectComponentBorder , } ) } ref = { provided . innerRef } { ... provided . draggableProps } { ... provided . dragHandleProps } onClick = { ( ) => { onSelectComponent ( item . uuid ) ; } } > < DynamicComponent id = { item . _id } uuid = { item . uuid } isSelected = { selectComponent ?. uuid === item . uuid } componentProps = { item . props } containerProps = { item . containerProps } / > < /div> < />)} < /Draggable>))} { provided . placeholder } < div className = { classnames ( 'h5-canvas-empty-block' , { show : isDraging , over : dragingComponentIndex === components . length , } ) } onDragEnter = { ( ) => { onDragEnter ( components . length ) ; } } onDragLeave = { ( ) => { onDragLeave ( ) ; } } onDragOver = { ( event ) => { event . preventDefault ( ) ; } } onDrop = { ( event ) => { onDrop ( event , components . length ) ; } } /> < /div>)} < /Droppable> < /DragDropContext>); }