@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
171 lines (170 loc) • 7.16 kB
JavaScript
import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useState, useEffect, useRef } from "react";
import { View } from "@tarojs/components";
import { ComponentDefaults } from "../../utils/typings";
import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
import { getWindowInfo } from "../../utils/taro/get-system-info";
import { web } from "../../utils/taro/platform";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
attract: false,
direction: undefined,
boundary: {
top: 0,
left: 0,
right: 0,
bottom: 0
},
className: 'myDrag'
});
export var Drag = function(props) {
var _$_object_spread = _object_spread({}, defaultProps, props), attract = _$_object_spread.attract, direction = _$_object_spread.direction, boundary = _$_object_spread.boundary, onDrag = _$_object_spread.onDrag, onDragStart = _$_object_spread.onDragStart, onDragEnd = _$_object_spread.onDragEnd, children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
var classPrefix = 'nut-drag';
var _useState = _sliced_to_array(useState(boundary), 2), boundaryState = _useState[0], setBoundaryState = _useState[1];
var myDrag = useRef(null);
var dragRef = useRef(null);
var _useState1 = _sliced_to_array(useState({}), 2), currstyle = _useState1[0], setCurrStyle = _useState1[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() {
return _async_to_generator(function() {
var el, top, left, bottom, right, _getWindowInfo, screenWidth, windowHeight, _ref, width, height, dragTop, dragLeft;
return _ts_generator(this, function(_state) {
switch(_state.label){
case 0:
el = myDrag.current;
if (!el) return [
3,
2
];
top = boundary.top, left = boundary.left, bottom = boundary.bottom, right = boundary.right;
_getWindowInfo = getWindowInfo(), screenWidth = _getWindowInfo.screenWidth, windowHeight = _getWindowInfo.windowHeight;
return [
4,
getRectInMultiPlatform(dragRef.current)
];
case 1:
_ref = _state.sent(), width = _ref.width, height = _ref.height, dragTop = _ref.top, dragLeft = _ref.left;
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;
_state.label = 2;
case 2:
return [
2
];
}
});
})();
};
var touchStart = function(e) {
onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
var touches = e.touches[0];
axisCache.current = {
x: touches.clientX,
y: touches.clientY
};
transformCache.current = {
x: translateX.current,
y: translateY.current
};
};
var touchMove = function(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;
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;
}
var transform = "translate3d(".concat(direction !== 'y' ? translateX.current : 0, "px, ").concat(direction !== 'x' ? translateY.current : 0, "px, 0px)");
setCurrStyle({
transform: transform
});
}
};
var touchEnd = function() {
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;
}
var transform = "translate3d(".concat(translateX.current, "px, ").concat(direction !== 'x' ? translateY.current : 0, "px, 0px)");
setCurrStyle({
transform: transform
});
}
};
useEffect(function() {
if (dragRef.current) {
if (web()) {
timer.current = window.setTimeout(function() {
getInfo();
}, 300);
} else {
getInfo();
}
}
return function() {
clearTimeout(timer.current);
};
}, [
dragRef.current
]);
return /*#__PURE__*/ React.createElement(View, {
style: style,
className: "".concat(classPrefix, " ").concat(className),
ref: myDrag
}, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-inner"),
ref: dragRef,
catchMove: true,
// @ts-ignore
onTouchStart: touchStart,
// @ts-ignore
onTouchMove: touchMove,
onTouchEnd: touchEnd,
style: currstyle
}, children));
};
Drag.displayName = 'NutDrag';