@nutui/nutui-react-taro 1.4.4 → 1.4.5-beta.0

package/dist/esm/drag.taro-82b6b27a.js

@@ -1,149 +1,110 @@
-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 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'
+
+const 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) {
-        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
+const Drag = (props) => {
+    const { attract, direction, boundary, children, className, style, ...reset } = {
+        ...defaultProps,
+        ...props,
     };
-    transformCache.current = {
-      x: translateX.current,
-      y: translateY.current
+    const b = cn('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 = () => {
+        const el = myDrag.current;
+        if (el) {
+            const { top, left, bottom, right } = boundary;
+            const { screenWidth, windowHeight } = Taro.getSystemInfoSync();
+            Taro.createSelectorQuery()
+                .select(`.${className}`)
+                .boundingClientRect((rec) => {
+                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 touchMove = function touchMove(e) {
-    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 () {
-    timer.current = window.setTimeout(function () {
-      getInfo();
-    }, 300);
-    return function () {
-      clearTimeout(timer.current);
+    const touchStart = (e) => {
+        e.currentTarget;
+        const touches = e.touches[0];
+        axisCache.current = { x: touches.clientX, y: touches.clientY };
+        transformCache.current = { x: translateX.current, y: translateY.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));
+    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;
+            // 边界判断
+            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(${props.direction !== 'y' ? translateX.current : 0}px, ${props.direction !== 'x' ? translateY.current : 0}px, 0px)`;
+            setCurrStyle({ transform });
+        }
+    };
+    const touchEnd = (e) => {
+        if (props.direction !== 'y' && props.attract && dragRef.current) {
+            if (translateX.current < middleLine.current) {
+                translateX.current = boundaryState.left;
+            }
+            else {
+                translateX.current = boundaryState.right;
+            }
+            const transform = `translate3d(${translateX.current}px, ${props.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", { style: style, className: `${b()} ${className}`, ...reset, ref: myDrag },
+        React__default.createElement("div", { onTouchStart: (event) => 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 };