@mapples/dnd 1.0.1

package/dist/types/index.d.ts

@@ -0,0 +1,208 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+import { LayoutRectangle, ViewProps } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+import { SvgProps } from 'react-native-svg';
+import { Monitor } from '../monitor';
+export { Monitor };
+/**
+ * Enum representing the different types of drag and drop events.
+ * @public
+ */
+export declare enum DnDEventType {
+    /** Fired when a drag operation starts */
+    DragStart = 0,
+    /** Fired during a drag operation when the drag position changes */
+    Drag = 1,
+    /** Fired when a drag operation ends */
+    DragEnd = 2,
+    /** Fired when a tap/select event occurs */
+    Select = 3,
+    /** Fired when layout information is updated */
+    Layout = 4,
+    /** Fired to force a layout update */
+    LayoutForceUpdate = 5
+}
+/**
+ * Interface representing a drag and drop event with associated data.
+ * @template DragData - The type of data being dragged
+ * @template DropData - The type of data for drop targets (defaults to DragData)
+ * @public
+ */
+export interface DnDEvent<DragData extends object, DropData extends object = DragData> {
+    /** The type of drag and drop event */
+    type: DnDEventType;
+    /** The ID of the drag target element */
+    target?: number | null;
+    /** The drop target that the drag is currently over */
+    dropTarget?: DropTarget<DropData> | null;
+    /** The index position within the drop target */
+    dropTargetIndex?: number | null;
+    /** The data associated with the drag operation */
+    data?: DragData | null;
+    /** The current coordinates of the drag operation */
+    dragCoords?: DragCoords | null;
+}
+/**
+ * Type representing the coordinates of a drag operation.
+ * @public
+ */
+export type DragCoords = {
+    /** The x-coordinate */
+    x: number;
+    /** The y-coordinate */
+    y: number;
+};
+/**
+ * Interface representing the drag and drop context type.
+ * @template DragData - The type of data being dragged
+ * @template DropData - The type of data for drop targets (defaults to DragData)
+ * @public
+ */
+export interface DnDContextType<DragData extends object, DropData extends object = DragData> {
+    /** The monitor instance that tracks drag and drop operations */
+    monitor: Monitor<DragData, DropData>;
+    /** Whether a drag operation is currently active */
+    isDragging: boolean;
+    /** Shared value for drag coordinates */
+    sv: SharedValue<DragCoords>;
+    /** Shared value for overlay layout information */
+    svOverLayout: SharedValue<LayoutRectangle>;
+}
+/**
+ * Interface representing a draggable item with metadata and data.
+ * @template T - The type of data associated with the drag item
+ * @public
+ */
+export interface DragItem<T> {
+    /** The type identifier for the drag item */
+    type: string;
+    /** The display label for the drag item */
+    label: string;
+    /** Optional icon component for the drag item */
+    icon?: FC<SvgProps>;
+    /** The data payload associated with the drag item */
+    data: T;
+}
+/**
+ * Props type for a draggable view component.
+ * @template T - The type of data associated with the drag item
+ * @public
+ */
+export type DraggableViewProps<T> = PropsWithChildren<ViewProps> & {
+    /** The drag item configuration */
+    item: DragItem<T>;
+};
+/**
+ * Props type for the root drag and drop view component.
+ * @template DragData - The type of data being dragged
+ * @template DropData - The type of data for drop targets (defaults to DragData)
+ * @public
+ */
+export type DnDRootViewProps<DragData extends object, DropData extends object = DragData> = PropsWithChildren<ViewProps> & {
+    /** Optional custom drag element renderer */
+    DragElement?: <T>(data: DragItem<T>) => ReactElement;
+    /** Callback fired when a drop operation completes */
+    onDrop?: (event: DnDEvent<DragData, DropData>, item: DragItem<DragData>) => void;
+};
+/**
+ * Props interface for the drop area component.
+ * @public
+ */
+export interface DropAreaProps {
+    /** The ID of the parent drop target this area belongs to */
+    forId: number;
+}
+/**
+ * Enum representing the flex direction for drop target layouts.
+ * @public
+ */
+export declare enum FlexDirection {
+    /** Vertical layout (column) */
+    Column = "column",
+    /** Horizontal layout (row) */
+    Row = "row"
+}
+/**
+ * Interface for configuring drop target layout properties.
+ * @public
+ */
+export interface DropTargetLayoutConfig {
+    /** The index position within the parent container */
+    index?: number;
+    /** The z-index for layering */
+    zIndex?: number;
+    /** The flex direction for child elements */
+    flexDirection?: FlexDirection;
+}
+/**
+ * Interface for configuring drop target behavior and layout.
+ * @public
+ */
+export interface DropTargetConfig extends DropTargetLayoutConfig {
+    /** Whether this drop target can accept drops */
+    canDrop?: boolean;
+}
+/**
+ * Type representing a layout position with required configuration properties.
+ * @public
+ */
+export type LayoutPosition = LayoutRectangle & Required<DropTargetLayoutConfig>;
+/**
+ * Interface representing a drop item with layout and data information.
+ * @template T - The type of data associated with the drop item
+ * @public
+ */
+export interface DropItem<T> {
+    /** The layout position and configuration */
+    layout: LayoutPosition;
+    /** Optional child drop items */
+    children?: DropTree<T>;
+    /** Whether this item can accept drops */
+    canDrop?: boolean;
+    /** Optional data associated with this drop item */
+    data?: T;
+}
+/**
+ * Type representing a tree structure of drop items.
+ * @template T - The type of data associated with the drop items
+ * @public
+ */
+export type DropTree<T> = Map<number, DropItem<T>>;
+/**
+ * Interface for configuring the drag and drop monitor.
+ * @public
+ */
+export interface MonitorConfig {
+    /** Padding around drop targets for hit detection */
+    padding: number;
+    /** Whether to track drag operations outside the root element */
+    trackOutside?: boolean;
+}
+/**
+ * Interface representing a drop target with all its properties.
+ * @template T - The type of data associated with the drop target
+ * @public
+ */
+export interface DropTarget<T> {
+    /** Unique identifier for the drop target */
+    id: number;
+    /** Layout position and configuration */
+    layout: LayoutPosition;
+    /** Index position within the parent */
+    index: number;
+    /** Whether this target can accept drops */
+    canDrop?: boolean;
+    /** Optional child drop targets */
+    children?: DropTree<T>;
+    /** Optional data associated with this drop target */
+    data?: T;
+}
+/**
+ * Type representing a drag element target with layout and item information.
+ * @template T - The type of data associated with the drag item
+ * @public
+ */
+export type DragElementTarget<T> = LayoutRectangle & {
+    item: DragItem<T>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/types/index.js

@@ -0,0 +1,33 @@
+import { Monitor } from '../monitor';
+export { Monitor };
+/**
+ * Enum representing the different types of drag and drop events.
+ * @public
+ */
+export var DnDEventType;
+(function (DnDEventType) {
+    /** Fired when a drag operation starts */
+    DnDEventType[DnDEventType["DragStart"] = 0] = "DragStart";
+    /** Fired during a drag operation when the drag position changes */
+    DnDEventType[DnDEventType["Drag"] = 1] = "Drag";
+    /** Fired when a drag operation ends */
+    DnDEventType[DnDEventType["DragEnd"] = 2] = "DragEnd";
+    /** Fired when a tap/select event occurs */
+    DnDEventType[DnDEventType["Select"] = 3] = "Select";
+    /** Fired when layout information is updated */
+    DnDEventType[DnDEventType["Layout"] = 4] = "Layout";
+    /** Fired to force a layout update */
+    DnDEventType[DnDEventType["LayoutForceUpdate"] = 5] = "LayoutForceUpdate";
+})(DnDEventType || (DnDEventType = {}));
+/**
+ * Enum representing the flex direction for drop target layouts.
+ * @public
+ */
+export var FlexDirection;
+(function (FlexDirection) {
+    /** Vertical layout (column) */
+    FlexDirection["Column"] = "column";
+    /** Horizontal layout (row) */
+    FlexDirection["Row"] = "row";
+})(FlexDirection || (FlexDirection = {}));
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,CAAC;AAEnB;;;GAGG;AACH,MAAM,CAAN,IAAY,YAaX;AAbD,WAAY,YAAY;IACtB,yCAAyC;IACzC,yDAAS,CAAA;IACT,mEAAmE;IACnE,+CAAI,CAAA;IACJ,uCAAuC;IACvC,qDAAO,CAAA;IACP,2CAA2C;IAC3C,mDAAM,CAAA;IACN,+CAA+C;IAC/C,mDAAM,CAAA;IACN,qCAAqC;IACrC,yEAAiB,CAAA;AACnB,CAAC,EAbW,YAAY,KAAZ,YAAY,QAavB;AA+GD;;;GAGG;AACH,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,+BAA+B;IAC/B,kCAAiB,CAAA;IACjB,8BAA8B;IAC9B,4BAAW,CAAA;AACb,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB"}

package/dist/utils/index.d.ts

@@ -0,0 +1,11 @@
+import { DnDEvent, DnDEventType } from '../types';
+/**
+ * Creates a filter function for drag and drop events.
+ * This utility function returns a predicate that checks if an event matches any of the specified event types.
+ *
+ * @param events - The event types to filter for
+ * @returns A predicate function that returns true if the event matches any of the specified types
+ * @public
+ */
+export declare const filterEvents: (...events: DnDEventType[]) => <DragTarget extends object, DropTarget extends object = DragTarget>(event: DnDEvent<DragTarget, DropTarget>) => boolean;
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAElD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GACtB,GAAG,QAAQ,YAAY,EAAE,MACzB,UAAU,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,GAAG,UAAU,EAChE,OAAO,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC,YAGxC,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+import { indexOf } from 'lodash';
+/**
+ * Creates a filter function for drag and drop events.
+ * This utility function returns a predicate that checks if an event matches any of the specified event types.
+ *
+ * @param events - The event types to filter for
+ * @returns A predicate function that returns true if the event matches any of the specified types
+ * @public
+ */
+export const filterEvents = (...events) => (event) => {
+    return indexOf(events, event.type) >= 0;
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIjC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GACvB,CAAC,GAAG,MAAsB,EAAE,EAAE,CAC9B,CACE,KAAuC,EACvC,EAAE;IACF,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@mapples/dnd",
+  "version": "1.0.1",
+  "description": "A powerful and flexible drag and drop library for React Native applications",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react-native",
+    "drag-and-drop",
+    "gesture-handler",
+    "typescript",
+    "mobile"
+  ],
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "author": {
+    "name": "Oleksandr Soloviov",
+    "url": "https://mapples.org/people/olek_soloviov"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mapplesorg/mapples-open-kit.git",
+    "directory": "packages/@mapples/dnd"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "rxjs": "^7.8.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 <20.0.0",
+    "react-native": ">=0.71.0",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-svg": "15.11.2"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": false
+    },
+    "react-native-reanimated": {
+      "optional": false
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.16",
+    "@types/react": ">=18.0.0 <20.0.0",
+    "typescript": "~5.9.2"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ]
+}