Sha256: 57e2057ba080f54e2081c940fbf37bdfbe503db9da2e4c55f032366096fc230d
Contents?: true
Size: 1.49 KB
Versions: 515
Compression:
Stored size: 1.49 KB
Contents
import React from "react";
import classnames from "classnames";
import {
buildAriaProps,
buildCss,
buildDataProps,
buildHtmlProps
} from "../../utilities/props";
import { globalProps } from "../../utilities/globalProps";
import { DraggableContext } from "../context";
type DraggableItemProps = {
aria?: { [key: string]: string };
children?: React.ReactNode;
className?: string;
container?: any;
data?: { [key: string]: string };
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
id?: string;
dragId?: string;
};
const DraggableItem = (props: DraggableItemProps) => {
const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId } = props;
const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
DraggableContext();
const ariaProps = buildAriaProps(aria);
const dataProps = buildDataProps(data);
const htmlProps = buildHtmlProps(htmlOptions);
const classes = classnames(
buildCss("pb_draggable_item"),
`${isDragging === dragId ? "is_dragging" : ""}`,
globalProps(props),
className
);
return (
<div
{...ariaProps}
{...dataProps}
{...htmlProps}
className={classes}
draggable
id={id}
key={dragId}
onDragEnd={() => handleDragEnd()}
onDragEnter={() => handleDragEnter(dragId, container)}
onDragStart={() => handleDragStart(dragId, container)}
>
{children}
</div>
);
};
export default DraggableItem;
Version data entries
515 entries across 515 versions & 1 rubygems