scrollLocker.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  2. import _createClass from "@babel/runtime/helpers/esm/createClass";
  3. import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
  4. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  5. import getScrollBarSize from "../getScrollBarSize";
  6. import setStyle from "../setStyle";
  7. var uuid = 0;
  8. var locks = [];
  9. var scrollingEffectClassName = 'ant-scrolling-effect';
  10. var scrollingEffectClassNameReg = new RegExp("".concat(scrollingEffectClassName), 'g');
  11. // https://github.com/ant-design/ant-design/issues/19340
  12. // https://github.com/ant-design/ant-design/issues/19332
  13. var cacheStyle = new Map();
  14. var ScrollLocker = /*#__PURE__*/_createClass(function ScrollLocker(_options) {
  15. var _this = this;
  16. _classCallCheck(this, ScrollLocker);
  17. _defineProperty(this, "lockTarget", void 0);
  18. _defineProperty(this, "options", void 0);
  19. _defineProperty(this, "getContainer", function () {
  20. var _this$options;
  21. return (_this$options = _this.options) === null || _this$options === void 0 ? void 0 : _this$options.container;
  22. });
  23. // if options change...
  24. _defineProperty(this, "reLock", function (options) {
  25. var findLock = locks.find(function (_ref) {
  26. var target = _ref.target;
  27. return target === _this.lockTarget;
  28. });
  29. if (findLock) {
  30. _this.unLock();
  31. }
  32. _this.options = options;
  33. if (findLock) {
  34. findLock.options = options;
  35. _this.lock();
  36. }
  37. });
  38. _defineProperty(this, "lock", function () {
  39. var _this$options3;
  40. // If lockTarget exist return
  41. if (locks.some(function (_ref2) {
  42. var target = _ref2.target;
  43. return target === _this.lockTarget;
  44. })) {
  45. return;
  46. }
  47. // If same container effect, return
  48. if (locks.some(function (_ref3) {
  49. var _this$options2;
  50. var options = _ref3.options;
  51. return (options === null || options === void 0 ? void 0 : options.container) === ((_this$options2 = _this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.container);
  52. })) {
  53. locks = [].concat(_toConsumableArray(locks), [{
  54. target: _this.lockTarget,
  55. options: _this.options
  56. }]);
  57. return;
  58. }
  59. var scrollBarSize = 0;
  60. var container = ((_this$options3 = _this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.container) || document.body;
  61. if (container === document.body && window.innerWidth - document.documentElement.clientWidth > 0 || container.scrollHeight > container.clientHeight) {
  62. if (getComputedStyle(container).overflow !== 'hidden') {
  63. scrollBarSize = getScrollBarSize();
  64. }
  65. }
  66. var containerClassName = container.className;
  67. if (locks.filter(function (_ref4) {
  68. var _this$options4;
  69. var options = _ref4.options;
  70. return (options === null || options === void 0 ? void 0 : options.container) === ((_this$options4 = _this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.container);
  71. }).length === 0) {
  72. cacheStyle.set(container, setStyle({
  73. width: scrollBarSize !== 0 ? "calc(100% - ".concat(scrollBarSize, "px)") : undefined,
  74. overflow: 'hidden',
  75. overflowX: 'hidden',
  76. overflowY: 'hidden'
  77. }, {
  78. element: container
  79. }));
  80. }
  81. // https://github.com/ant-design/ant-design/issues/19729
  82. if (!scrollingEffectClassNameReg.test(containerClassName)) {
  83. var addClassName = "".concat(containerClassName, " ").concat(scrollingEffectClassName);
  84. container.className = addClassName.trim();
  85. }
  86. locks = [].concat(_toConsumableArray(locks), [{
  87. target: _this.lockTarget,
  88. options: _this.options
  89. }]);
  90. });
  91. _defineProperty(this, "unLock", function () {
  92. var _this$options5;
  93. var findLock = locks.find(function (_ref5) {
  94. var target = _ref5.target;
  95. return target === _this.lockTarget;
  96. });
  97. locks = locks.filter(function (_ref6) {
  98. var target = _ref6.target;
  99. return target !== _this.lockTarget;
  100. });
  101. if (!findLock || locks.some(function (_ref7) {
  102. var _findLock$options;
  103. var options = _ref7.options;
  104. return (options === null || options === void 0 ? void 0 : options.container) === ((_findLock$options = findLock.options) === null || _findLock$options === void 0 ? void 0 : _findLock$options.container);
  105. })) {
  106. return;
  107. }
  108. // Remove Effect
  109. var container = ((_this$options5 = _this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.container) || document.body;
  110. var containerClassName = container.className;
  111. if (!scrollingEffectClassNameReg.test(containerClassName)) return;
  112. setStyle(cacheStyle.get(container), {
  113. element: container
  114. });
  115. cacheStyle.delete(container);
  116. container.className = container.className.replace(scrollingEffectClassNameReg, '').trim();
  117. });
  118. // eslint-disable-next-line no-plusplus
  119. this.lockTarget = uuid++;
  120. this.options = _options;
  121. });
  122. export { ScrollLocker as default };