gui-one-nutui-react-taro/dist/esm/drag.taro-0717c783.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["attract", "direction", "boundary", "children", "className", "style"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useState, useRef, useEffect } from 'react';
import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  attract: false,
  direction: undefined,
  boundary: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  className: 'myDrag'
};
var Drag = function Drag(props) {
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    attract = _defaultProps$props.attract,
    direction = _defaultProps$props.direction,
    boundary = _defaultProps$props.boundary,
    children = _defaultProps$props.children,
    className = _defaultProps$props.className,
    style = _defaultProps$props.style,
    reset = _objectWithoutProperties(_defaultProps$props, _excluded);
  var b = cn('drag');
  var _useState = useState(boundary),
    _useState2 = _slicedToArray(_useState, 2),
    boundaryState = _useState2[0],
    setBoundaryState = _useState2[1];
  var myDrag = useRef(null);
  var dragRef = useRef(null);
  var _useState3 = useState({}),
    _useState4 = _slicedToArray(_useState3, 2),
    currstyle = _useState4[0],
    setCurrStyle = _useState4[1];
  var timer = useRef(0);
  var axisCache = useRef({
    x: 0,
    y: 0
  });
  var transformCache = useRef({
    x: 0,
    y: 0
  });
  var translateX = useRef(0);
  var translateY = useRef(0);
  var middleLine = useRef(0);
  var getInfo = function getInfo() {
    var el = myDrag.current;
    if (el) {
      var top = boundary.top,
        left = boundary.left,
        bottom = boundary.bottom,
        right = boundary.right;
      var _Taro$getSystemInfoSy = Taro.getSystemInfoSync(),
        screenWidth = _Taro$getSystemInfoSy.screenWidth,
        windowHeight = _Taro$getSystemInfoSy.windowHeight;
      Taro.createSelectorQuery().select(".".concat(className)).boundingClientRect(function (rec) {
        // console.log(rec.height, rec.width)
        setBoundaryState({
          top: -rec.top + top,
          left: -rec.left + left,
          bottom: windowHeight - rec.height - rec.top - bottom,
          right: screenWidth - rec.width - rec.left - right
        });
        middleLine.current = screenWidth - rec.width - rec.left - (screenWidth - rec.width) / 2;
      }).exec();
    }
  };
  var touchStart = function touchStart(e) {
    e.currentTarget;
    var touches = e.touches[0];
    axisCache.current = {
      x: touches.clientX,
      y: touches.clientY
    };
    transformCache.current = {
      x: translateX.current,
      y: translateY.current
    };
  };
  var touchMove = function touchMove(e) {
    e.preventDefault();
    if (e.touches.length === 1 && dragRef.current) {
      var touch = e.touches[0];
      var x = touch.clientX - axisCache.current.x;
      var y = touch.clientY - axisCache.current.y;
      translateX.current = x + transformCache.current.x;
      translateY.current = y + transformCache.current.y;
      // 边界判断
      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;
      }
      var transform = "translate3d(".concat(props.direction !== 'y' ? translateX.current : 0, "px, ").concat(props.direction !== 'x' ? translateY.current : 0, "px, 0px)");
      setCurrStyle({
        transform: transform
      });
    }
  };
  var touchEnd = function touchEnd(e) {
    if (props.direction !== 'y' && props.attract && dragRef.current) {
      if (translateX.current < middleLine.current) {
        translateX.current = boundaryState.left;
      } else {
        translateX.current = boundaryState.right;
      }
      var transform = "translate3d(".concat(translateX.current, "px, ").concat(props.direction !== 'x' ? translateY.current : 0, "px, 0px)");
      setCurrStyle({
        transform: transform
      });
    }
  };
  useEffect(function () {
    eventCenter.once(getCurrentInstance().router.onReady, function () {
      timer.current = setTimeout(function () {
        getInfo();
      }, 200);
    });
    return function () {
      clearTimeout(timer.current);
    };
  }, []);
  return React__default.createElement("div", _objectSpread(_objectSpread({
    style: style,
    className: "".concat(b(), " ").concat(className)
  }, reset), {}, {
    ref: myDrag
  }), React__default.createElement("div", {
    onTouchStart: function onTouchStart(event) {
      return touchStart(event);
    },
    ref: dragRef,
    onTouchMove: touchMove,
    onTouchEnd: touchEnd,
    // eslint-disable-next-line react/no-unknown-property
    style: currstyle
  }, children));
};
Drag.defaultProps = defaultProps;
Drag.displayName = 'NutDrag';
export { Drag as D };