useFrame.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.useLayoutState = useLayoutState;
  7. exports.useTimeoutLock = useTimeoutLock;
  8. var _raf = _interopRequireDefault(require("../../_util/raf"));
  9. var _vue = require("vue");
  10. function useLayoutState(defaultState) {
  11. var stateRef = (0, _vue.shallowRef)(defaultState);
  12. var rafId;
  13. var updateBatchRef = (0, _vue.shallowRef)([]);
  14. function setFrameState(updater) {
  15. updateBatchRef.value.push(updater);
  16. _raf.default.cancel(rafId);
  17. rafId = (0, _raf.default)(function () {
  18. var prevBatch = updateBatchRef.value;
  19. // const prevState = stateRef.value;
  20. updateBatchRef.value = [];
  21. prevBatch.forEach(function (batchUpdater) {
  22. stateRef.value = batchUpdater(stateRef.value);
  23. });
  24. });
  25. }
  26. (0, _vue.onBeforeUnmount)(function () {
  27. _raf.default.cancel(rafId);
  28. });
  29. return [stateRef, setFrameState];
  30. }
  31. /** Lock frame, when frame pass reset the lock. */
  32. function useTimeoutLock(defaultState) {
  33. var frameRef = (0, _vue.ref)(defaultState || null);
  34. var timeoutRef = (0, _vue.ref)();
  35. function cleanUp() {
  36. clearTimeout(timeoutRef.value);
  37. }
  38. function setState(newState) {
  39. frameRef.value = newState;
  40. cleanUp();
  41. timeoutRef.value = setTimeout(function () {
  42. frameRef.value = null;
  43. timeoutRef.value = undefined;
  44. }, 100);
  45. }
  46. function getState() {
  47. return frameRef.value;
  48. }
  49. (0, _vue.onBeforeUnmount)(function () {
  50. cleanUp();
  51. });
  52. return [setState, getState];
  53. }