提交

甲情_甲意/miniprogram/node_modules/antd-mini/es/NoticeBar/index.js

@@ -0,0 +1,152 @@
+import { __awaiter, __generator } from "tslib";
+import { Component, triggerEventOnly, getValueFromProps, } from '../_util/simply';
+import { getInstanceBoundingClientRect } from '../_util/jsapi/get-instance-bounding-client-rect';
+import { NoticeBarDefaultProps } from './props';
+Component(NoticeBarDefaultProps, {
+    getInstance: function () {
+        if (this.$id) {
+            return my;
+        }
+        return this;
+    },
+    getBoundingClientRectWithId: function (prefix) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getInstanceBoundingClientRect(this.getInstance(), "".concat(prefix).concat(this.$id ? "-".concat(this.$id) : ''))];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    },
+    onTap: function () {
+        var mode = getValueFromProps(this, 'mode');
+        if (mode === 'link') {
+            triggerEventOnly(this, 'tap');
+        }
+        if (mode === 'closeable') {
+            if (typeof this.props.onTap !== 'function') {
+                return;
+            }
+            this.setData({
+                show: false,
+            });
+            triggerEventOnly(this, 'tap');
+        }
+    },
+    startMarquee: function (state) {
+        var loop = getValueFromProps(this, 'loop');
+        var leading = 500;
+        var duration = state.duration, overflowWidth = state.overflowWidth, viewWidth = state.viewWidth;
+        var marqueeScrollWidth = overflowWidth;
+        if (loop) {
+            marqueeScrollWidth = overflowWidth + viewWidth;
+        }
+        var newMarqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
+        this.setData({
+            marqueeStyle: newMarqueeStyle,
+        });
+        return newMarqueeStyle;
+    },
+    measureText: function (callback) {
+        var _this = this;
+        var fps = 40;
+        var loop = getValueFromProps(this, 'loop');
+        // 计算文本所占据的宽度，计算需要滚动的宽度
+        setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+            var marqueeSize, contentSize, overflowWidth, viewWidth, marqueeScrollWidth;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.getBoundingClientRectWithId('.ant-notice-bar-marquee')];
+                    case 1:
+                        marqueeSize = _a.sent();
+                        return [4 /*yield*/, this.getBoundingClientRectWithId('.ant-notice-bar-content')];
+                    case 2:
+                        contentSize = _a.sent();
+                        overflowWidth = (marqueeSize &&
+                            contentSize &&
+                            marqueeSize.width - contentSize.width) ||
+                            0;
+                        viewWidth = (contentSize === null || contentSize === void 0 ? void 0 : contentSize.width) || 0;
+                        marqueeScrollWidth = overflowWidth;
+                        if (loop) {
+                            marqueeScrollWidth = overflowWidth + viewWidth;
+                        }
+                        if (overflowWidth > 0) {
+                            callback({
+                                overflowWidth: overflowWidth,
+                                viewWidth: viewWidth,
+                                duration: marqueeScrollWidth / fps,
+                            });
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); }, 0);
+    },
+    // 文本滚动的计算
+    resetMarquee: function (state) {
+        var loop = getValueFromProps(this, 'loop');
+        var viewWidth = state.viewWidth;
+        var showMarqueeWidth = '0px';
+        if (loop) {
+            showMarqueeWidth = "".concat(viewWidth, "px");
+        }
+        var marqueeStyle = "transform: translate3d(".concat(showMarqueeWidth, ", 0, 0); transition: 0s all linear;");
+        this.setData({
+            marqueeStyle: marqueeStyle,
+        });
+    },
+    onTransitionEnd: function () {
+        var _this = this;
+        var loop = getValueFromProps(this, 'loop');
+        var trailing = 200;
+        if (loop) {
+            var timer_1 = setTimeout(function () {
+                _this.measureText(function (state) {
+                    _this.resetMarquee.call(_this, state);
+                });
+                clearTimeout(timer_1);
+            }, trailing);
+        }
+    },
+}, {
+    show: true,
+    marqueeStyle: '',
+}, undefined, {
+    didMount: function () {
+        var _this = this;
+        var enableMarquee = this.props.enableMarquee;
+        if (enableMarquee) {
+            this.measureText(function (state) {
+                _this.startMarquee.call(_this, state);
+            });
+        }
+    },
+    didUpdate: function () {
+        var _this = this;
+        var enableMarquee = this.props.enableMarquee;
+        // 这里更新处理的原因是防止notice内容在动画过程中发生改变。
+        if (enableMarquee) {
+            this.measureText(function (state) {
+                _this.startMarquee.call(_this, state);
+            });
+        }
+    },
+    pageEvents: {
+        onShow: function () {
+            var _this = this;
+            if (this.props.enableMarquee) {
+                this.setData({ marqueeStyle: '' });
+                this.resetMarquee({
+                    overflowWidth: 0,
+                    duration: 0,
+                    viewWidth: 0,
+                });
+                this.measureText(function (state) {
+                    _this.startMarquee.call(_this, state);
+                });
+            }
+        },
+    },
+});