import { CellClassParams , GridApi , GridOptions , RefreshCellsParams , RowDragEndEvent , RowDragLeaveEvent , RowDragMoveEvent , RowNode , ValueFormatterParams } from '@ag-grid-community/core' ; declare function getFileCellRenderer ( ) ; var valueFormatter = function ( params ) { return params . value ? params . value + ' MB' : '' ; } ; var cellClassRules = { 'hover-over' : function ( params ) { return params . node === potentialParent ; } , } ; const gridOptions = { columnDefs : [ { field : 'dateModified' , cellClassRules : cellClassRules , } , { field : 'size' , valueFormatter : valueFormatter , cellClassRules : cellClassRules , } , ] , defaultColDef : { flex : 1 , resizable : true , } , components : { fileCellRenderer : getFileCellRenderer ( ) , } , rowData : getData ( ) , treeData : true , animateRows : true , groupDefaultExpanded : - 1 , getDataPath : function ( data ) { return data . filePath ; } , getRowNodeId : function ( data ) { return data . id ; } , autoGroupColumnDef : { rowDrag : true , headerName : 'Files' , minWidth : 300 , cellRendererParams : { suppressCount : true , innerRenderer : 'fileCellRenderer' , } , cellClassRules : { 'hover-over' : function ( params ) { return params . node === potentialParent ; } , } , } , onRowDragEnd : onRowDragEnd , onRowDragMove : onRowDragMove , onRowDragLeave : onRowDragLeave , } ; var potentialParent = null ; function onRowDragMove ( event ) { setPotentialParentForNode ( event . api , event . overNode ) ; } function onRowDragLeave ( event ) { setPotentialParentForNode ( event . api , null ) ; } function onRowDragEnd ( event ) { if ( ! potentialParent ) { return ; } var movingData = event . node . data ; var newParentPath = potentialParent . data ? potentialParent . data . filePath : [ ] ; var needToChangeParent = ! arePathsEqual ( newParentPath , movingData . filePath ) ; var invalidMode = isSelectionParentOfTarget ( event . node , potentialParent ) ; if ( invalidMode ) { console . log ( 'invalid move' ) ; } if ( needToChangeParent && ! invalidMode ) { var updatedRows = [ ] ; moveToPath ( newParentPath , event . node , updatedRows ) ; gridOptions . api ! . applyTransaction ( { update : updatedRows , } ) ; gridOptions . api ! . clearFocusedCell ( ) ; } setPotentialParentForNode ( event . api , null ) ; } function moveToPath ( newParentPath , node , allUpdatedNodes ) { var oldPath = node . data . filePath ; var fileName = oldPath [ oldPath . length - 1 ] ; var newChildPath = newParentPath . slice ( ) ; newChildPath . push ( fileName ) ; node . data . filePath = newChildPath ; allUpdatedNodes . push ( node . data ) ; if ( node . childrenAfterGroup ) { node . childrenAfterGroup . forEach ( function ( childNode ) { moveToPath ( newChildPath , childNode , allUpdatedNodes ) ; } ) ; } } function isSelectionParentOfTarget ( selectedNode , targetNode ) { var children = selectedNode . childrenAfterGroup || [ ] ; for ( var i = 0 ; i < children . length ; i ++ ) { if ( targetNode && children [ i ] . key === targetNode . key ) return true ; isSelectionParentOfTarget ( children [ i ] , targetNode ) ; } return false ; } function arePathsEqual ( path1 , path2 ) { if ( path1 . length !== path2 . length ) { return false ; } var equal = true ; path1 . forEach ( function ( item , index ) { if ( path2 [ index ] !== item ) { equal = false ; } } ) ; return equal ; } function setPotentialParentForNode ( api , overNode ) { var newPotentialParent ; if ( overNode ) { newPotentialParent = overNode . data . type === 'folder' ? overNode : overNode . parent ; } else { newPotentialParent = null ; } var alreadySelected = potentialParent === newPotentialParent ; if ( alreadySelected ) { return ; } var rowsToRefresh = [ ] ; if ( potentialParent ) { rowsToRefresh . push ( potentialParent ) ; } if ( newPotentialParent ) { rowsToRefresh . push ( newPotentialParent ) ; } potentialParent = newPotentialParent ; refreshRows ( api , rowsToRefresh ) ; } function refreshRows ( api , rowsToRefresh ) { var params = { rowNodes : rowsToRefresh , force : true , } ; api . refreshCells ( params ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var eGridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( eGridDiv , gridOptions ) ; } ) ;