react-beautiful-dnd#DraggableProvided TypeScript Examples

getVendorStyle = ({ draggableProps: { style } }: DraggableProvided) => {
  if (style) {
    let { transform } = style;
    if (style.transform) {
      const YVal = parseInt(
        style.transform.slice(
          style.transform.indexOf(",") + 2,
          style.transform.length - 3
        )
      );
      const axisLockY = `translate(0px, ${YVal}px)`;
      transform = axisLockY;
    }
    return {
      ...style,
      transform,
    };
  } else {
    return style;
  }
}

DragndropPostListDraggableInner = React.memo((props: {
  providedDraggable: DraggableProvided;
  isDragging: boolean;
  draggingOver?: DroppableId;
  dropAnimation?: DropAnimation;
  content: React.ReactNode;
}) => {
  const classes = useStyles();
  const theme = useTheme();
  return (
    <div
      ref={props.providedDraggable.innerRef}
      {...props.providedDraggable.draggableProps}
      {...props.providedDraggable.dragHandleProps}
      style={patchStyle(theme, props.providedDraggable, props.draggingOver, props.dropAnimation)}
      className={classes.draggable}
    >
      <div className={classNames(
        classes.dragmeIconContainer,
        props.isDragging && classes.dragmeIconContainerDragging,
      )}>
        <DragmeIcon color='inherit' />
      </div>
      {props.content}
    </div>
  );
})

patchStyle = (
  theme: Theme,
  providedDraggable: DraggableProvided,
  draggingOver?: DroppableId,
  dropAnimation?: DropAnimation,
) => {
  const style: any = {
    ...(providedDraggable.draggableProps.style || {}),
  };

  if (draggingOver || dropAnimation) {
    style.zIndex = theme.zIndex.tooltip + 1;
  }

  // Animate dropping into quick action droppable as if it was a combine
  // by changing opacity and scale down.
  if (dropAnimation
    && style.transform
    && draggingOver
    && droppableDataDeserialize(draggingOver)?.['dropbox']) {
    // Properties match default combine https://github.com/atlassian/react-beautiful-dnd/blob/2360665305b854434e968e41c7b4105009b73c40/src/animation.js#L18
    style.transform = (style.transform || '') + ' scale(0)';
    style.opacity = 0;
  }

  return style;
}

function Selected ({ address, index, onDeselect }: Props): React.ReactElement<Props> {
  return (
    <Draggable
      draggableId={address}
      index={index}
      key={address}
    >
      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot): React.ReactElement => {
        const element = (
          <div
            // eslint-disable-next-line @typescript-eslint/unbound-method
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            <AddressToggle
              address={address}
              className={snapshot.isDragging ? 'isDragging' : ''}
              noToggle
              onChange={onDeselect}
            />
          </div>
        );

        return snapshot.isDragging
          ? ReactDOM.createPortal(element, portal)
          : element;
      }}
    </Draggable>
  );
}

Column = ({ id, title, tasks, index }: Props) => {
  return (
    <Draggable draggableId={`col-${id}`} index={index}>
      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
        <Container
          ref={provided.innerRef}
          {...provided.draggableProps}
          data-testid={`col-${title}`}
        >
          <Header isDragging={snapshot.isDragging}>
            <ColumnTitle
              {...provided.dragHandleProps}
              id={id}
              title={title}
              tasksCount={tasks.length}
              aria-label={`${title} task list`}
              data-testid="column-title"
            />
          </Header>
          <TaskList columnId={id} listType="TASK" tasks={tasks} index={index} />
        </Container>
      )}
    </Draggable>
  );
}

getStyle = (provided: DraggableProvided, style?: Record<string, any>) => {
  if (!style) {
    return provided.draggableProps.style;
  }

  return {
    ...provided.draggableProps.style,
    ...style,
  };
}

