83fdebf64d
- Add jscodeshift-based codemod to convert arrow function components to function declarations - Support React.FC, observer-wrapped, and forwardRef components - Include comprehensive test suite covering edge cases - Add npm script to run transformer across codebase - Target only .tsx files in source directories, excluding node_modules and declaration files * [WEB-5459] chore: updates after running codemod --------- Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
// @ts-expect-error Due to live server dependencies
|
|
import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
|
|
import {
|
|
draggable,
|
|
dropTargetForElements,
|
|
// @ts-expect-error Due to live server dependencies
|
|
} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
|
|
import {
|
|
attachClosestEdge,
|
|
extractClosestEdge,
|
|
// @ts-expect-error Due to live server dependencies
|
|
} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
|
|
import { isEqual } from "lodash-es";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { DropIndicator } from "../drop-indicator";
|
|
import { cn } from "../utils";
|
|
|
|
type Props = {
|
|
children: React.ReactNode;
|
|
data: any; //@todo make this generic
|
|
className?: string;
|
|
};
|
|
|
|
function Draggable({ children, data, className }: Props) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [dragging, setDragging] = useState<boolean>(false); // NEW
|
|
const [isDraggedOver, setIsDraggedOver] = useState(false);
|
|
|
|
const [closestEdge, setClosestEdge] = useState<string | null>(null);
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
|
|
if (el) {
|
|
combine(
|
|
draggable({
|
|
element: el,
|
|
onDragStart: () => setDragging(true), // NEW
|
|
onDrop: () => setDragging(false), // NEW
|
|
getInitialData: () => data,
|
|
}),
|
|
dropTargetForElements({
|
|
element: el,
|
|
// @ts-expect-error Due to live server dependencies
|
|
onDragEnter: (args) => {
|
|
setIsDraggedOver(true);
|
|
setClosestEdge(extractClosestEdge(args.self.data));
|
|
},
|
|
onDragLeave: () => setIsDraggedOver(false),
|
|
onDrop: () => {
|
|
setIsDraggedOver(false);
|
|
},
|
|
// @ts-expect-error Due to live server dependencies
|
|
canDrop: ({ source }) => !isEqual(source.data, data) && source.data.__uuid__ === data.__uuid__,
|
|
// @ts-expect-error Due to live server dependencies
|
|
getData: ({ input, element }) =>
|
|
attachClosestEdge(data, {
|
|
input,
|
|
element,
|
|
allowedEdges: ["top", "bottom"],
|
|
}),
|
|
})
|
|
);
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<div ref={ref} className={cn(dragging && "opacity-25", className)}>
|
|
{<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
|
|
{children}
|
|
{<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { Draggable };
|