Drag and Drop

Enable the element overlaps in the layout

DnD schema

Property	Type	Description	Status
enabled	boolean		required
mode	string	required	values: row / multi-rows
onDnDMouseUp	function	Callback function with custom logic to check if new since/till time meets custom requirements. Return true value is custom logic is correct or 'false' value to restor initial element position in the layout	optional
onDnDSuccess	function	Callback function to add custom logic when drag event is successful. Optional return with updated element data. Function can be an async to fetch updated element data from API.	optional

Examples

const { getEpgProps, getLayoutProps } = useEpg({
  startDate: '2023-05-02T00:00:00',
  endDate: '2023-05-05T24:00:00',
  dnd: {
    enabled: true,
    mode: 'multi-rows',
    onDnDMouseUp: async event => {
      // Event object contains new since and till values of the dragged program
      // event = { id, since, till, targetChannelUuid, data }
      console.log('event');
      return true; // true or false
    },
    onDnDSuccess: event => {
       // event = { channelUuid, id, index, title, description, since, till, image, channelIndex, channelPosition }
      console.log('event'),
    }
  },
});

onDnDSuccess with updated element data

const { getEpgProps, getLayoutProps } = useEpg({
  startDate: '2023-05-02T00:00:00',
  endDate: '2023-05-05T24:00:00',
  dnd: {
    enabled: true,
    mode: 'multi-rows',
    onDnDMouseUp: async event => {
    ....
    },
    onDnDSuccess: (event,eventDataBeforeUpdate) => {
     // Do some data transformation on returned element data
       // function will return ``elementDataBeforeUpdate`` data with old values
       // Example: add ' - updated' to the title
       const transformedData = {
         ...eventDataBeforeUpdate,
         title: eventDataBeforeUpdate.title + ' - updated',
       };
       return transformedData; // this will update the element data in the layout
    }
  },
});

Async onDnDSuccess with updated element data

const { getEpgProps, getLayoutProps } = useEpg({
  startDate: '2023-05-02T00:00:00',
  endDate: '2023-05-05T24:00:00',
  dnd: {
    enabled: true,
    mode: 'multi-rows',
    onDnDMouseUp: async event => {
    ....
    },
    onDnDSuccess: async (event,eventDataBeforeUpdate) => {
        // Do some async data transformation on returned element data
       const apiData = await fetchAPI(event);
        return apiData; // this will update the element data in the layout
    }
  },
});