optimizely-oui/src/components/DragAndDrop/DraggableItem/index.js

Optimizely's Component Library.

import PropTypes from "prop-types";
import React from "react";
import { Draggable } from "react-beautiful-dnd";

const DraggableItem = ({
    className,
    id,
    index,
    item,
    renderFunc,
    useCustomDragHandle,
    ...props
}) => {
    return (
        <Draggable
            key={item.id}
            draggableId={id.toString()}
            index={index}
            className={className}
            {...props}
        >
            {(provided, snapshot) => (
                <li
                    className="oui-sortable__item flex"
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...(useCustomDragHandle ? {} : provided.dragHandleProps)}
                >
                    {renderFunc({ item, index, snapshot, dragHandleProps: provided.dragHandleProps })}
                </li>
            )}
        </Draggable>
    );
};

DraggableItem.propTypes = {
    /**
     * Id for this particular Draggable Item
     */
    id: PropTypes.number.isRequired,
    /**
     * Current index for this particular Draggable Item
     */
    index: PropTypes.number.isRequired,
    /**
     * Item to render using render function pass as prop
     */
    item: PropTypes.shape({
        id: PropTypes.number,
    }).isRequired,
    /**
     * Function used to render the contents of this Draggable Item
     */
    renderFunc: PropTypes.func.isRequired,
    /**
     * Whether or not the item itself will make use of the drag handle
     */
    useCustomDragHandle: PropTypes.bool,
};

export default DraggableItem;