index.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import { __awaiter, __generator } from "tslib";
  2. import { useEffect, useEvent, usePageShow, useState, } from 'functional-mini/component';
  3. import '../_util/assert-component2';
  4. import { mountComponent } from '../_util/component';
  5. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  6. import { useEvent as useStableCallback } from '../_util/hooks/useEvent';
  7. import { useInstanceBoundingClientRect } from '../_util/hooks/useInstanceBoundingClientRect';
  8. import { NoticeBarFunctionalProps } from './props';
  9. var NoticeBar = function (props) {
  10. var _a = useState(''), marqueeStyle = _a[0], setMarqueeStyle = _a[1];
  11. var _b = useState(true), show = _b[0], setShow = _b[1];
  12. var triggerEventOnly = useComponentEvent(props).triggerEventOnly;
  13. var startMarquee = useStableCallback(function (state) {
  14. var loop = props.loop;
  15. var leading = 500;
  16. var duration = state.duration, overflowWidth = state.overflowWidth, viewWidth = state.viewWidth;
  17. var marqueeScrollWidth = overflowWidth;
  18. if (loop) {
  19. marqueeScrollWidth = overflowWidth + viewWidth;
  20. }
  21. var newMarqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
  22. setMarqueeStyle(newMarqueeStyle);
  23. });
  24. var getBoundingClientRectWithId = useInstanceBoundingClientRect().getBoundingClientRectWithId;
  25. function measureText(callback) {
  26. var _this = this;
  27. var fps = 40;
  28. var loop = props.loop;
  29. // 计算文本所占据的宽度,计算需要滚动的宽度
  30. setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
  31. var marqueeSize, contentSize, overflowWidth, viewWidth, marqueeScrollWidth;
  32. return __generator(this, function (_a) {
  33. switch (_a.label) {
  34. case 0: return [4 /*yield*/, getBoundingClientRectWithId('.ant-notice-bar-marquee')];
  35. case 1:
  36. marqueeSize = _a.sent();
  37. return [4 /*yield*/, getBoundingClientRectWithId('.ant-notice-bar-content')];
  38. case 2:
  39. contentSize = _a.sent();
  40. overflowWidth = (marqueeSize && contentSize && marqueeSize.width - contentSize.width) ||
  41. 0;
  42. viewWidth = (contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) || 0;
  43. marqueeScrollWidth = overflowWidth;
  44. if (loop) {
  45. marqueeScrollWidth = overflowWidth + viewWidth;
  46. }
  47. if (overflowWidth > 0) {
  48. callback({
  49. overflowWidth: overflowWidth,
  50. viewWidth: viewWidth,
  51. duration: marqueeScrollWidth / fps,
  52. });
  53. }
  54. return [2 /*return*/];
  55. }
  56. });
  57. }); }, 0);
  58. }
  59. useEffect(function () {
  60. var enableMarquee = props.enableMarquee;
  61. if (enableMarquee) {
  62. measureText(startMarquee);
  63. }
  64. });
  65. function resetMarquee(state) {
  66. var loop = props.loop;
  67. var viewWidth = state.viewWidth;
  68. var showMarqueeWidth = '0px';
  69. if (loop) {
  70. showMarqueeWidth = "".concat(viewWidth, "px");
  71. }
  72. var marqueeStyle = "transform: translate3d(".concat(showMarqueeWidth, ", 0, 0); transition: 0s all linear;");
  73. setMarqueeStyle(marqueeStyle);
  74. }
  75. useEvent('onTransitionEnd', function () {
  76. var loop = props.loop;
  77. var trailing = 200;
  78. if (loop) {
  79. setTimeout(function () {
  80. measureText(function (state) {
  81. resetMarquee(state);
  82. });
  83. }, trailing);
  84. }
  85. });
  86. useEvent('onTap', function () {
  87. var mode = props.mode;
  88. if (mode === 'link') {
  89. triggerEventOnly('tap');
  90. }
  91. if (mode === 'closeable') {
  92. if (typeof props.onTap !== 'function') {
  93. return;
  94. }
  95. setShow(false);
  96. triggerEventOnly('tap');
  97. }
  98. });
  99. usePageShow(function () {
  100. if (props.enableMarquee) {
  101. setMarqueeStyle('');
  102. resetMarquee({
  103. overflowWidth: 0,
  104. duration: 0,
  105. viewWidth: 0,
  106. });
  107. measureText(startMarquee);
  108. }
  109. });
  110. return {
  111. marqueeStyle: marqueeStyle,
  112. show: show,
  113. };
  114. };
  115. mountComponent(NoticeBar, NoticeBarFunctionalProps);