@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
287 lines • 10.2 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 } from '@tarojs/components';
import { useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
import { nextTick } from '@tarojs/taro';
import * as utils from '../wxs/utils';
import { range } from '../common/utils';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ARRAY = [];
var MIN_DISTANCE = 20;
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(get().SwipeCell),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _useState3 = useState({}),
_useState4 = _slicedToArray(_useState3, 2),
wrapperStyle = _useState4[0],
setWrapperStyle = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
offset = _useState6[0],
setOffset = _useState6[1];
var _useState7 = useState({}),
_useState8 = _slicedToArray(_useState7, 2),
instanceKey = _useState8[0],
setInstanceKey = _useState8[1];
var _useState9 = useState({}),
_useState10 = _slicedToArray(_useState9, 2),
touchState = _useState10[0],
setTouchState = _useState10[1];
var _useState11 = useState(0),
_useState12 = _slicedToArray(_useState11, 2),
startOffset = _useState12[0],
setStartOffset = _useState12[1];
var _useState13 = useState({
left: 0.2,
right: 0.2
}),
_useState14 = _slicedToArray(_useState13, 2),
THRESHOLD = _useState14[0],
setTHRESHOLD = _useState14[1];
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$leftWidth = _d$props.leftWidth,
leftWidth = _d$props$leftWidth === void 0 ? 0 : _d$props$leftWidth,
_d$props$rightWidth = _d$props.rightWidth,
rightWidth = _d$props$rightWidth === void 0 ? 0 : _d$props$rightWidth,
style = _d$props.style,
className = _d$props.className,
disabled = _d$props.disabled,
_d$props$name = _d$props.name,
name = _d$props$name === void 0 ? '' : _d$props$name,
onClick = _d$props.onClick,
onOpen = _d$props.onOpen,
onClose = _d$props.onClose,
asyncClose = _d$props.asyncClose,
children = _d$props.children,
renderRight = _d$props.renderRight,
renderLeft = _d$props.renderLeft,
others = _objectWithoutProperties(_d$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_);
if (offset2 === 0) {
setTHRESHOLD({
left: 0.2,
right: 0.2
});
}
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, false);
}, [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,
startX: 0,
startY: 0
}));
}, [touchState]);
var touchStart = useCallback(function (event) {
resetTouchStatus();
var touch = event.touches[0];
setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
startX: touch.clientX,
startY: touch.clientY
}));
}, [touchState, resetTouchStatus]);
var touchMove = useCallback(function (event) {
event.preventDefault();
event.stopPropagation();
resetTouchStatus();
var touch = event.touches[0];
var newTouchState = _objectSpread(_objectSpread({}, touchState), {}, {
direction: touchState.direction || getDirection(Math.abs(touch.clientX - (touchState.startX || 0)), Math.abs(touch.clientY - (touchState.startY || 0))),
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;
var THRESHOLD_ = {
left: 0.2,
right: 0.2
};
if (position === 'left') {
THRESHOLD_.left = 0.8;
}
if (position === 'right') {
THRESHOLD_.right = 0.8;
}
setTHRESHOLD(THRESHOLD_);
swipeMove(offset, false);
if (onOpen) {
var e = {
detail: {
position: position,
name: name
}
};
onOpen(e);
}
}, [leftWidth, onOpen, rightWidth, swipeMove, name]);
var swipeLeaveTransition = useCallback(function () {
if (offset > 0) {
if (leftWidth && offset > THRESHOLD.left * leftWidth) {
open('left');
} else {
swipeMove(0);
}
}
if (offset < 0) {
if (rightWidth && -offset > THRESHOLD.right * rightWidth) {
open('right');
} else {
swipeMove(0);
}
}
}, [THRESHOLD.left, THRESHOLD.right, 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;
var touchState = touchMove(event);
if (!touchState.direction || touchState.direction === 'vertical') {
return;
}
ARRAY.filter(function (item) {
return item.key !== instanceKey.key;
}).forEach(function (item) {
return item.close(true);
});
swipeMove(startOffset + touchState.deltaX, true);
}, [disabled, instanceKey.key, startOffset, swipeMove, touchMove]);
var endDrag = useCallback(function () {
if (disabled) return;
swipeLeaveTransition();
nextTick(function () {
resetTouchStatus();
});
}, [disabled, resetTouchStatus, swipeLeaveTransition]);
useImperativeHandle(ref, function () {
return {
close: close,
open: open
};
});
return /*#__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
}) : '']
})
}));
}
var SwipeCell = /*#__PURE__*/forwardRef(Index);
export { SwipeCell };
export default SwipeCell;