import React from 'react';
import Sortable from 'react-sortablejs';

// Controls
import AgendumContainer from '../../../containers/AgendumContainer';

const Agenda = ({ agenda, meetingID, onSort }) => {
  const sortableOptions = {
    draggable: '.sortable',
    filter:    '.modal',
    animation: 250,
    easing:    'cubic-bezier(1, 0, 0, 1)'
  };

  return(
    <Sortable className="agenda" onChange={order => onSort(meetingID, order)} options={sortableOptions}>
      {agenda.map(agendum => (
        <AgendumContainer key={agendum.id} agendum={agendum} />
      ))}

      <AgendumContainer />
    </Sortable>
  );
}

export default Agenda;

import React from 'react';
import Sortable from 'react-sortablejs';

// Controls
import AgendumContainer from '../../../containers/AgendumContainer';

const Agenda = ({ agenda, meetingID, onSort }) => {
  const sortableOptions = {
    draggable: '.sortable',
    filter:    '.modal'
  };

  return(
    <Sortable className="agenda" onChange={order => onSort(meetingID, order)} options={sortableOptions}>
      {agenda.map(agendum => (
        <AgendumContainer key={agendum.id} agendum={agendum} />
      ))}

      <AgendumContainer />
    </Sortable>
  );
}

export default Agenda;

Remove animation from agenda sorting
Remove animation from agenda sorting

With large agendas it can be really confusing when all the other
agendums switch around.
