Sha256: 87f76d7528a82bf45173f4b4ac78240bc163d2dfbf3703e9b7d64aedf0667473
Contents?: true
Size: 1.45 KB
Versions: 10
Compression:
Stored size: 1.45 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;
};
const DraggableItem = (props: DraggableItemProps) => {
const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = 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 === id ? "is_dragging" : ""}`,
globalProps(props),
className
);
return (
<div
{...ariaProps}
{...dataProps}
{...htmlProps}
className={classes}
draggable
id={id}
key={id}
onDragEnd={() => handleDragEnd()}
onDragEnter={() => handleDragEnter(id, container)}
onDragStart={() => handleDragStart(id, container)}
>
{children}
</div>
);
};
export default DraggableItem;
Version data entries
10 entries across 10 versions & 1 rubygems