@nutui/nutui-react-taro/dist/esm/drag.taro-CHPSfySz.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest, a as __awaiter } from "./tslib.es6-iWu3F_1J.js";
import React__default, { useState, useRef, useEffect } from "react";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
import { g as getRectByTaro } from "./get-rect-by-taro-D0h6aiDr.js";
import { g as getWindowInfo } from "./get-system-info-D27xNglo.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { attract: false, direction: void 0, boundary: {
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
}, className: "myDrag" });
const Drag = (props) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { attract, direction, boundary, onDrag, onDragStart, onDragEnd, children, className, style } = _a, reset = __rest(_a, ["attract", "direction", "boundary", "onDrag", "onDragStart", "onDragEnd", "children", "className", "style"]);
  const classPrefix = "nut-drag";
  const [boundaryState, setBoundaryState] = useState(boundary);
  const myDrag = useRef(null);
  const dragRef = useRef(null);
  const [currstyle, setCurrStyle] = useState({});
  const timer = useRef(0);
  const axisCache = useRef({ x: 0, y: 0 });
  const transformCache = useRef({ x: 0, y: 0 });
  const translateX = useRef(0);
  const translateY = useRef(0);
  const middleLine = useRef(0);
  const getInfo = () => __awaiter(void 0, void 0, void 0, function* () {
    const el = myDrag.current;
    if (el) {
      const { top, left, bottom, right } = boundary;
      const { screenWidth, windowHeight } = getWindowInfo();
      const { width, height, top: dragTop, left: dragLeft } = yield getRectByTaro(dragRef.current);
      setBoundaryState({
        top: -dragTop + top,
        left: -dragLeft + left,
        bottom: windowHeight - dragTop - bottom - Math.ceil(height),
        right: screenWidth - dragLeft - right - Math.ceil(width)
      });
      middleLine.current = screenWidth - width - dragLeft - (screenWidth - width) / 2;
    }
  });
  const touchStart = (e) => {
    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
    const touches = e.touches[0];
    axisCache.current = { x: touches.clientX, y: touches.clientY };
    transformCache.current = { x: translateX.current, y: translateY.current };
  };
  const touchMove = (e) => {
    if (e.touches.length === 1 && dragRef.current) {
      const touch = e.touches[0];
      const x = touch.clientX - axisCache.current.x;
      const y = touch.clientY - axisCache.current.y;
      translateX.current = x + transformCache.current.x;
      translateY.current = y + transformCache.current.y;
      onDrag === null || onDrag === void 0 ? void 0 : onDrag({
        offset: [translateX.current, translateY.current]
      });
      if (translateX.current < boundaryState.left) {
        translateX.current = boundaryState.left;
      } else if (translateX.current > boundaryState.right) {
        translateX.current = boundaryState.right;
      }
      if (translateY.current < boundaryState.top) {
        translateY.current = boundaryState.top;
      } else if (translateY.current > boundaryState.bottom) {
        translateY.current = boundaryState.bottom;
      }
      const transform = `translate3d(${direction !== "y" ? translateX.current : 0}px, ${direction !== "x" ? translateY.current : 0}px, 0px)`;
      setCurrStyle({ transform });
    }
  };
  const touchEnd = (e) => {
    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd({
      offset: [translateX.current, translateY.current]
    });
    if (direction !== "y" && attract && dragRef.current) {
      if (translateX.current < middleLine.current) {
        translateX.current = boundaryState.left;
      } else {
        translateX.current = boundaryState.right;
      }
      const transform = `translate3d(${translateX.current}px, ${direction !== "x" ? translateY.current : 0}px, 0px)`;
      setCurrStyle({ transform });
    }
  };
  useEffect(() => {
    timer.current = window.setTimeout(() => {
      getInfo();
    }, 300);
    return () => {
      clearTimeout(timer.current);
    };
  }, []);
  return React__default.createElement(
    "div",
    Object.assign({ style, className: `${classPrefix} ${className}` }, reset, { ref: myDrag }),
    React__default.createElement("div", {
      className: `${classPrefix}-inner`,
      onTouchStart: (event) => touchStart(event),
      ref: dragRef,
      onTouchMove: touchMove,
      onTouchEnd: touchEnd,
      // eslint-disable-next-line react/no-unknown-property
      style: currstyle
    }, children)
  );
};
Drag.displayName = "NutDrag";
export {
  Drag as D
};