Task = ({ task: task, style, index }: Props) => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(setEditDialogOpen(task.id));
  };

  return (
    <Draggable key={task.id} draggableId={`task-${task.id}`} index={index}>
      {(
        dragProvided: DraggableProvided,
        dragSnapshot: DraggableStateSnapshot
      ) => (
        <Container
          isDragging={dragSnapshot.isDragging}
          isGroupedOver={Boolean(dragSnapshot.combineTargetFor)}
          ref={dragProvided.innerRef}
          {...dragProvided.draggableProps}
          {...dragProvided.dragHandleProps}
          style={getStyle(dragProvided, style)}
          data-is-dragging={dragSnapshot.isDragging}
          data-testid={`task-${task.id}`}
          data-index={index}
          aria-label={`task ${task.title}`}
          onClick={handleClick}
          css={taskContainerStyles}
        >
          <Content>
            <TextContent>{task.title}</TextContent>
            <TaskId>id: {task.id}</TaskId>
            <TaskLabels task={task} />
            <TaskFooter task={task} />
          </Content>
        </Container>
      )}
    </Draggable>
  );
}

export default function MediaMenuDraggable({
    children,
    mediaItemId,
    index
}: Props): ReactElement {
    return (
        <Draggable draggableId={mediaItemId} index={index}>
            {(provided: DraggableProvided): JSX.Element => (
                <>
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        {children}
                    </div>
                </>
            )}
        </Draggable>
    );
}

function Selected({ address, index, onDeselect }: Props): React.ReactElement<Props> {
  return (
    <Draggable draggableId={address} index={index} key={address}>
      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot): React.ReactElement => {
        const element = (
          <div
            // eslint-disable-next-line @typescript-eslint/unbound-method
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            <AddressToggle
              address={address}
              className={snapshot.isDragging ? 'isDragging' : ''}
              noToggle
              onChange={onDeselect}
            />
          </div>
        );

        return snapshot.isDragging ? ReactDOM.createPortal(element, portal) : element;
      }}
    </Draggable>
  );
}

renderDraggableItem = (flatItem: FlattenedItem) => (
    provided: DraggableProvided,
    snapshot: DraggableStateSnapshot
  ) => {
    const { renderItem, onExpand, onCollapse, offsetPerLevel } = this.props

    const currentPath: Path = this.calculateEffectivePath(flatItem, snapshot)
    if (snapshot.isDropAnimating) {
      this.onDropAnimating()
    }

    return (
      <TreeItem
        key={flatItem.item.id}
        item={flatItem.item}
        path={currentPath}
        onExpand={onExpand}
        onCollapse={onCollapse}
        renderItem={renderItem}
        provided={provided}
        snapshot={snapshot}
        itemRef={this.setItemRef}
        offsetPerLevel={offsetPerLevel}
      />
    )
  }

BoardItem = ({ task, index }: Props) => {
  let priorityIcon = (
    <span
      className='inline-block m-0.5 rounded-sm border border-gray-100 hover:border-gray-200 p-0.5'
    >
      <PriorityIcon priority={task.priority} />
    </span>
  );

  // const dispatch = useDispatch<AppDispatch>();
  const updatePriority = (priority: string) => {
    // dispatch(updatePriority(task, priority));
  };

  return (
    <Draggable draggableId={task._id || 'id'} index={index} key={task._id}>
      {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
        let isDragging = snapshot.isDragging && !snapshot.isDropAnimating;
        return (
          <div
            ref={provided.innerRef}
            className={classNames(
              'cursor-default flex flex-col w-full px-4 py-3 mb-2 bg-white rounded focus:outline-none',
              {
                'shadow-modal': isDragging,
              }
            )}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            <div className='flex justify-between w-full cursor-default'>
              <div className='flex flex-col'>
                <span className='text-xs font-normal text-gray-500 uppercase'>{task._id}</span>
                <span className='mt-1 text-sm font-medium text-gray-700 line-clamp-2 overflow-ellipsis'>{task.title}</span>
              </div>
              <div className='flex-shrink-0'>
                {task.assignee ?
                  <Avatar name={`${task?.assignee?.user?.firstName} ${task?.assignee?.user?.lastName}`} /> :
                  <Avatar />}
              </div>
            </div>
            <div className='mt-2.5 flex items-center'>
              <PriorityMenu
                button={priorityIcon}
                disabled
                // id={`r-priority-${task._id}`}
                filterKeyword={true}
                onSelect={(p: any) => updatePriority(p)}
              />
            </div>
          </div>
        );
      }}

    </Draggable >

  );
}

