useVisibleStatus.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
  2. import _regeneratorRuntime from "@babel/runtime/regenerator";
  3. import { onBeforeUnmount, ref, watch, onMounted } from 'vue';
  4. import raf from '../../_util/raf';
  5. var StatusQueue = ['measure', 'align', null, 'motion'];
  6. export default (function (visible, doMeasure) {
  7. var status = ref(null);
  8. var rafRef = ref();
  9. var destroyRef = ref(false);
  10. function setStatus(nextStatus) {
  11. if (!destroyRef.value) {
  12. status.value = nextStatus;
  13. }
  14. }
  15. function cancelRaf() {
  16. raf.cancel(rafRef.value);
  17. }
  18. function goNextStatus(callback) {
  19. cancelRaf();
  20. rafRef.value = raf(function () {
  21. // Only align should be manually trigger
  22. var newStatus = status.value;
  23. switch (status.value) {
  24. case 'align':
  25. newStatus = 'motion';
  26. break;
  27. case 'motion':
  28. newStatus = 'stable';
  29. break;
  30. default:
  31. }
  32. setStatus(newStatus);
  33. callback === null || callback === void 0 ? void 0 : callback();
  34. });
  35. }
  36. watch(visible, function () {
  37. setStatus('measure');
  38. }, {
  39. immediate: true,
  40. flush: 'post'
  41. });
  42. onMounted(function () {
  43. // Go next status
  44. watch(status, function () {
  45. switch (status.value) {
  46. case 'measure':
  47. doMeasure();
  48. break;
  49. default:
  50. }
  51. if (status.value) {
  52. rafRef.value = raf( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
  53. var index, nextStatus;
  54. return _regeneratorRuntime.wrap(function _callee$(_context) {
  55. while (1) {
  56. switch (_context.prev = _context.next) {
  57. case 0:
  58. index = StatusQueue.indexOf(status.value);
  59. nextStatus = StatusQueue[index + 1];
  60. if (nextStatus && index !== -1) {
  61. setStatus(nextStatus);
  62. }
  63. case 3:
  64. case "end":
  65. return _context.stop();
  66. }
  67. }
  68. }, _callee);
  69. })));
  70. }
  71. }, {
  72. immediate: true,
  73. flush: 'post'
  74. });
  75. });
  76. onBeforeUnmount(function () {
  77. destroyRef.value = true;
  78. cancelRaf();
  79. });
  80. return [status, goNextStatus];
  81. });