React-Beautiful-DDD и таблица с несколькими thead - PullRequest
Новая
       28

React-Beautiful-DDD и таблица с несколькими thead

0 голосов
/ 25 марта 2020

Я пытался получить конкретное c поведение для таблицы, но не могу получить желаемый результат.

Вот видео моей таблицы прямо сейчас

Как вы можете видеть, когда я перетаскиваю строку, размер моего tbdody изменяется и элементы thead движутся вверх. Желаемое поведение состояло бы в том, чтобы thead оставался там, где он есть, и чтобы между каждым thead было максимум 3 строки.

Таблица 

const RegistrationsTable = ({ registrations, setRegistrations, onClick }) => {
      const onBeforeDragStart = ({ source }) => {}

      const onDragEnd = result => {
        const { destination, source, draggableId } = result

        if (!destination || destination.index === source.index) {
          return
    }

    const newCompetitions = Array.from(registrations)
    newCompetitions.splice(source.index, 1)
    newCompetitions.splice(destination.index, 0, registrations[source.index])
    setRegistrations(newCompetitions)
  }

  return (
    <DragDropContext
      onBeforeDragStart={onBeforeDragStart}
      onDragEnd={onDragEnd}
    >
      <Droppable droppableId='1'>
        {provided => (
          <Table
            className='m-0 table-vcenter borderless'
            hover
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            <thead>
              <tr>
                <th></th>
                <th>Athlete</th>
                <th>Age category</th>
                <th colSpan='2'>Best total</th>
              </tr>
            </thead>
            {registrations.map(
              (athlete, index) =>
                index % 3 === 0 && (
                  <>
                    <thead>
                      <tr>
                        <th colSpan='5'>Team {index / 3 + 1}</th>
                      </tr>
                    </thead>

                    <tbody>
                      {registrations
                        .slice(index, index + 3)
                        .map((athlete, index2) => (
                          <RegistrationItem
                            key={index + index2}
                            athlete={athlete}
                            onClick={onClick}
                            index={index + index2}
                          />
                        ))}
                    </tbody>
                  </>
                )
            )}
            {provided.placeholder}
          </Table>
        )}
      </Droppable>
    </DragDropContext>
  )
}

export default RegistrationsTable

Item 

const RegistrationItem = ({ showModal, athlete, onClick, index }) => {
  const { firstname, lastname, weightClass, ageClass, bestTotal } = athlete

  const defaultOnClick = () => {
    // alert('click')
  }

  return (
    <Draggable draggableId={`${index}`} index={index}>
      {(provided, snapshot) => (
        <tr
          onClick={onClick ? onClick : defaultOnClick}
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <td className='w-1'>
            <Avatar color='blue'>{weightClass}</Avatar>
          </td>
          <td>{firstname + ' ' + lastname}</td>
          <td>{ageClass}</td>
          <td className='text-nowrap'>{bestTotal}</td>
        </tr>
      )}
    </Draggable>
  )
}

const mapStateToProps = (state, ownProps) => ({
  athlete: ownProps.athlete,
  onClick: ownProps.onClick
})

export default connect(mapStateToProps, { showModal })(RegistrationItem)

Спасибо

...