github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix issues with sortable

Browse Source
This commit is contained in:
Satish Gandham 2024-06-03 17:57:18 +05:30
parent 84ab12d501
commit 21f1c8308f
6 changed files with 93 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/ui/src/sortable/draggable.tsx
View File

@ -3,7 +3,8 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { isEqual } from "lodash";
import { cn } from "../../helpers";
import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
import { DropIndicator } from "../drop-indicator";
type Props = {
children: React.ReactNode;
data: any; //@todo make this generic
@ -14,6 +15,7 @@ const Draggable = ({ children, data, className }: Props) => {
const [dragging, setDragging] = useState<boolean>(false); // NEW
const [isDraggedOver, setIsDraggedOver] = useState(false);
const [closestEdge, setClosestEdge] = useState<string | null>(null);
useEffect(() => {
const el = ref.current;
@ -27,19 +29,31 @@ const Draggable = ({ children, data, className }: Props) => {
}),
dropTargetForElements({
element: el,
onDragEnter: () => setIsDraggedOver(true),
onDragEnter: (args) => {
setIsDraggedOver(true);
setClosestEdge(extractClosestEdge(args.self.data));
},
onDragLeave: () => setIsDraggedOver(false),
onDrop: () => setIsDraggedOver(false),
onDrop: () => {
setIsDraggedOver(false);
},
canDrop: ({ source }) => !isEqual(source.data, data),
getData: () => data,
getData: ({ input, element }) =>
attachClosestEdge(data, {
input,
element,
allowedEdges: ["top", "bottom"],
}),
})
);
}
}, [data]);
return (
<div ref={ref} className={cn(dragging && "opacity-25", isDraggedOver && "bg-custom-background-80", className)}>
<div ref={ref} className={cn(dragging && "opacity-25", className)}>
{<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
{children}
{<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} classNames="absolute w-full" />}
</div>
);
};

10
packages/ui/src/sortable/sortable.stories.tsx
View File

