HHAromeMiniProgramDemo/node_modules/antd-mini/less/NoticeBar/index.js

import { NoticeBarDefaultProps } from './props';
import { log } from '../_util/console';
import '../_util/assert-component2';
Component({
    props: NoticeBarDefaultProps,
    data: {
        show: true,
        marqueeStyle: '',
        animatedWidth: 0,
        overflowWidth: 0,
        duration: 0,
        viewWidth: 0,
    },
    didMount: function () {
        var enableMarquee = this.props.enableMarquee;
        this.showError();
        if (enableMarquee) {
            this.measureText(this.startMarquee.bind(this));
        }
    },
    didUpdate: function () {
        var enableMarquee = this.props.enableMarquee;
        this.showError();
        // 这里更新处理的原因是防止notice内容在动画过程中发生改变。
        if (enableMarquee) {
            this.measureText(this.startMarquee.bind(this));
        }
    },
    pageEvents: {
        onShow: function () {
            this.resetState();
        },
    },
    methods: {
        resetState: function () {
            var _this = this;
            if (this.props.enableMarquee) {
                this.setData({
                    marqueeStyle: '',
                    animatedWidth: 0,
                    overflowWidth: 0,
                    duration: 0,
                    viewWidth: 0,
                }, function () {
                    _this.resetMarquee();
                    _this.measureText(_this.startMarquee.bind(_this));
                });
            }
        },
        showError: function () {
            var actions = this.props.actions;
            if (!Array.isArray(actions) && typeof actions !== 'undefined') {
                log.warn('NoticeBar', "\u5F53\u524D\u5B9A\u4E49\u7684 actions \u7684\u7C7B\u578B\u4E3A ".concat(typeof actions, "\uFF0C\u4E0D\u7B26\u5408\u5C5E\u6027\u5B9A\u4E49\uFF0C\u5E94\u8BE5\u4E3A\u6570\u7EC4\uFF0C\u5982\uFF1Aactions=\"{{['\u503C', '\u503C']}}"));
            }
        },
        onTap: function () {
            var _a = this.props, mode = _a.mode, onTap = _a.onTap;
            if (mode === 'link' && typeof onTap === 'function') {
                return onTap();
            }
            if (mode === 'closeable' && typeof onTap === 'function') {
                this.setData({
                    show: false,
                });
                return onTap();
            }
        },
        // 文本滚动的计算
        resetMarquee: function () {
            var loop = this.props.loop;
            var viewWidth = this.data.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,
            });
        },
        startMarquee: function () {
            var loop = this.props.loop;
            var leading = 500;
            var _a = this.data, duration = _a.duration, overflowWidth = _a.overflowWidth, viewWidth = _a.viewWidth;
            var marqueeScrollWidth = overflowWidth;
            if (loop) {
                marqueeScrollWidth = overflowWidth + viewWidth;
            }
            var marqueeStyle = "transform: translate3d(".concat(-marqueeScrollWidth, "px, 0, 0); transition: ").concat(duration, "s all linear ").concat(typeof leading === 'number' ? "".concat(leading / 1000, "s") : '0s', ";");
            if (this.data.marqueeStyle !== marqueeStyle) {
                this.setData({
                    marqueeStyle: marqueeStyle,
                });
            }
        },
        onTransitionEnd: function () {
            var _this = this;
            var loop = this.props.loop;
            var trailing = 200;
            if (loop) {
                setTimeout(function () {
                    _this.resetMarquee();
                    _this.measureText(_this.startMarquee.bind(_this));
                }, trailing);
            }
        },
        measureText: function (callback) {
            var _this = this;
            var fps = 40;
            var loop = this.props.loop;
            // 计算文本所占据的宽度，计算需要滚动的宽度
            setTimeout(function () {
                my.createSelectorQuery()
                    .select(".ant-notice-bar-marquee-".concat(_this.$id))
                    .boundingClientRect()
                    .select(".ant-notice-bar-content-".concat(_this.$id))
                    .boundingClientRect()
                    .exec(function (ret) {
                    var _a;
                    // eslint-disable-next-line max-len
                    var overflowWidth = (ret &&
                        ret[0] &&
                        ret[1] &&
                        ret[0].width -
                            ret[1].width) ||
                        0;
                    var viewWidth = ((_a = ret[1]) === null || _a === void 0 ? void 0 : _a.width) || 0;
                    var marqueeScrollWidth = overflowWidth;
                    if (loop) {
                        marqueeScrollWidth = overflowWidth + viewWidth;
                    }
                    if (overflowWidth > 0) {
                        _this.setData({
                            overflowWidth: overflowWidth,
                            viewWidth: viewWidth,
                            duration: marqueeScrollWidth / fps,
                        });
                        callback();
                    }
                });
            }, 0);
        },
    },
});