index.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. import { SwipeActionDefaultProps } from './props';
  2. import fmtEvent from '../_util/fmtEvent';
  3. import { compareVersion } from '../_util/compareVersion';
  4. import '../_util/assert-component2';
  5. var setStyleObj1 = function (buttons, inertiaWidth) {
  6. var _a, _b, _c;
  7. var widthPos = buttons.length === 2 ? 0.5 : 0.3333;
  8. return [
  9. { marginLeft: 0 },
  10. {
  11. marginLeft: "".concat(-(((_a = buttons[0]) === null || _a === void 0 ? void 0 : _a.width) + 1 + (inertiaWidth || 0) * widthPos) / 2, "px"),
  12. },
  13. {
  14. marginLeft: "".concat(-(((_b = buttons[0]) === null || _b === void 0 ? void 0 : _b.width) +
  15. ((_c = buttons[1]) === null || _c === void 0 ? void 0 : _c.width) +
  16. 1 +
  17. (inertiaWidth || 0) * 0.6666) / 2, "px"),
  18. },
  19. ];
  20. };
  21. var setStyleObj2 = function (buttons, inertiaWidth) {
  22. var _a, _b, _c, _d;
  23. var length = buttons.length;
  24. if (length === 2) {
  25. return [
  26. { marginRight: 0 },
  27. {
  28. marginRight: "-".concat((((_a = buttons[0]) === null || _a === void 0 ? void 0 : _a.width) + (inertiaWidth || 0) * 0.5) / 2, "px"),
  29. },
  30. ];
  31. }
  32. if (length === 3) {
  33. return [
  34. { marginRight: 0 },
  35. {
  36. marginRight: "-".concat((((_b = buttons[0]) === null || _b === void 0 ? void 0 : _b.width) + (inertiaWidth || 0) * 0.3333) / 2, "px"),
  37. },
  38. {
  39. marginRight: "-".concat((((_c = buttons[0]) === null || _c === void 0 ? void 0 : _c.width) +
  40. ((_d = buttons[1]) === null || _d === void 0 ? void 0 : _d.width) +
  41. (inertiaWidth || 0) * 0.6666) /
  42. 2, "px"),
  43. },
  44. ];
  45. }
  46. return [{ marginRight: 0 }];
  47. };
  48. var myTimeOut = null;
  49. var getDirectionLeft = function (arr) {
  50. if (arr.length < 2) {
  51. arr = [0, arr[0]];
  52. }
  53. return arr[0] + arr[1] <= 0;
  54. };
  55. var SDKVersion = my.SDKVersion;
  56. var isOldVersion = compareVersion(SDKVersion, '2.0.0') < 0;
  57. Component({
  58. props: SwipeActionDefaultProps,
  59. data: {
  60. swipeLeft: true,
  61. swipeX: 0,
  62. moveX: 0,
  63. tapTypeL: '',
  64. tapTypeR: '',
  65. leftWidth: 20,
  66. rightWidth: 20,
  67. maxSwipeL: 0,
  68. maxSwipeR: 0,
  69. inTouch: false,
  70. swipedR: false,
  71. swipedL: false,
  72. changeArr: [0, 0],
  73. myStyle: {},
  74. inertiaWidth: 20,
  75. animation: !isOldVersion,
  76. _leftButtons: [],
  77. _rightButtons: [],
  78. },
  79. didMount: function () {
  80. var _this = this;
  81. var _a = this.props, defaultSwiped = _a.defaultSwiped, elasticity = _a.elasticity;
  82. this.setButtonItemWidth();
  83. this.setData({ inertiaWidth: !isOldVersion && elasticity ? 20 : 0 });
  84. if (defaultSwiped) {
  85. this.initWidth(function (maxSwipe) {
  86. maxSwipe &&
  87. _this.setData({
  88. swipeX: (maxSwipe + 0.01) * (defaultSwiped === 'right' ? -1 : 1),
  89. swipedR: defaultSwiped === 'right',
  90. swipedL: defaultSwiped === 'left',
  91. });
  92. });
  93. }
  94. },
  95. didUpdate: function (prevProp) {
  96. var _a = this.props, swiped = _a.swiped, damping = _a.damping, elasticity = _a.elasticity;
  97. // 设置不同的滑动位置时需要重置
  98. var rs = prevProp.swiped !== swiped && !swiped;
  99. var is = prevProp.elasticity !== elasticity;
  100. var ds = prevProp.damping !== damping;
  101. if (rs || is || ds) {
  102. this.setData({
  103. swipeX: 0,
  104. swipedR: false,
  105. swipedL: false,
  106. tapTypeL: '',
  107. tapTypeR: '',
  108. });
  109. }
  110. if (is) {
  111. this.setData({ inertiaWidth: elasticity ? 20 : 0 });
  112. }
  113. },
  114. methods: {
  115. setWidth: function () {
  116. var _a = this.data, _leftButtons = _a._leftButtons, _rightButtons = _a._rightButtons;
  117. var _rightArr = _rightButtons || [];
  118. var _leftArr = _leftButtons || [];
  119. this.setData({
  120. rightWidth: _rightArr.reduce(function (tolal, cur) {
  121. return tolal + cur.width;
  122. }, 0),
  123. leftWidth: _leftArr.length
  124. ? _leftArr.reduce(function (tolal, cur) {
  125. return tolal + cur.width;
  126. }, 0)
  127. : 0,
  128. });
  129. },
  130. setButtonItemWidth: function () {
  131. var _this = this;
  132. var _a = this.props, leftButtons = _a.leftButtons, rightButtons = _a.rightButtons;
  133. leftButtons.forEach(function (i) {
  134. i.width = i.width || 150;
  135. });
  136. rightButtons.forEach(function (i) {
  137. i.width = i.width || 150;
  138. });
  139. this.setData({ _leftButtons: leftButtons, _rightButtons: rightButtons }, function () {
  140. _this.setWidth();
  141. });
  142. },
  143. initWidth: function (func) {
  144. var _this = this;
  145. var _a = this.props, leftButtons = _a.leftButtons, rightButtons = _a.rightButtons;
  146. // 获取宽度信息,设置滑轨的宽度、初始化滑动位置
  147. // 如果没有获取到该信息则把左滑禁用掉
  148. rightButtons.length > 0 &&
  149. my
  150. .createSelectorQuery()
  151. .select(".ant-swipe-action-movable-right-".concat(this.$id))
  152. .boundingClientRect()
  153. .exec(function (ret) {
  154. if (ret && ret[0] && ret[0].width) {
  155. _this.setData({ maxSwipeR: ret[0].width });
  156. func && func(ret[0].width);
  157. }
  158. });
  159. leftButtons.length > 0 &&
  160. my
  161. .createSelectorQuery()
  162. .select(".ant-swipe-action-movable-left-".concat(this.$id))
  163. .boundingClientRect()
  164. .exec(function (ret) {
  165. if (ret && ret[0] && ret[0].width) {
  166. _this.setData({ maxSwipeL: ret[0].width });
  167. func && func(ret[0].width);
  168. }
  169. });
  170. },
  171. // 向外透出事件
  172. onTouchStart: function () {
  173. var onSwipeStart = this.props.onSwipeStart;
  174. var _a = this.data, swipedR = _a.swipedR, swipedL = _a.swipedL;
  175. this.initWidth();
  176. this.setData({ tapTypeL: '', tapTypeR: '', inTouch: true }); // 清空confirmType = auto 的表现
  177. onSwipeStart({
  178. swiped: !!(swipedR || swipedL),
  179. direction: swipedL ? 'left' : swipedR ? 'right' : '',
  180. }, fmtEvent(this.props));
  181. },
  182. onTouchEnd: function () {
  183. this.setData({ inTouch: false });
  184. },
  185. // 滑动过程中的事件,是内部事件不向外透出,用于控制右侧按钮的位置信息
  186. onChange: function (e) {
  187. var _this = this;
  188. 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;
  189. var x = e.detail.x;
  190. var L = x;
  191. // changeArr用于精准的控制滑动的方向
  192. var newArr = changeArr[1] === L ? [changeArr] : [changeArr[1], L];
  193. this.setData({ moveX: L, changeArr: newArr });
  194. var ridx = this.props.rightButtons.findIndex(function (u) { return u.confirmType === 'move'; });
  195. var lidx = this.props.leftButtons.findIndex(function (u) { return u.confirmType === 'move'; });
  196. if (ridx === -1 && lidx === -1)
  197. return;
  198. var isRight = getDirectionLeft(changeArr);
  199. // 左滑时的滑动确认、收起处理
  200. if (isRight) {
  201. if (L < 0 && Math.abs(L) >= maxSwipeR && inTouch && !swipedR) {
  202. clearTimeout(myTimeOut);
  203. myTimeOut = setTimeout(function () {
  204. var _a = _this.data, changeArr = _a.changeArr, maxSwipeR = _a.maxSwipeR, inTouch = _a.inTouch, swipedR = _a.swipedR, moveX = _a.moveX;
  205. var _left = getDirectionLeft(changeArr) && changeArr[0] >= changeArr[1];
  206. if (inTouch &&
  207. maxSwipeR + inertiaWidth + 2 >= Math.abs(moveX) &&
  208. _left &&
  209. !swipedR) {
  210. _this.onSetCheck(true);
  211. }
  212. }, 100);
  213. }
  214. if (changeArr[0] < changeArr[1] && maxSwipeR > L + 4 && inTouch) {
  215. this.setData({ tapTypeR: '', myStyle: {} });
  216. }
  217. }
  218. else {
  219. if (L > 0 && L + 1 >= maxSwipeL && inTouch && !swipedL) {
  220. clearTimeout(myTimeOut);
  221. myTimeOut = setTimeout(function () {
  222. var _a = _this.data, changeArr = _a.changeArr, maxSwipeL = _a.maxSwipeL, inTouch = _a.inTouch, swipedL = _a.swipedL, moveX = _a.moveX;
  223. var _right = !getDirectionLeft(changeArr) && changeArr[1] >= changeArr[0];
  224. if (inTouch && maxSwipeL <= moveX + 1 && _right && !swipedL) {
  225. _this.onSetCheck(false);
  226. }
  227. }, 100);
  228. }
  229. if (changeArr[0] > changeArr[1] && maxSwipeL > L + 2 && inTouch) {
  230. this.setData({ tapTypeL: '', myStyle: {} });
  231. }
  232. }
  233. },
  234. onSetCheck: function (isRight) {
  235. var _a = this.props, rightButtons = _a.rightButtons, leftButtons = _a.leftButtons;
  236. var _b = this.data, inertiaWidth = _b.inertiaWidth, _leftButtons = _b._leftButtons, _rightButtons = _b._rightButtons;
  237. var arr = isRight ? rightButtons : leftButtons;
  238. var idx = arr.findIndex(function (u) { return u.confirmType === 'move'; });
  239. if (idx === -1)
  240. return;
  241. my.vibrateShort({ success: function () { } });
  242. var styArr = isRight
  243. ? setStyleObj1(_rightButtons, inertiaWidth)
  244. : setStyleObj2(_leftButtons, inertiaWidth);
  245. var sty = styArr[idx];
  246. this.setData({ myStyle: sty });
  247. isRight
  248. ? this.setData({ tapTypeR: 'R-' + idx })
  249. : this.setData({ tapTypeL: 'L-' + idx });
  250. },
  251. // 意外中断了滑动,则立即开始结算滑动动作
  252. onTouchCancel: function (e) {
  253. this.onChangeEnd(e);
  254. },
  255. onChangeEnd: function (e) {
  256. var x = e.detail.x;
  257. var changeArr = this.data.changeArr;
  258. // 如果是停留在初始态返回
  259. if (x === 0)
  260. return;
  261. // 判断是否是左滑
  262. var isRight = getDirectionLeft(changeArr);
  263. this.setData({ swipeLeft: isRight });
  264. isRight ? this.onSetSwipeRight(x) : this.onSetSwipeLeft(x);
  265. },
  266. onSetSwipeRight: function (x, needBack) {
  267. var _a = this.data, swipedR = _a.swipedR, inTouch = _a.inTouch, tapTypeR = _a.tapTypeR, changeArr = _a.changeArr;
  268. var onButtonTap = this.props.onButtonTap;
  269. var isRight = Math.abs(changeArr[1]) > Math.abs(changeArr[0]);
  270. if (!swipedR && Math.abs(x) < 10) {
  271. isRight = false;
  272. }
  273. needBack && (isRight = false);
  274. !isRight && this.setData({ tapTypeR: '', myStyle: {} });
  275. if (inTouch && !!tapTypeR) {
  276. this.setData({ tapTypeR: '', myStyle: {} });
  277. onButtonTap({ direction: 'right', btnIdx: parseInt(tapTypeR.replace('R-', '')) }, fmtEvent(this.props));
  278. this.onSwipeRight(false);
  279. return;
  280. }
  281. this.setData({ changeArr: [0, 0] });
  282. this.onSwipeRight(isRight);
  283. },
  284. onSetSwipeLeft: function (x, needBack) {
  285. var _a = this.data, swipedL = _a.swipedL, inTouch = _a.inTouch, tapTypeL = _a.tapTypeL, changeArr = _a.changeArr;
  286. var onButtonTap = this.props.onButtonTap;
  287. // true:初始是往右滑,false: 右滑收起
  288. var isRight = changeArr[1] >= changeArr[0];
  289. if (!swipedL && Math.abs(x) < 10) {
  290. isRight = false;
  291. }
  292. needBack && (isRight = false);
  293. // 清空二次确认的状态
  294. !isRight && this.setData({ tapTypeL: '', myStyle: {} });
  295. // 处理滑动-触发事件
  296. if (inTouch && !!tapTypeL) {
  297. this.setData({ tapTypeL: '', myStyle: {} });
  298. onButtonTap({ direction: 'left', btnIdx: parseInt(tapTypeL.replace('L-', '')) }, fmtEvent(this.props));
  299. this.onSwipeLeft(false);
  300. return;
  301. }
  302. // 清空滑动方向
  303. this.setData({ changeArr: [0, 0] });
  304. this.onSwipeLeft(isRight);
  305. },
  306. // 结算
  307. onSwipeLeft: function (isRight) {
  308. var _this = this;
  309. var onSwipeEnd = this.props.onSwipeEnd;
  310. var _a = this.data, maxSwipeL = _a.maxSwipeL, inertiaWidth = _a.inertiaWidth;
  311. // 为了处理到重置状态的效果
  312. var maxX = maxSwipeL + 0.01 + inertiaWidth;
  313. this.setData({
  314. swipeX: isRight ? maxX : -0.01,
  315. }, function () {
  316. var flag = _this.data.swipeX === -0.01;
  317. setTimeout(function () {
  318. _this.setData({
  319. swipeX: flag ? 0 : maxSwipeL + 0.01,
  320. swipedL: !flag,
  321. }, function () {
  322. onSwipeEnd({ direction: 'left', swiped: !!isRight }, fmtEvent(_this.props));
  323. });
  324. }, inertiaWidth > 0 ? 180 : 0);
  325. });
  326. },
  327. onSwipeRight: function (isRight) {
  328. var _this = this;
  329. var _a = this.data, maxSwipeR = _a.maxSwipeR, inertiaWidth = _a.inertiaWidth;
  330. var onSwipeEnd = this.props.onSwipeEnd;
  331. // 处理x的位置,两次setData X是因为x如果相同位置不会变,刚好也把弹性在这里处理了
  332. // 为了处理到重置状态的效果
  333. var maxX = -(maxSwipeR + 0.01 + inertiaWidth);
  334. this.setData({
  335. swipeX: isRight ? maxX : -0.01,
  336. }, function () {
  337. var flag = _this.data.swipeX === -0.01;
  338. setTimeout(function () {
  339. _this.setData({
  340. swipeX: flag ? 0 : -(maxSwipeR + 0.01),
  341. swipedR: !flag,
  342. }, function () {
  343. onSwipeEnd({ direction: 'right', swiped: !!isRight }, fmtEvent(_this.props));
  344. });
  345. }, inertiaWidth > 0 ? 180 : 0);
  346. });
  347. },
  348. // 处理右侧点击事件
  349. onItemTap: function (e) {
  350. var _a = this.data, swipeLeft = _a.swipeLeft, tapTypeL = _a.tapTypeL, tapTypeR = _a.tapTypeR, _leftButtons = _a._leftButtons, _rightButtons = _a._rightButtons;
  351. var onButtonTap = this.props.onButtonTap;
  352. if (!onButtonTap)
  353. return;
  354. var _b = e.target.dataset.item, itemL = _b.itemL, idx = _b.idx, item = _b.item;
  355. var confirmType = (swipeLeft ? item : itemL).confirmType;
  356. if (tapTypeL === 'L-' + idx) {
  357. this.onSetSwipeLeft(0, true);
  358. this.setData({ tapTypeL: '', myStyle: {} });
  359. onButtonTap({ direction: 'left', btnIdx: idx }, fmtEvent(this.props));
  360. return;
  361. }
  362. if (tapTypeR === 'R-' + idx) {
  363. this.onSetSwipeRight(0, true);
  364. this.setData({ tapTypeR: '', myStyle: {} });
  365. onButtonTap({ direction: 'right', btnIdx: idx }, fmtEvent(this.props));
  366. return;
  367. }
  368. // auto 是展开按钮二次确认的效果
  369. if (confirmType === 'tap' || confirmType === 'move') {
  370. var styArr = swipeLeft
  371. ? setStyleObj1(_rightButtons)
  372. : setStyleObj2(_leftButtons);
  373. var sty = styArr[idx];
  374. this.setData({ myStyle: sty });
  375. !swipeLeft
  376. ? this.setData({ tapTypeL: 'L-' + idx })
  377. : this.setData({ tapTypeR: 'R-' + idx });
  378. }
  379. else {
  380. !swipeLeft
  381. ? this.onSetSwipeLeft(0, true)
  382. : this.onSetSwipeRight(0, true);
  383. onButtonTap({ direction: !swipeLeft ? 'left' : 'right', btnIdx: idx }, fmtEvent(this.props));
  384. }
  385. },
  386. },
  387. });