@ -13,7 +13,7 @@ type Story = StoryObj<typeof Sortable>;
const data = [
{ id: "1", name: "John Doe" },
{ id: "2", name: "Jane Doe" },
{ id: "2", name: "Jane Doe 2" },
{ id: "3", name: "Alice" },
{ id: "4", name: "Bob" },
{ id: "5", name: "Charlie" },
@ -22,11 +22,11 @@ export const Default: Story = {
args: {
data,
render: (item: any) => (
<Draggable data={item} className="rounded-lg">
<div>{item.name}</div>
</Draggable>
// <Draggable data={item} className="rounded-lg">
<div className="border ">{item.name}</div>
// </Draggable>
),
onChange: (data) => console.log(data),
onChange: (data) => console.log(data.map(({ id }) => id)),
keyExtractor: (item: any) => item.id,
},
};

40
packages/ui/src/sortable/sortable.tsx
View File

@ -1,33 +1,55 @@
import React, { Fragment, useEffect } from "react";
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { Draggable } from "./draggable";
type Props<T> = {
data: T[];
render: (item: T, index: number) => React.ReactNode;
onChange: (data: T[]) => void;
keyExtractor: (item: T, index: number) => string;
containerClassName?: string;
};
const moveItems = <T,>(data: T[], source: T, destination: T): T[] => {
const moveItem = <T,>(
data: T[],
source: T,
destination: T & Record<symbol, string>,
keyExtractor: (item: T, index: number) => string
) => {
const sourceIndex = data.indexOf(source);
const destinationIndex = data.indexOf(destination);
if (sourceIndex === -1) return data;
if (sourceIndex === -1 || destinationIndex === -1) return data;
const destinationIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(destination, 0));
if (destinationIndex === -1) return data;
const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
const newData = [...data];
newData.splice(sourceIndex, 1);
newData.splice(destinationIndex, 0, source);
const [movedItem] = newData.splice(sourceIndex, 1);
let adjustedDestinationIndex = destinationIndex;
if (position === "bottom") {
adjustedDestinationIndex++;
}
// Prevent moving item out of bounds
if (adjustedDestinationIndex > newData.length) {
adjustedDestinationIndex = newData.length;
}
newData.splice(adjustedDestinationIndex, 0, movedItem);
return newData;
};
export const Sortable = <T,>({ data, render, onChange, keyExtractor }: Props<T>) => {
export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName }: Props<T>) => {
useEffect(() => {
const unsubscribe = monitorForElements({
onDrop({ source, location }) {
const destination = location?.current?.dropTargets[0];
if (!destination) return;
onChange(moveItems(data, source.data as T, destination.data as T));
onChange(moveItem(data, source.data as T, destination.data as T & { closestEdge: string }, keyExtractor));
},
});
@ -40,7 +62,9 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor }: Props<T>)
return (
<>
{data.map((item, index) => (
<Fragment key={keyExtractor(item, index)}>{render(item, index)}</Fragment>
<Draggable key={keyExtractor(item, index)} data={item} className={containerClassName}>
<Fragment>{render(item, index)} </Fragment>
</Draggable>
))}
</>
);

28
web/components/estimates/points/create-root.tsx
View File

@ -86,21 +86,19 @@ export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((p
<Sortable
data={estimatePoints}
render={(value: TEstimatePointsObject) => (
<Draggable data={value}>
<EstimatePointItemPreview
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimateType={estimateType}
estimatePointId={value?.id}
estimatePoints={estimatePoints}
estimatePoint={value}
handleEstimatePointValueUpdate={(estimatePointValue: string) =>
handleEstimatePoint("update", { ...value, value: estimatePointValue })
}
handleEstimatePointValueRemove={() => handleEstimatePoint("remove", value)}
/>
</Draggable>
<EstimatePointItemPreview
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimateType={estimateType}
estimatePointId={value?.id}
estimatePoints={estimatePoints}
estimatePoint={value}
handleEstimatePointValueUpdate={(estimatePointValue: string) =>
handleEstimatePoint("update", { ...value, value: estimatePointValue })
}
handleEstimatePointValueRemove={() => handleEstimatePoint("remove", value)}
/>
)}
onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}

44
web/components/estimates/points/edit-root.tsx
View File

@ -1,4 +1,4 @@
import { FC, useState } from "react";
import { FC, Fragment, useState } from "react";
import { observer } from "mobx-react";
import { Plus } from "lucide-react";
import { TEstimatePointsObject } from "@plane/types";
@ -74,26 +74,28 @@ export const EstimatePointEditRoot: FC<TEstimatePointEditRoot> = observer((props
return (
<div className="space-y-3">
<div className="text-sm font-medium text-custom-text-200 capitalize">{estimate?.type}</div>
<Sortable
data={estimatePoints}
render={(value: TEstimatePointsObject) => (
<Draggable data={value}>
{value?.id && estimate?.type && (
<EstimatePointItemPreview
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimatePointId={value?.id}
estimateType={estimate?.type}
estimatePoint={value}
estimatePoints={estimatePoints}
/>
)}
</Draggable>
)}
onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
/>
<div>
<Sortable
data={estimatePoints}
render={(value: TEstimatePointsObject) => (
<Fragment>
{value?.id && estimate?.type ? (
<EstimatePointItemPreview
workspaceSlug={workspaceSlug}
projectId={projectId}
estimateId={estimateId}
estimatePointId={value?.id}
estimateType={estimate?.type}
estimatePoint={value}
estimatePoints={estimatePoints}
/>
) : null}
</Fragment>
)}
onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
/>
</div>
{estimatePointCreate &&
estimatePointCreate.map(

2
web/components/estimates/points/preview.tsx
View File

@ -43,7 +43,7 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
return (
<div>
{!estimatePointEditToggle && !estimatePointDeleteToggle && (
<div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base">
<div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base my-1">
<div className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer">
<GripVertical size={14} className="text-custom-text-200" />
</div>