binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1005] chore: pragmatic drag n drop implementation for labels (#4223)

Browse source 
* pragmatic drag n drop implementation for labels

* minor code quality improvements
This commit is contained in:
rahulramesha 2024-04-17 18:20:02 +05:30 • committed by GitHub
parent 68c870b791
commit 10ed12e589
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 517 additions and 334 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/types/src/pragmatic.d.ts vendored
View file

@ -8,18 +8,27 @@ export type TDropTargetMiscellaneousData = {
isActiveDueToStickiness: boolean;
};
export interface IPragmaticDropPayload {
location: {
initial: {
dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
};
current: {
dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
};
previous: {
dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
};
export interface IPragmaticPayloadLocation {
initial: {
dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
};
current: {
dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
};
previous: {
dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
};
}
export interface IPragmaticDropPayload {
location: IPragmaticPayloadLocation;
source: TDropTarget;
self: TDropTarget & TDropTargetMiscellaneousData;
}
export type InstructionType =
| "reparent"
| "reorder-above"
| "reorder-below"
| "make-child"
| "instruction-blocked";

8
packages/ui/src/drop-indicator.tsx
View file

@ -3,9 +3,12 @@ import { cn } from "../helpers";
type Props = {
isVisible: boolean;
classNames?: string;
};
export const DropIndicator = (props: Props) => {
const { isVisible, classNames = "" } = props;
return (
<div
className={cn(
@ -13,8 +16,9 @@ export const DropIndicator = (props: Props) => {
before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded
after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] after:h-[6px] after:w-[6px] after:rounded`,
{
"bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": props.isVisible,
}
"bg-custom-primary-100 before:bg-custom-primary-100 after:bg-custom-primary-100": isVisible,
},
classNames
)}
/>
);