@gizwits/vantui
Version:
机智云组件库
249 lines • 9.18 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["leftWidth", "rightWidth", "style", "className", "disabled", "name", "onClick", "onOpen", "onClose", "asyncClose", "children", "renderRight", "renderLeft"];
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 { View, CustomWrapper } from '@tarojs/components';
import { useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
import * as utils from '../wxs/utils';
import { range } from '../common/utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var THRESHOLD = 0.3;
var ARRAY = [];
var MIN_DISTANCE = 10;
function getDirection(x, y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal';
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical';
}
return '';
}
function Index(props, ref) {
var _useState = useState({}),
_useState2 = _slicedToArray(_useState, 2),
wrapperStyle = _useState2[0],
setWrapperStyle = _useState2[1];
var _useState3 = useState(0),
_useState4 = _slicedToArray(_useState3, 2),
offset = _useState4[0],
setOffset = _useState4[1];
var _useState5 = useState({}),
_useState6 = _slicedToArray(_useState5, 2),
instanceKey = _useState6[0],
setInstanceKey = _useState6[1];
var _useState7 = useState({}),
_useState8 = _slicedToArray(_useState7, 2),
touchState = _useState8[0],
setTouchState = _useState8[1];
var _useState9 = useState(0),
_useState10 = _slicedToArray(_useState9, 2),
startOffset = _useState10[0],
setStartOffset = _useState10[1];
var _props$leftWidth = props.leftWidth,
leftWidth = _props$leftWidth === void 0 ? 0 : _props$leftWidth,
_props$rightWidth = props.rightWidth,
rightWidth = _props$rightWidth === void 0 ? 0 : _props$rightWidth,
style = props.style,
className = props.className,
disabled = props.disabled,
_props$name = props.name,
name = _props$name === void 0 ? '' : _props$name,
onClick = props.onClick,
onOpen = props.onOpen,
onClose = props.onClose,
asyncClose = props.asyncClose,
children = props.children,
renderRight = props.renderRight,
renderLeft = props.renderLeft,
others = _objectWithoutProperties(props, _excluded);
var swipeMove = useCallback(function () {
var offset2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var dragging = arguments.length > 1 ? arguments[1] : undefined;
var offset_ = range(offset2, -rightWidth, leftWidth);
setOffset(offset_);
var transform = "translate3d(".concat(offset_, "px, 0, 0)");
var transition = dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
var wrapperStyle_ = _objectSpread(_objectSpread({}, wrapperStyle), {}, {
'-webkit-transform': transform,
'-webkit-transition': transition,
transform: transform,
transition: transition
});
setWrapperStyle(wrapperStyle_);
}, [leftWidth, rightWidth, wrapperStyle]);
var close = useCallback(function () {
swipeMove(0);
}, [swipeMove]);
useEffect(function () {
var k = new Date();
if (JSON.stringify(instanceKey) === '{}') {
setInstanceKey({
key: k,
close: close
});
ARRAY.push({
key: k,
close: close
});
}
}, [close, instanceKey]);
useEffect(function () {
return function () {
ARRAY = ARRAY.filter(function (item) {
return item.key !== instanceKey.key;
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var resetTouchStatus = useCallback(function () {
setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
direction: '',
deltaX: 0,
deltaY: 0,
offsetX: 0,
offsetY: 0
}));
}, [touchState]);
var touchStart = useCallback(function (event) {
resetTouchStatus();
var touch = event.touches[0];
setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
startX: touch.clientX,
startY: touch.startY
}));
}, [touchState, resetTouchStatus]);
var touchMove = useCallback(function (event) {
resetTouchStatus();
var touch = event.touches[0];
var newTouchState = _objectSpread(_objectSpread({}, touchState), {}, {
direction: touchState.direction || getDirection(touchState.offsetX, touchState.offsetY),
deltaX: touch.clientX - (touchState.startX || 0),
deltaY: touch.clientY - (touchState.startY || 0),
offsetX: Math.abs(touchState.deltaX),
offsetY: Math.abs(touchState.deltaY)
});
setTouchState(newTouchState);
return newTouchState;
}, [touchState, resetTouchStatus]);
var open = useCallback(function (position) {
var offset = position === 'left' ? leftWidth : -rightWidth;
swipeMove(offset);
if (onOpen) {
var e = {
detail: {
position: position,
name: name
}
};
onOpen(e);
}
}, [leftWidth, onOpen, rightWidth, swipeMove, name]);
var swipeLeaveTransition = useCallback(function () {
if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
open('right');
} else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
open('left');
} else {
swipeMove(0);
}
}, [leftWidth, offset, open, rightWidth, swipeMove]);
var onClick_ = useCallback(function (event) {
event.stopPropagation();
event.preventDefault();
var _event$currentTarget$ = event.currentTarget.dataset.key,
position = _event$currentTarget$ === void 0 ? 'outside' : _event$currentTarget$;
Object.defineProperty(event, 'detail', {
value: {
position: position,
name: name,
instance: {
close: close,
open: open
}
}
});
if (onClick) onClick(event);
if (asyncClose && onClose) {
onClose(event);
} else if (onClose) {
onClose(event);
swipeMove(0);
} else {
swipeMove(0);
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[asyncClose, onClick, onClose, swipeMove]);
var startDrag = useCallback(function (event) {
if (disabled) return;
setStartOffset(offset);
touchStart(event);
}, [disabled, offset, touchStart]);
var onDrag = useCallback(function (event) {
if (disabled) return;
event.preventDefault();
var touchState = touchMove(event);
ARRAY.filter(function (item) {
return item.key !== instanceKey.key;
}).forEach(function (item) {
return item.close();
});
swipeMove(startOffset + touchState.deltaX, true);
}, [disabled, instanceKey.key, startOffset, swipeMove, touchMove]);
var endDrag = useCallback(function () {
if (disabled) return;
swipeLeaveTransition();
}, [disabled, swipeLeaveTransition]);
useImperativeHandle(ref, function () {
return {
close: close,
open: open
};
});
var MAIN_RENDER = /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread({
className: "van-swipe-cell ".concat(className),
"data-key": "cell",
style: utils.style([style]),
onClick: onClick_,
onTouchStart: startDrag,
onTouchMove: onDrag,
onTouchEnd: endDrag,
onTouchCancel: endDrag
}, others), {}, {
children: /*#__PURE__*/_jsxs(View, {
style: wrapperStyle,
children: [leftWidth ? /*#__PURE__*/_jsx(View, {
className: "van-swipe-cell__left",
"data-key": "left",
onClick: onClick_,
style: {
width: leftWidth + 'px'
},
children: renderLeft
}) : '', children, rightWidth ? /*#__PURE__*/_jsx(View, {
className: "van-swipe-cell__right",
"data-key": "right",
onClick: onClick_,
style: {
width: rightWidth + 'px'
},
children: renderRight
}) : '']
})
}));
if (process.env.TARO_ENV === 'weapp') {
return /*#__PURE__*/_jsx(CustomWrapper, {
children: MAIN_RENDER
});
} else return /*#__PURE__*/_jsx(_Fragment, {
children: MAIN_RENDER
});
}
var SwipeCell = /*#__PURE__*/forwardRef(Index);
export { SwipeCell };
export default SwipeCell;