react-native-tree-multi-select/lib/module/components/DragOverlay.js

Super-fast, customizable tree view component for React Native with drag-and-drop reordering, multi-selection, and search filtering.

"use strict";

import { memo } from "react";
import { Animated, StyleSheet, View } from "react-native";
import { fastIsEqual } from "fast-is-equal";
import { CheckboxView } from "./CheckboxView.js";
import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon.js";
import { defaultIndentationMultiplier } from "../constants/treeView.constants.js";
import { getTreeViewStore } from "../store/treeView.store.js";
import { getCheckboxValue } from "../helpers/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function _DragOverlay(props) {
  const {
    storeId,
    overlayY,
    overlayX,
    node,
    level,
    indentationMultiplier = defaultIndentationMultiplier,
    CheckboxComponent = CheckboxView,
    ExpandCollapseIconComponent = CustomExpandCollapseIcon,
    CustomNodeRowComponent,
    checkBoxViewStyleProps,
    dragDropCustomizations
  } = props;

  // Read the actual checked state for the dragged node
  const store = getTreeViewStore(storeId);
  const {
    checked,
    indeterminate
  } = store.getState();
  const checkedValue = getCheckboxValue(checked.has(node.id), indeterminate.has(node.id));
  const overlayStyleProps = dragDropCustomizations?.dragOverlayStyleProps;
  const CustomOverlay = dragDropCustomizations?.CustomDragOverlayComponent;
  return /*#__PURE__*/_jsx(Animated.View, {
    pointerEvents: "none",
    style: [styles.overlay, overlayStyleProps && {
      ...(overlayStyleProps.backgroundColor != null && {
        backgroundColor: overlayStyleProps.backgroundColor
      }),
      ...(overlayStyleProps.shadowColor != null && {
        shadowColor: overlayStyleProps.shadowColor
      }),
      ...(overlayStyleProps.shadowOffset != null && {
        shadowOffset: overlayStyleProps.shadowOffset
      }),
      ...(overlayStyleProps.shadowOpacity != null && {
        shadowOpacity: overlayStyleProps.shadowOpacity
      }),
      ...(overlayStyleProps.shadowRadius != null && {
        shadowRadius: overlayStyleProps.shadowRadius
      }),
      ...(overlayStyleProps.elevation != null && {
        elevation: overlayStyleProps.elevation
      }),
      ...(overlayStyleProps.zIndex != null && {
        zIndex: overlayStyleProps.zIndex
      })
    }, overlayStyleProps?.style, {
      transform: [{
        translateX: overlayX
      }, {
        translateY: overlayY
      }]
    }],
    children: CustomOverlay ? /*#__PURE__*/_jsx(CustomOverlay, {
      node: node,
      level: level,
      checkedValue: checkedValue
    }) : CustomNodeRowComponent ? /*#__PURE__*/_jsx(CustomNodeRowComponent, {
      node: node,
      level: level,
      checkedValue: checkedValue,
      isExpanded: false,
      onCheck: () => {},
      onExpand: () => {}
    }) : /*#__PURE__*/_jsxs(View, {
      style: [styles.nodeRow, {
        paddingStart: level * indentationMultiplier
      }],
      children: [/*#__PURE__*/_jsx(CheckboxComponent, {
        text: node.name,
        onValueChange: () => {},
        value: checkedValue,
        ...checkBoxViewStyleProps
      }), node.children?.length ? /*#__PURE__*/_jsx(View, {
        style: styles.expandArrow,
        children: /*#__PURE__*/_jsx(ExpandCollapseIconComponent, {
          isExpanded: false
        })
      }) : null]
    })
  });
}

/**
 * Re-rendering the overlay mid-drag makes React Native re-bind the Animated
 * transform, which can flash the overlay at its un-translated position for a
 * frame (visible when e.g. auto-expand re-renders the tree while dragging).
 * Nothing the overlay renders can change mid-drag, so block re-renders unless
 * a prop meaningfully differs - style/customization objects are compared by
 * value because consumers routinely pass fresh (but equal) literals per render.
 */
const overlayPropsAreEqual = (prev, next) => prev.storeId === next.storeId && prev.overlayY === next.overlayY && prev.overlayX === next.overlayX && prev.node === next.node && prev.level === next.level && prev.indentationMultiplier === next.indentationMultiplier && prev.CheckboxComponent === next.CheckboxComponent && prev.ExpandCollapseIconComponent === next.ExpandCollapseIconComponent && prev.CustomNodeRowComponent === next.CustomNodeRowComponent && fastIsEqual(prev.checkBoxViewStyleProps, next.checkBoxViewStyleProps) && fastIsEqual(prev.dragDropCustomizations, next.dragDropCustomizations);
export const DragOverlay = /*#__PURE__*/memo(_DragOverlay, overlayPropsAreEqual);
const styles = StyleSheet.create({
  overlay: {
    position: "absolute",
    left: 0,
    right: 0,
    zIndex: 9999,
    elevation: 10,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    backgroundColor: "rgba(255, 255, 255, 0.95)"
  },
  nodeRow: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    minWidth: "100%"
  },
  expandArrow: {
    flex: 1
  }
});
//# sourceMappingURL=DragOverlay.js.map