123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429 |
- import { __assign } from "tslib";
- import { SwipeActionDefaultProps } from './props';
- import fmtEvent from '../_util/fmtEvent';
- import { compareVersion } from '../_util/compareVersion';
- import '../_util/assert-component2';
- import { platform } from '../_util/platform';
- import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
- import { transformOptions } from './wechat';
- var setStyleObj1 = function (buttons, inertiaWidth) {
- var _a, _b, _c;
- var widthPos = buttons.length === 2 ? 0.5 : 0.3333;
- return [
- { marginLeft: 0 },
- {
- marginLeft: "".concat(-(((_a = buttons[0]) === null || _a === void 0 ? void 0 : _a.width) + 1 + (inertiaWidth || 0) * widthPos) / 2, "px"),
- },
- {
- marginLeft: "".concat(-(((_b = buttons[0]) === null || _b === void 0 ? void 0 : _b.width) +
- ((_c = buttons[1]) === null || _c === void 0 ? void 0 : _c.width) +
- 1 +
- (inertiaWidth || 0) * 0.6666) / 2, "px"),
- },
- ];
- };
- var setStyleObj2 = function (buttons, inertiaWidth) {
- var _a, _b, _c, _d;
- var length = buttons.length;
- if (length === 2) {
- return [
- { marginRight: 0 },
- {
- marginRight: "-".concat((((_a = buttons[0]) === null || _a === void 0 ? void 0 : _a.width) + (inertiaWidth || 0) * 0.5) / 2, "px"),
- },
- ];
- }
- if (length === 3) {
- return [
- { marginRight: 0 },
- {
- marginRight: "-".concat((((_b = buttons[0]) === null || _b === void 0 ? void 0 : _b.width) + (inertiaWidth || 0) * 0.3333) / 2, "px"),
- },
- {
- marginRight: "-".concat((((_c = buttons[0]) === null || _c === void 0 ? void 0 : _c.width) +
- ((_d = buttons[1]) === null || _d === void 0 ? void 0 : _d.width) +
- (inertiaWidth || 0) * 0.6666) /
- 2, "px"),
- },
- ];
- }
- return [{ marginRight: 0 }];
- };
- var myTimeOut = null;
- var getDirectionLeft = function (arr) {
- if (arr.length < 2) {
- arr = [0, arr[0]];
- }
- return arr[0] + arr[1] <= 0;
- };
- var isOldVersion = getIsOldVersion();
- function getIsOldVersion() {
- if (typeof my === 'undefined') {
- return false;
- }
- var SDKVersion = my.SDKVersion;
- return compareVersion(SDKVersion, '2.0.0') < 0;
- }
- function getInitReady() {
- if (platform() === 'wechat') {
- return false;
- }
- if (isOldVersion) {
- return false;
- }
- return true;
- }
- Component(transformOptions({
- props: SwipeActionDefaultProps,
- didMount: function () {
- var _this = this;
- var _a = this.getProps(), defaultSwiped = _a.defaultSwiped, elasticity = _a.elasticity;
- this.setButtonItemWidth();
- this.setData({ inertiaWidth: !isOldVersion && elasticity ? 20 : 0 });
- if (defaultSwiped) {
- this.initWidth(function (maxSwipe) {
- maxSwipe &&
- _this.setData({
- swipeX: (maxSwipe + 0.01) * (defaultSwiped === 'right' ? -1 : 1),
- swipedR: defaultSwiped === 'right',
- swipedL: defaultSwiped === 'left',
- });
- });
- }
- },
- didUpdate: function (prevProp) {
- var _a = this.getProps(), swiped = _a.swiped, damping = _a.damping, elasticity = _a.elasticity;
- // 设置不同的滑动位置时需要重置
- var rs = prevProp.swiped !== swiped && !swiped;
- var is = prevProp.elasticity !== elasticity;
- var ds = prevProp.damping !== damping;
- if (rs || is || ds) {
- this.setData({
- swipeX: 0,
- swipedR: false,
- swipedL: false,
- tapTypeL: '',
- tapTypeR: '',
- });
- }
- if (is) {
- this.setData({ inertiaWidth: elasticity ? 20 : 0 });
- }
- },
- data: {
- // 在微信小程序与支付宝小程序基础库 1.0
- // 组件初始化时的 margin-left 决定了后续可移动的距离,所以需要等组件初始化以后再加载
- ready: getInitReady(),
- swipeLeft: true,
- swipeX: 0,
- moveX: 0,
- tapTypeL: '',
- tapTypeR: '',
- leftWidth: 20,
- rightWidth: 20,
- maxSwipeL: 0,
- maxSwipeR: 0,
- inTouch: false,
- swipedR: false,
- swipedL: false,
- changeArr: [0, 0],
- myStyle: {},
- inertiaWidth: 20,
- animation: !isOldVersion,
- _leftButtons: [],
- _rightButtons: [],
- },
- methods: {
- setWidth: function () {
- var _a = this.data, _leftButtons = _a._leftButtons, _rightButtons = _a._rightButtons;
- var _rightArr = _rightButtons || [];
- var _leftArr = _leftButtons || [];
- this.setData({
- ready: true,
- rightWidth: _rightArr.reduce(function (tolal, cur) {
- return tolal + cur.width;
- }, 0),
- leftWidth: _leftArr.length
- ? _leftArr.reduce(function (tolal, cur) {
- return tolal + cur.width;
- }, 0)
- : 0,
- });
- },
- setButtonItemWidth: function () {
- var _this = this;
- var _a = this.getProps(), leftButtons = _a.leftButtons, rightButtons = _a.rightButtons;
- leftButtons.forEach(function (i) {
- i.width = i.width || 150;
- });
- rightButtons.forEach(function (i) {
- i.width = i.width || 150;
- });
- this.setData({ _leftButtons: leftButtons, _rightButtons: rightButtons }, function () {
- _this.setWidth();
- });
- },
- getProps: function () {
- var _this = this;
- if (platform() === 'wechat') {
- return __assign(__assign({}, this.data), { onSwipeStart: function (v) {
- _this.triggerEvent('swipestart', v);
- }, onSwipeEnd: function (v) {
- _this.triggerEvent('swipeend', v);
- }, onButtonTap: function (v) {
- _this.triggerEvent('buttontap', v);
- } });
- }
- return this.props;
- },
- initWidth: function (func) {
- var _this = this;
- var _a = this.getProps(), leftButtons = _a.leftButtons, rightButtons = _a.rightButtons;
- // 获取宽度信息,设置滑轨的宽度、初始化滑动位置
- // 如果没有获取到该信息则把左滑禁用掉
- rightButtons.length > 0 &&
- this.boundingClientRect(".ant-swipe-action-movable-right".concat(this.$id ? '-' + this.$id : '')).then(function (ret) {
- if (ret && ret.width) {
- _this.setData({ maxSwipeR: ret.width });
- func && func(ret.width);
- }
- });
- leftButtons.length > 0 &&
- this.boundingClientRect(".ant-swipe-action-movable-left".concat(this.$id ? '-' + this.$id : '')).then(function (ret) {
- if (ret && ret.width) {
- _this.setData({ maxSwipeL: ret.width });
- func && func(ret.width);
- }
- });
- },
- boundingClientRect: function (id) {
- if (typeof my === 'undefined') {
- return getInstanceBoundingClientRect(this, id);
- }
- return getInstanceBoundingClientRect(my, id);
- },
- // 向外透出事件
- onTouchStart: function () {
- var onSwipeStart = this.getProps().onSwipeStart;
- var _a = this.data, swipedR = _a.swipedR, swipedL = _a.swipedL;
- this.initWidth();
- this.setData({ tapTypeL: '', tapTypeR: '', inTouch: true }); // 清空confirmType = auto 的表现
- onSwipeStart({
- swiped: !!(swipedR || swipedL),
- direction: swipedL ? 'left' : swipedR ? 'right' : '',
- }, fmtEvent(this.getProps()));
- },
- onTouchEnd: function (e) {
- // 因为微信小程序没有 onChangeEnd 事件
- // 所以用 onTouchEnd 模拟 onChangeEnd
- if (platform() === 'wechat') {
- this.onChangeEnd(e);
- }
- this.setData({ inTouch: false });
- },
- // 滑动过程中的事件,是内部事件不向外透出,用于控制右侧按钮的位置信息
- onChange: function (e) {
- var _this = this;
- var _a = this.data, changeArr = _a.changeArr, maxSwipeR = _a.maxSwipeR, maxSwipeL = _a.maxSwipeL, inTouch = _a.inTouch, swipedR = _a.swipedR, swipedL = _a.swipedL, inertiaWidth = _a.inertiaWidth;
- var x = e.detail.x;
- var L = x;
- // changeArr用于精准的控制滑动的方向
- var newArr = changeArr[1] === L ? [changeArr] : [changeArr[1], L];
- this.setData({ moveX: L, changeArr: newArr });
- var ridx = this.getProps().rightButtons.findIndex(function (u) { return u.confirmType === 'move'; });
- var lidx = this.getProps().leftButtons.findIndex(function (u) { return u.confirmType === 'move'; });
- if (ridx === -1 && lidx === -1)
- return;
- var isRight = getDirectionLeft(changeArr);
- // 左滑时的滑动确认、收起处理
- if (isRight) {
- if (L < 0 && Math.abs(L) >= maxSwipeR && inTouch && !swipedR) {
- clearTimeout(myTimeOut);
- myTimeOut = setTimeout(function () {
- var _a = _this.data, changeArr = _a.changeArr, maxSwipeR = _a.maxSwipeR, inTouch = _a.inTouch, swipedR = _a.swipedR, moveX = _a.moveX;
- var _left = getDirectionLeft(changeArr) && changeArr[0] >= changeArr[1];
- if (inTouch &&
- maxSwipeR + inertiaWidth + 2 >= Math.abs(moveX) &&
- _left &&
- !swipedR) {
- _this.onSetCheck(true);
- }
- }, 100);
- }
- if (changeArr[0] < changeArr[1] && maxSwipeR > L + 4 && inTouch) {
- this.setData({ tapTypeR: '', myStyle: {} });
- }
- }
- else {
- if (L > 0 && L + 1 >= maxSwipeL && inTouch && !swipedL) {
- clearTimeout(myTimeOut);
- myTimeOut = setTimeout(function () {
- var _a = _this.data, changeArr = _a.changeArr, maxSwipeL = _a.maxSwipeL, inTouch = _a.inTouch, swipedL = _a.swipedL, moveX = _a.moveX;
- var _right = !getDirectionLeft(changeArr) && changeArr[1] >= changeArr[0];
- if (inTouch && maxSwipeL <= moveX + 1 && _right && !swipedL) {
- _this.onSetCheck(false);
- }
- }, 100);
- }
- if (changeArr[0] > changeArr[1] && maxSwipeL > L + 2 && inTouch) {
- this.setData({ tapTypeL: '', myStyle: {} });
- }
- }
- },
- onSetCheck: function (isRight) {
- var _a = this.getProps(), rightButtons = _a.rightButtons, leftButtons = _a.leftButtons;
- var _b = this.data, inertiaWidth = _b.inertiaWidth, _leftButtons = _b._leftButtons, _rightButtons = _b._rightButtons;
- var arr = isRight ? rightButtons : leftButtons;
- var idx = arr.findIndex(function (u) { return u.confirmType === 'move'; });
- if (idx === -1)
- return;
- typeof my !== 'undefined' && my.vibrateShort({ success: function () { } });
- var styArr = isRight
- ? setStyleObj1(_rightButtons, inertiaWidth)
- : setStyleObj2(_leftButtons, inertiaWidth);
- var sty = styArr[idx];
- this.setData({ myStyle: sty });
- isRight
- ? this.setData({ tapTypeR: 'R-' + idx })
- : this.setData({ tapTypeL: 'L-' + idx });
- },
- // 意外中断了滑动,则立即开始结算滑动动作
- onTouchCancel: function (e) {
- this.onChangeEnd(e);
- },
- onChangeEnd: function (e) {
- var x = e.detail.x;
- var changeArr = this.data.changeArr;
- // 如果是停留在初始态返回
- if (x === 0)
- return;
- // 判断是否是左滑
- var isRight = getDirectionLeft(changeArr);
- this.setData({ swipeLeft: isRight });
- isRight ? this.onSetSwipeRight(x) : this.onSetSwipeLeft(x);
- },
- onSetSwipeRight: function (x, needBack) {
- var _a = this.data, swipedR = _a.swipedR, inTouch = _a.inTouch, tapTypeR = _a.tapTypeR, changeArr = _a.changeArr;
- var onButtonTap = this.getProps().onButtonTap;
- var isRight = Math.abs(changeArr[1]) > Math.abs(changeArr[0]);
- if (!swipedR && Math.abs(x) < 10) {
- isRight = false;
- }
- needBack && (isRight = false);
- !isRight && this.setData({ tapTypeR: '', myStyle: {} });
- if (inTouch && !!tapTypeR) {
- this.setData({ tapTypeR: '', myStyle: {} });
- onButtonTap({
- direction: 'right',
- btnIdx: parseInt(tapTypeR.replace('R-', '')),
- }, fmtEvent(this.getProps()));
- this.onSwipeRight(false);
- return;
- }
- this.setData({ changeArr: [0, 0] });
- this.onSwipeRight(isRight);
- },
- onSetSwipeLeft: function (x, needBack) {
- var _a = this.data, swipedL = _a.swipedL, inTouch = _a.inTouch, tapTypeL = _a.tapTypeL, changeArr = _a.changeArr;
- var onButtonTap = this.getProps().onButtonTap;
- // true:初始是往右滑,false: 右滑收起
- var isRight = changeArr[1] >= changeArr[0];
- if (!swipedL && Math.abs(x) < 10) {
- isRight = false;
- }
- needBack && (isRight = false);
- // 清空二次确认的状态
- !isRight && this.setData({ tapTypeL: '', myStyle: {} });
- // 处理滑动-触发事件
- if (inTouch && !!tapTypeL) {
- this.setData({ tapTypeL: '', myStyle: {} });
- onButtonTap({ direction: 'left', btnIdx: parseInt(tapTypeL.replace('L-', '')) }, fmtEvent(this.getProps()));
- this.onSwipeLeft(false);
- return;
- }
- // 清空滑动方向
- this.setData({ changeArr: [0, 0] });
- this.onSwipeLeft(isRight);
- },
- // 结算
- onSwipeLeft: function (isRight) {
- var _this = this;
- var onSwipeEnd = this.getProps().onSwipeEnd;
- var _a = this.data, maxSwipeL = _a.maxSwipeL, inertiaWidth = _a.inertiaWidth;
- // 为了处理到重置状态的效果
- var maxX = maxSwipeL + 0.01 + inertiaWidth;
- this.setData({
- swipeX: isRight ? maxX : -0.01,
- }, function () {
- var flag = _this.data.swipeX === -0.01;
- setTimeout(function () {
- _this.setData({
- swipeX: flag ? 0 : maxSwipeL + 0.01,
- swipedL: !flag,
- }, function () {
- onSwipeEnd({ direction: 'left', swiped: !!isRight }, fmtEvent(_this.getProps()));
- });
- }, inertiaWidth > 0 ? 180 : 0);
- });
- },
- onSwipeRight: function (isRight) {
- var _this = this;
- var _a = this.data, maxSwipeR = _a.maxSwipeR, inertiaWidth = _a.inertiaWidth;
- var onSwipeEnd = this.getProps().onSwipeEnd;
- // 处理x的位置,两次setData X是因为x如果相同位置不会变,刚好也把弹性在这里处理了
- // 为了处理到重置状态的效果
- var maxX = -(maxSwipeR + 0.01 + inertiaWidth);
- this.setData({
- swipeX: isRight ? maxX : -0.01,
- }, function () {
- var flag = _this.data.swipeX === -0.01;
- setTimeout(function () {
- _this.setData({
- swipeX: flag ? 0 : -(maxSwipeR + 0.01),
- swipedR: !flag,
- }, function () {
- onSwipeEnd({ direction: 'right', swiped: !!isRight }, fmtEvent(_this.getProps()));
- });
- }, inertiaWidth > 0 ? 180 : 0);
- });
- },
- // 处理右侧点击事件
- onItemTap: function (e) {
- var _a = this.data, swipeLeft = _a.swipeLeft, tapTypeL = _a.tapTypeL, tapTypeR = _a.tapTypeR, _leftButtons = _a._leftButtons, _rightButtons = _a._rightButtons;
- var onButtonTap = this.getProps().onButtonTap;
- if (!onButtonTap)
- return;
- var _b = e.currentTarget.dataset.item, itemL = _b.itemL, idx = _b.idx, item = _b.item;
- var confirmType = (swipeLeft ? item : itemL).confirmType;
- if (tapTypeL === 'L-' + idx) {
- this.onSetSwipeLeft(0, true);
- this.setData({ tapTypeL: '', myStyle: {} });
- onButtonTap({ direction: 'left', btnIdx: idx }, fmtEvent(this.getProps()));
- return;
- }
- if (tapTypeR === 'R-' + idx) {
- this.onSetSwipeRight(0, true);
- this.setData({ tapTypeR: '', myStyle: {} });
- onButtonTap({ direction: 'right', btnIdx: idx }, fmtEvent(this.getProps()));
- return;
- }
- // auto 是展开按钮二次确认的效果
- if (confirmType === 'tap' || confirmType === 'move') {
- var styArr = swipeLeft
- ? setStyleObj1(_rightButtons)
- : setStyleObj2(_leftButtons);
- var sty = styArr[idx];
- this.setData({ myStyle: sty });
- !swipeLeft
- ? this.setData({ tapTypeL: 'L-' + idx })
- : this.setData({ tapTypeR: 'R-' + idx });
- }
- else {
- !swipeLeft
- ? this.onSetSwipeLeft(0, true)
- : this.onSetSwipeRight(0, true);
- onButtonTap({ direction: !swipeLeft ? 'left' : 'right', btnIdx: idx }, fmtEvent(this.getProps()));
- }
- },
- },
- }));
|