responsiveObserve.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = useResponsiveObserver;
  7. exports.responsiveArray = void 0;
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _vue = require("vue");
  10. var _internal = require("../theme/internal");
  11. const responsiveArray = exports.responsiveArray = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
  12. const getResponsiveMap = token => ({
  13. xs: `(max-width: ${token.screenXSMax}px)`,
  14. sm: `(min-width: ${token.screenSM}px)`,
  15. md: `(min-width: ${token.screenMD}px)`,
  16. lg: `(min-width: ${token.screenLG}px)`,
  17. xl: `(min-width: ${token.screenXL}px)`,
  18. xxl: `(min-width: ${token.screenXXL}px)`,
  19. xxxl: `{min-width: ${token.screenXXXL}px}`
  20. });
  21. function useResponsiveObserver() {
  22. const [, token] = (0, _internal.useToken)();
  23. return (0, _vue.computed)(() => {
  24. const responsiveMap = getResponsiveMap(token.value);
  25. const subscribers = new Map();
  26. let subUid = -1;
  27. let screens = {};
  28. return {
  29. matchHandlers: {},
  30. dispatch(pointMap) {
  31. screens = pointMap;
  32. subscribers.forEach(func => func(screens));
  33. return subscribers.size >= 1;
  34. },
  35. subscribe(func) {
  36. if (!subscribers.size) this.register();
  37. subUid += 1;
  38. subscribers.set(subUid, func);
  39. func(screens);
  40. return subUid;
  41. },
  42. unsubscribe(paramToken) {
  43. subscribers.delete(paramToken);
  44. if (!subscribers.size) this.unregister();
  45. },
  46. unregister() {
  47. Object.keys(responsiveMap).forEach(screen => {
  48. const matchMediaQuery = responsiveMap[screen];
  49. const handler = this.matchHandlers[matchMediaQuery];
  50. handler === null || handler === void 0 ? void 0 : handler.mql.removeListener(handler === null || handler === void 0 ? void 0 : handler.listener);
  51. });
  52. subscribers.clear();
  53. },
  54. register() {
  55. Object.keys(responsiveMap).forEach(screen => {
  56. const matchMediaQuery = responsiveMap[screen];
  57. const listener = _ref => {
  58. let {
  59. matches
  60. } = _ref;
  61. this.dispatch((0, _extends2.default)((0, _extends2.default)({}, screens), {
  62. [screen]: matches
  63. }));
  64. };
  65. const mql = window.matchMedia(matchMediaQuery);
  66. mql.addListener(listener);
  67. this.matchHandlers[matchMediaQuery] = {
  68. mql,
  69. listener
  70. };
  71. listener(mql);
  72. });
  73. },
  74. responsiveMap
  75. };
  76. });
  77. }