components.form.fields.multiple.MultipleTable.tsx Maven / Gradle / Ivy

Go to download
import { useState } from 'react'
import { SetState } from 'types/react'
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
import { Table, TableContainer } from '@mui/material'
import TableBody from '@mui/material/TableBody'
import TableRow from '@mui/material/TableRow'

import {
    MultipleTableBasedOnCells, MultipleTableFieldCells, MultipleTableHeader,
    MultipleTableRowActions, MultipleTableRowSelectCell
} from 'components/form/fields/multiple'
import { useFieldInfo } from 'hooks/field'
import { fallback } from 'utils/utils'
import { MultipleRows, MultipleSelected } from 'types/multiple'
import { MultipleFeatures, MutableMultipleProps } from '../InputMultipleField'

export type MultipleRowProps = {
  features:    MultipleFeatures,
  rows:        MultipleRows  
  selected:    MultipleSelected
  setSelected: SetState
}

const MultipleTable = ({ features }: MutableMultipleProps) => {
  const { info, augProps, fieldProps } = useFieldInfo()
  const [ selected, setSelected ] = useState([])
  const rows: MultipleRows = fallback(fieldProps.value, [{}])

  const onDragAndDrop = (result: any) => {
    if (!result.destination) {
      return;
    }

    const from = result.source.index
    const to   = result.destination.index
   
    const newRows = moveDragRow(rows, from, to)
    augProps.setValue(newRows)
  }

  return (
    
      
        
        
          
            {(provided: any, _snapshot: any) => (
              
                {rows.map((row, index) => (
                  
                    {(provided: any, snapshot: any) => (
                      
                        
                        
                        
                        
                      
                    )}
                  
                ))}
                {provided.placeholder}
              
            )}
          
        
      
        
    
  )
}

export function moveDragRow(list: any[], fromIndex: number, toIndex: number) {
  const result = Array.from(list);
  const [removed] = result.splice(fromIndex, 1);
  result.splice(toIndex, 0, removed);

  return result;
};

export function getDragRowStyle(isDragging: boolean, draggableStyle: React.CSSProperties): React.CSSProperties {
  return {
    background: isDragging ? "grey" : "white",
    ...draggableStyle
  }
}

export default MultipleTable