useLayoutState.js 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637
  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. var _vue = require("vue");
  8. var _raf = _interopRequireDefault(require("../raf"));
  9. /**
  10. * Execute code before next frame but async
  11. */
  12. function useLayoutState(defaultState) {
  13. const stateRef = (0, _vue.shallowRef)(defaultState);
  14. let tempState = stateRef.value;
  15. let updateBatchRef = [];
  16. const rafRef = (0, _vue.shallowRef)();
  17. function setFrameState(updater) {
  18. _raf.default.cancel(rafRef.value);
  19. updateBatchRef.push(updater);
  20. rafRef.value = (0, _raf.default)(() => {
  21. const prevBatch = updateBatchRef;
  22. // const prevState = stateRef.value;
  23. updateBatchRef = [];
  24. prevBatch.forEach(batchUpdater => {
  25. tempState = batchUpdater(tempState);
  26. });
  27. // if (tempState !== stateRef.value) {
  28. stateRef.value = tempState;
  29. // }
  30. });
  31. }
  32. (0, _vue.onBeforeUnmount)(() => {
  33. _raf.default.cancel(rafRef.value);
  34. });
  35. return [stateRef, setFrameState];
  36. }