Main = (props: {}) => {
    let dispatch = useDispatch();
    const disc = useShallowEqualSelector(state => state.main.disc);
    const deviceName = useShallowEqualSelector(state => state.main.deviceName);
    const deviceStatus = useShallowEqualSelector(state => state.main.deviceStatus);
    const { vintageMode } = useShallowEqualSelector(state => state.appState);

    const [selected, setSelected] = React.useState<number[]>([]);
    const [uploadedFiles, setUploadedFiles] = React.useState<File[]>([]);
    const [lastClicked, setLastClicked] = useState(-1);
    const [moveMenuAnchorEl, setMoveMenuAnchorEl] = React.useState<null | HTMLElement>(null);

    const handleShowMoveMenu = useCallback(
        (event: React.MouseEvent<HTMLButtonElement>) => {
            setMoveMenuAnchorEl(event.currentTarget);
        },
        [setMoveMenuAnchorEl]
    );
    const handleCloseMoveMenu = useCallback(() => {
        setMoveMenuAnchorEl(null);
    }, [setMoveMenuAnchorEl]);

    const handleMoveSelectedTrack = useCallback(
        (destIndex: number) => {
            dispatch(moveTrack(selected[0], destIndex));
            handleCloseMoveMenu();
        },
        [dispatch, selected, handleCloseMoveMenu]
    );

    const handleDrop = useCallback(
        (result: DropResult, provided: ResponderProvided) => {
            if (!result.destination) return;
            let sourceList = parseInt(result.source.droppableId),
                sourceIndex = result.source.index,
                targetList = parseInt(result.destination.droppableId),
                targetIndex = result.destination.index;
            dispatch(dragDropTrack(sourceList, sourceIndex, targetList, targetIndex));
        },
        [dispatch]
    );

    const handleShowDumpDialog = useCallback(() => {
        dispatch(dumpDialogActions.setVisible(true));
    }, [dispatch]);

    useEffect(() => {
        dispatch(listContent());
    }, [dispatch]);

    useEffect(() => {
        setSelected([]); // Reset selection if disc changes
    }, [disc]);

    const onDrop = useCallback(
        (acceptedFiles: File[], rejectedFiles: File[]) => {
            setUploadedFiles(acceptedFiles);
            dispatch(convertDialogActions.setVisible(true));
        },
        [dispatch]
    );

    const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
        onDrop,
        accept: [`audio/*`, `video/mp4`],
        noClick: true,
    });

    const classes = useStyles();
    const tracks = useMemo(() => getSortedTracks(disc), [disc]);
    const groupedTracks = useMemo(() => getGroupedTracks(disc), [disc]);

    // Action Handlers
    const handleSelectTrackClick = useCallback(
        (event: React.MouseEvent, item: number) => {
            if (event.shiftKey && selected.length && lastClicked !== -1) {
                let rangeBegin = Math.min(lastClicked + 1, item),
                    rangeEnd = Math.max(lastClicked - 1, item);
                let copy = [...selected];
                for (let i = rangeBegin; i <= rangeEnd; i++) {
                    let index = copy.indexOf(i);
                    if (index === -1) copy.push(i);
                    else copy.splice(index, 1);
                }
                if (!copy.includes(item)) copy.push(item);
                setSelected(copy);
            } else if (selected.includes(item)) {
                setSelected(selected.filter(i => i !== item));
            } else {
                setSelected([...selected, item]);
            }
            setLastClicked(item);
        },
        [selected, setSelected, lastClicked, setLastClicked]
    );

    const handleSelectAllClick = useCallback(
        (event: React.ChangeEvent<HTMLInputElement>) => {
            if (selected.length < tracks.length) {
                setSelected(tracks.map(t => t.index));
            } else {
                setSelected([]);
            }
        },
        [selected, tracks]
    );

    const handleRenameTrack = useCallback(
        (event: React.MouseEvent, index: number) => {
            let track = tracks.find(t => t.index === index);
            if (!track) {
                return;
            }

            dispatch(
                batchActions([
                    renameDialogActions.setVisible(true),
                    renameDialogActions.setGroupIndex(null),
                    renameDialogActions.setCurrentName(track.title),
                    renameDialogActions.setCurrentFullWidthName(track.fullWidthTitle),
                    renameDialogActions.setIndex(track.index),
                ])
            );
        },
        [dispatch, tracks]
    );

    const handleRenameGroup = useCallback(
        (event: React.MouseEvent, index: number) => {
            let group = groupedTracks.find(g => g.index === index);
            if (!group) {
                return;
            }

            dispatch(
                batchActions([
                    renameDialogActions.setVisible(true),
                    renameDialogActions.setGroupIndex(index),
                    renameDialogActions.setCurrentName(group.title ?? ''),
                    renameDialogActions.setCurrentFullWidthName(group.fullWidthTitle ?? ''),
                    renameDialogActions.setIndex(-1),
                ])
            );
        },
        [dispatch, groupedTracks]
    );

    const handleRenameActionClick = useCallback(
        (event: React.MouseEvent) => {
            if (event.detail !== 1) return; //Event retriggering when hitting enter in the dialog
            handleRenameTrack(event, selected[0]);
        },
        [handleRenameTrack, selected]
    );

    const handleDeleteSelected = useCallback(
        (event: React.MouseEvent) => {
            dispatch(deleteTracks(selected));
        },
        [dispatch, selected]
    );

    const handleGroupTracks = useCallback(
        (event: React.MouseEvent) => {
            dispatch(groupTracks(selected));
        },
        [dispatch, selected]
    );

    const handleDeleteGroup = useCallback(
        (event: React.MouseEvent, index: number) => {
            dispatch(deleteGroup(index));
        },
        [dispatch]
    );

    const handleTogglePlayPauseTrack = useCallback(
        (event: React.MouseEvent, track: number) => {
            if (!deviceStatus) {
                return;
            }
            if (deviceStatus.track !== track) {
                dispatch(control('goto', track));
                dispatch(control('play'));
            } else if (deviceStatus.state === 'playing') {
                dispatch(control('pause'));
            } else {
                dispatch(control('play'));
            }
        },
        [dispatch, deviceStatus]
    );

    const canGroup = useMemo(() => {
        return (
            tracks.filter(n => n.group === null && selected.includes(n.index)).length === selected.length &&
            isSequential(selected.sort((a, b) => a - b))
        );
    }, [tracks, selected]);
    const selectedCount = selected.length;

    if (vintageMode) {
        const p = {
            disc,
            deviceName,

            selected,
            setSelected,
            selectedCount,

            tracks,
            uploadedFiles,
            setUploadedFiles,

            onDrop,
            getRootProps,
            getInputProps,
            isDragActive,
            open,

            moveMenuAnchorEl,
            setMoveMenuAnchorEl,

            handleShowMoveMenu,
            handleCloseMoveMenu,
            handleMoveSelectedTrack,
            handleShowDumpDialog,
            handleDeleteSelected,
            handleRenameActionClick,
            handleRenameTrack,
            handleSelectAllClick,
            handleSelectTrackClick,
        };
        return <W95Main {...p} />;
    }

    return (
        <React.Fragment>
            <Box className={classes.headBox}>
                <Typography component="h1" variant="h4">
                    {deviceName || `Loading...`}
                </Typography>
                <TopMenu />
            </Box>
            <Typography component="h2" variant="body2">
                {disc !== null ? (
                    <React.Fragment>
                        <span>{`${formatTimeFromFrames(disc.left, false)} left of ${formatTimeFromFrames(disc.total, false)} `}</span>
                        <Tooltip
                            title={
                                <React.Fragment>
                                    <span>{`${formatTimeFromFrames(disc.left * 2, false)} left in LP2 Mode`}</span>
                                    <br />
                                    <span>{`${formatTimeFromFrames(disc.left * 4, false)} left in LP4 Mode`}</span>
                                </React.Fragment>
                            }
                            arrow
                        >
                            <span className={classes.remainingTimeTooltip}>SP Mode</span>
                        </Tooltip>
                    </React.Fragment>
                ) : (
                    `Loading...`
                )}
            </Typography>
            <Toolbar
                className={clsx(classes.toolbar, {
                    [classes.toolbarHighlight]: selectedCount > 0,
                })}
            >
                {selectedCount > 0 ? (
                    <Checkbox
                        indeterminate={selectedCount > 0 && selectedCount < tracks.length}
                        checked={selectedCount > 0}
                        onChange={handleSelectAllClick}
                        inputProps={{ 'aria-label': 'select all tracks' }}
                    />
                ) : null}
                {selectedCount > 0 ? (
                    <Typography className={classes.toolbarLabel} color="inherit" variant="subtitle1">
                        {selectedCount} selected
                    </Typography>
                ) : (
                    <Typography component="h3" variant="h6" className={classes.toolbarLabel}>
                        {disc?.fullWidthTitle && `${disc.fullWidthTitle} / `}
                        {disc?.title || `Untitled Disc`}
                    </Typography>
                )}
                {selectedCount > 0 ? (
                    <React.Fragment>
                        <Tooltip title="Record from MD">
                            <Button aria-label="Record" onClick={handleShowDumpDialog}>
                                Record
                            </Button>
                        </Tooltip>
                    </React.Fragment>
                ) : null}

                {selectedCount > 0 ? (
                    <Tooltip title="Delete">
                        <IconButton aria-label="delete" onClick={handleDeleteSelected}>
                            <DeleteIcon />
                        </IconButton>
                    </Tooltip>
                ) : null}

                {selectedCount > 0 ? (
                    <Tooltip title={canGroup ? 'Group' : ''}>
                        <IconButton aria-label="group" disabled={!canGroup} onClick={handleGroupTracks}>
                            <CreateNewFolderIcon />
                        </IconButton>
                    </Tooltip>
                ) : null}

                {selectedCount > 0 ? (
                    <Tooltip title="Rename">
                        <IconButton aria-label="rename" disabled={selectedCount !== 1} onClick={handleRenameActionClick}>
                            <EditIcon />
                        </IconButton>
                    </Tooltip>
                ) : null}
            </Toolbar>
            <Box className={classes.main} {...getRootProps()} id="main">
                <input {...getInputProps()} />
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell className={classes.dragHandleEmpty}></TableCell>
                            <TableCell className={classes.indexCell}>#</TableCell>
                            <TableCell>Title</TableCell>
                            <TableCell align="right">Duration</TableCell>
                        </TableRow>
                    </TableHead>
                    <DragDropContext onDragEnd={handleDrop}>
                        <TableBody>
                            {groupedTracks.map((group, index) => (
                                <TableRow key={`${index}`}>
                                    <TableCell colSpan={4} style={{ padding: '0' }}>
                                        <Table size="small">
                                            <Droppable droppableId={`${index}`} key={`${index}`}>
                                                {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
                                                    <TableBody
                                                        {...provided.droppableProps}
                                                        ref={provided.innerRef}
                                                        className={clsx({ [classes.hoveringOverGroup]: snapshot.isDraggingOver })}
                                                    >
                                                        {group.title !== null && (
                                                            <GroupRow
                                                                group={group}
                                                                onRename={handleRenameGroup}
                                                                onDelete={handleDeleteGroup}
                                                            />
                                                        )}
                                                        {group.title === null && group.tracks.length === 0 && (
                                                            <TableRow style={{ height: '1px' }} />
                                                        )}
                                                        {group.tracks.map((t, tidx) => (
                                                            <Draggable
                                                                draggableId={`${group.index}-${t.index}`}
                                                                key={`t-${t.index}`}
                                                                index={tidx}
                                                            >
                                                                {(provided: DraggableProvided) => (
                                                                    <TrackRow
                                                                        track={t}
                                                                        draggableProvided={provided}
                                                                        inGroup={group.title !== null}
                                                                        isSelected={selected.includes(t.index)}
                                                                        trackStatus={getTrackStatus(t, deviceStatus)}
                                                                        onSelect={handleSelectTrackClick}
                                                                        onRename={handleRenameTrack}
                                                                        onTogglePlayPause={handleTogglePlayPauseTrack}
                                                                    />
                                                                )}
                                                            </Draggable>
                                                        ))}
                                                        {provided.placeholder}
                                                    </TableBody>
                                                )}
                                            </Droppable>
                                        </Table>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </DragDropContext>
                </Table>
                {isDragActive ? (
                    <Backdrop className={classes.backdrop} open={isDragActive}>
                        Drop your Music to Upload
                    </Backdrop>
                ) : null}
            </Box>
            <Fab color="primary" aria-label="add" className={classes.add} onClick={open}>
                <AddIcon />
            </Fab>

            <UploadDialog />
            <RenameDialog />
            <ErrorDialog />
            <ConvertDialog files={uploadedFiles} />
            <RecordDialog />
            <DumpDialog trackIndexes={selected} />
            <AboutDialog />
            <PanicDialog />
        </React.Fragment>
    );
}

PipelineEditComponents: React.FC<PipelineEditComponentsProps> = ({
  id,
  type,
  components,
  addComponents,
  moveComponent,
  removeComponent,
  setComponentName,
  setComponentSettings,
}: PipelineEditComponentsProps) => {
  const handleDrag = (result: DropResult): void => {
    const { source, destination } = result

    if (destination === undefined) {
      return
    }

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

    moveComponent(source.index, destination.index)
  }
  return (
    <DragDropContext onDragEnd={handleDrag}>
      <Droppable droppableId={id}>
        {(provided: DroppableProvided): React.ReactElement => (
          <Column
            alignItems="center"
            {...provided.droppableProps}
            // eslint-disable-next-line @typescript-eslint/unbound-method
            ref={provided.innerRef}
          >
            {components.map((component, index) => {
              return (
                <Draggable
                  key={component.id}
                  draggableId={component.id}
                  index={index}
                >
                  {(
                    provider: DraggableProvided,
                    snapshot: DraggableStateSnapshot
                  ): React.ReactElement => (
                    <Column
                      width={1}
                      alignItems="center"
                      // eslint-disable-next-line @typescript-eslint/unbound-method
                      ref={provider.innerRef}
                      {...provider.draggableProps}
                    >
                      <PipelineEditComponentSeparator
                        onInsert={(components: ComponentInfo[]): void =>
                          addComponents(components, index)
                        }
                        isDragging={snapshot.isDragging}
                        type={type}
                      />
                      <PipelineComponent
                        {...provider.dragHandleProps}
                        type={type}
                        descriptor={component}
                        setName={setComponentName}
                        setSettings={setComponentSettings}
                        onDelete={removeComponent}
                      />
                    </Column>
                  )}
                </Draggable>
              )
            })}
            {provided.placeholder}
            <PipelineEditComponentSeparator
              onInsert={(components: ComponentInfo[]): void =>
                addComponents(components)
              }
              isDragging={false}
              type={type}
            />
          </Column>
        )}
      </Droppable>
    </DragDropContext>
  )
}