You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							134 lines
						
					
					
						
							3.2 KiB
						
					
					
				
			
		
		
	
	
							134 lines
						
					
					
						
							3.2 KiB
						
					
					
				import type {
 | 
						|
  DraggableId,
 | 
						|
  DragStart,
 | 
						|
  DragUpdate,
 | 
						|
  DropResult,
 | 
						|
  DraggableLocation,
 | 
						|
  Combine,
 | 
						|
} from './types';
 | 
						|
 | 
						|
export interface MessagePreset {
 | 
						|
  dragHandleUsageInstructions: string;
 | 
						|
  onDragStart: (start: DragStart) => string;
 | 
						|
  onDragUpdate: (update: DragUpdate) => string;
 | 
						|
  onDragEnd: (result: DropResult) => string;
 | 
						|
}
 | 
						|
 | 
						|
const dragHandleUsageInstructions = `
 | 
						|
  Press space bar to start a drag.
 | 
						|
  When dragging you can use the arrow keys to move the item around and escape to cancel.
 | 
						|
  Some screen readers may require you to be in focus mode or to use your pass through key
 | 
						|
`;
 | 
						|
 | 
						|
const position = (index: number): number => index + 1;
 | 
						|
 | 
						|
// We cannot list what index the Droppable is in automatically as we are not sure how
 | 
						|
// the Droppable's have been configured
 | 
						|
const onDragStart = (start: DragStart): string => `
 | 
						|
  You have lifted an item in position ${position(start.source.index)}
 | 
						|
`;
 | 
						|
 | 
						|
const withLocation = (
 | 
						|
  source: DraggableLocation,
 | 
						|
  destination: DraggableLocation,
 | 
						|
) => {
 | 
						|
  const isInHomeList: boolean = source.droppableId === destination.droppableId;
 | 
						|
 | 
						|
  const startPosition: number = position(source.index);
 | 
						|
  const endPosition: number = position(destination.index);
 | 
						|
 | 
						|
  if (isInHomeList) {
 | 
						|
    return `
 | 
						|
      You have moved the item from position ${startPosition}
 | 
						|
      to position ${endPosition}
 | 
						|
    `;
 | 
						|
  }
 | 
						|
 | 
						|
  return `
 | 
						|
    You have moved the item from position ${startPosition}
 | 
						|
    in list ${source.droppableId}
 | 
						|
    to list ${destination.droppableId}
 | 
						|
    in position ${endPosition}
 | 
						|
  `;
 | 
						|
};
 | 
						|
 | 
						|
const withCombine = (
 | 
						|
  id: DraggableId,
 | 
						|
  source: DraggableLocation,
 | 
						|
  combine: Combine,
 | 
						|
): string => {
 | 
						|
  const inHomeList: boolean = source.droppableId === combine.droppableId;
 | 
						|
 | 
						|
  if (inHomeList) {
 | 
						|
    return `
 | 
						|
      The item ${id}
 | 
						|
      has been combined with ${combine.draggableId}`;
 | 
						|
  }
 | 
						|
 | 
						|
  return `
 | 
						|
      The item ${id}
 | 
						|
      in list ${source.droppableId}
 | 
						|
      has been combined with ${combine.draggableId}
 | 
						|
      in list ${combine.droppableId}
 | 
						|
    `;
 | 
						|
};
 | 
						|
 | 
						|
const onDragUpdate = (update: DragUpdate): string => {
 | 
						|
  const location: DraggableLocation | null = update.destination;
 | 
						|
  if (location) {
 | 
						|
    return withLocation(update.source, location);
 | 
						|
  }
 | 
						|
 | 
						|
  const combine: Combine | null = update.combine;
 | 
						|
  if (combine) {
 | 
						|
    return withCombine(update.draggableId, update.source, combine);
 | 
						|
  }
 | 
						|
 | 
						|
  return 'You are over an area that cannot be dropped on';
 | 
						|
};
 | 
						|
 | 
						|
const returnedToStart = (source: DraggableLocation): string => `
 | 
						|
  The item has returned to its starting position
 | 
						|
  of ${position(source.index)}
 | 
						|
`;
 | 
						|
 | 
						|
const onDragEnd = (result: DropResult): string => {
 | 
						|
  if (result.reason === 'CANCEL') {
 | 
						|
    return `
 | 
						|
      Movement cancelled.
 | 
						|
      ${returnedToStart(result.source)}
 | 
						|
    `;
 | 
						|
  }
 | 
						|
 | 
						|
  const location: DraggableLocation | null = result.destination;
 | 
						|
  const combine: Combine | null = result.combine;
 | 
						|
 | 
						|
  if (location) {
 | 
						|
    return `
 | 
						|
      You have dropped the item.
 | 
						|
      ${withLocation(result.source, location)}
 | 
						|
    `;
 | 
						|
  }
 | 
						|
 | 
						|
  if (combine) {
 | 
						|
    return `
 | 
						|
      You have dropped the item.
 | 
						|
      ${withCombine(result.draggableId, result.source, combine)}
 | 
						|
    `;
 | 
						|
  }
 | 
						|
 | 
						|
  return `
 | 
						|
    The item has been dropped while not over a drop area.
 | 
						|
    ${returnedToStart(result.source)}
 | 
						|
  `;
 | 
						|
};
 | 
						|
 | 
						|
const preset: MessagePreset = {
 | 
						|
  dragHandleUsageInstructions,
 | 
						|
  onDragStart,
 | 
						|
  onDragUpdate,
 | 
						|
  onDragEnd,
 | 
						|
};
 | 
						|
 | 
						|
export default preset;
 |