react-aria/dist/private/dnd/ListDropTargetDelegate.cjs.map

Spectrum UI components in React

{"mappings":"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","sources":["packages/react-aria/src/dnd/ListDropTargetDelegate.ts"],"sourcesContent":["import {\n  Direction,\n  DropTarget,\n  DropTargetDelegate,\n  Node,\n  Orientation,\n  RefObject\n} from '@react-types/shared';\n\ninterface ListDropTargetDelegateOptions {\n  /**\n   * Whether the items are arranged in a stack or grid.\n   *\n   * @default 'stack'\n   */\n  layout?: 'stack' | 'grid';\n  /**\n   * The primary orientation of the items. Usually this is the\n   * direction that the collection scrolls.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * The horizontal layout direction.\n   *\n   * @default 'ltr'\n   */\n  direction?: Direction;\n}\n\n// Terms used in the below code:\n//   * \"Primary\"   – The main layout direction. For stacks, this is the direction\n//                   that the stack is arranged in (e.g. horizontal or vertical).\n//                   For grids, this is the main scroll direction.\n//   * \"Secondary\" – The secondary layout direction. For stacks, there is no secondary\n//                   layout direction. For grids, this is the opposite of the primary direction.\n//   * \"Flow\"      – The flow direction of the items. For stacks, this is the the primary\n//                   direction. For grids, it is the secondary direction.\n\nexport class ListDropTargetDelegate implements DropTargetDelegate {\n  private collection: Iterable<Node<unknown>>;\n  private ref: RefObject<HTMLElement | null>;\n  private layout: 'stack' | 'grid';\n  private orientation: Orientation;\n  protected direction: Direction;\n\n  constructor(\n    collection: Iterable<Node<unknown>>,\n    ref: RefObject<HTMLElement | null>,\n    options?: ListDropTargetDelegateOptions\n  ) {\n    this.collection = collection;\n    this.ref = ref;\n    this.layout = options?.layout || 'stack';\n    this.orientation = options?.orientation || 'vertical';\n    this.direction = options?.direction || 'ltr';\n  }\n\n  private getPrimaryStart(rect: DOMRect) {\n    return this.orientation === 'horizontal' ? rect.left : rect.top;\n  }\n\n  private getPrimaryEnd(rect: DOMRect) {\n    return this.orientation === 'horizontal' ? rect.right : rect.bottom;\n  }\n\n  private getSecondaryStart(rect: DOMRect) {\n    return this.orientation === 'horizontal' ? rect.top : rect.left;\n  }\n\n  private getSecondaryEnd(rect: DOMRect) {\n    return this.orientation === 'horizontal' ? rect.bottom : rect.right;\n  }\n\n  private getFlowStart(rect: DOMRect) {\n    return this.layout === 'stack' ? this.getPrimaryStart(rect) : this.getSecondaryStart(rect);\n  }\n\n  private getFlowEnd(rect: DOMRect) {\n    return this.layout === 'stack' ? this.getPrimaryEnd(rect) : this.getSecondaryEnd(rect);\n  }\n\n  private getFlowSize(rect: DOMRect) {\n    return this.getFlowEnd(rect) - this.getFlowStart(rect);\n  }\n\n  getDropTargetFromPoint(\n    x: number,\n    y: number,\n    isValidDropTarget: (target: DropTarget) => boolean\n  ): DropTarget {\n    if (this.collection[Symbol.iterator]().next().done || !this.ref.current) {\n      return {type: 'root'};\n    }\n\n    let rect: DOMRect | undefined = this.ref.current.getBoundingClientRect();\n    let primary = this.orientation === 'horizontal' ? x : y;\n    let secondary = this.orientation === 'horizontal' ? y : x;\n    primary += this.getPrimaryStart(rect);\n    secondary += this.getSecondaryStart(rect);\n\n    let flow = this.layout === 'stack' ? primary : secondary;\n    let isPrimaryRTL = this.orientation === 'horizontal' && this.direction === 'rtl';\n    let isSecondaryRTL =\n      this.layout === 'grid' && this.orientation === 'vertical' && this.direction === 'rtl';\n    let isFlowRTL = this.layout === 'stack' ? isPrimaryRTL : isSecondaryRTL;\n\n    let collection = this.ref.current?.dataset.collection;\n    let elements = this.ref.current.querySelectorAll(\n      collection ? `[data-collection=\"${CSS.escape(collection)}\"]` : '[data-key]'\n    );\n    let elementMap = new Map<string, HTMLElement>();\n    for (let item of elements) {\n      if (item instanceof HTMLElement && item.dataset.key != null) {\n        elementMap.set(item.dataset.key, item);\n      }\n    }\n\n    // TODO: assume that only item type items are valid drop targets. This is to prevent a crash when dragging over the loader\n    // row since it doesn't have a data-key set on it. Will eventually need to handle the case with drag and drop and loaders located between rows aka tree.\n    // Can see https://github.com/adobe/react-spectrum/pull/4210/files#diff-21e555e0c597a28215e36137f5be076a65a1e1456c92cd0fdd60f866929aae2a for additional logic\n    // that may need to happen then\n    let items = [...this.collection].filter(item => item.type === 'item');\n\n    if (items.length < 1) {\n      return {type: 'root'};\n    }\n\n    let low = 0;\n    let high = items.length;\n    while (low < high) {\n      let mid = Math.floor((low + high) / 2);\n      let item = items[mid];\n      let element = elementMap.get(String(item.key));\n      if (!element) {\n        break;\n      }\n      let rect = element.getBoundingClientRect();\n      let update = (isGreater: boolean) => {\n        if (isGreater) {\n          low = mid + 1;\n        } else {\n          high = mid;\n        }\n      };\n\n      if (primary < this.getPrimaryStart(rect)) {\n        update(isPrimaryRTL);\n      } else if (primary > this.getPrimaryEnd(rect)) {\n        update(!isPrimaryRTL);\n      } else if (secondary < this.getSecondaryStart(rect)) {\n        update(isSecondaryRTL);\n      } else if (secondary > this.getSecondaryEnd(rect)) {\n        update(!isSecondaryRTL);\n      } else {\n        let target: DropTarget = {\n          type: 'item',\n          key: item.key,\n          dropPosition: 'on'\n        };\n\n        if (isValidDropTarget(target)) {\n          // Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px\n          // of the start or end of the item.\n          if (\n            flow <= this.getFlowStart(rect) + 5 &&\n            isValidDropTarget({...target, dropPosition: 'before'})\n          ) {\n            target.dropPosition = isFlowRTL ? 'after' : 'before';\n          } else if (\n            flow >= this.getFlowEnd(rect) - 5 &&\n            isValidDropTarget({...target, dropPosition: 'after'})\n          ) {\n            target.dropPosition = isFlowRTL ? 'before' : 'after';\n          }\n        } else {\n          // If dropping on the item isn't accepted, try the target before or after depending on the position.\n          let mid = this.getFlowStart(rect) + this.getFlowSize(rect) / 2;\n          if (flow <= mid && isValidDropTarget({...target, dropPosition: 'before'})) {\n            target.dropPosition = isFlowRTL ? 'after' : 'before';\n          } else if (flow >= mid && isValidDropTarget({...target, dropPosition: 'after'})) {\n            target.dropPosition = isFlowRTL ? 'before' : 'after';\n          }\n        }\n\n        return target;\n      }\n    }\n\n    let item = items[Math.min(low, items.length - 1)];\n    let element = elementMap.get(String(item.key));\n    rect = element?.getBoundingClientRect();\n\n    if (\n      rect &&\n      (primary < this.getPrimaryStart(rect) ||\n        Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))\n    ) {\n      return {\n        type: 'item',\n        key: item.key,\n        dropPosition: isFlowRTL ? 'after' : 'before'\n      };\n    }\n\n    return {\n      type: 'item',\n      key: item.key,\n      dropPosition: isFlowRTL ? 'before' : 'after'\n    };\n  }\n}\n"],"names":[],"version":3,"file":"ListDropTargetDelegate.cjs.map"}