@ohu-mobile/core/lib-rem/NoticeBar/NoticeBar.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _ArrowRightSOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/ArrowRightSOutlined"));
var _CloseOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CloseOutlined"));
var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
var _defineComponent = require("../_utils/defineComponent");
var _Icon = _interopRequireDefault(require("../Icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _defineComponent.defineComponent)('notice-bar').create({
  props: {
    text: String,
    icon: (0, _defineComponent.props)(Object).optional,
    action: _defineComponent.props.ofType().optional,
    type: _defineComponent.props.ofType().default('default'),
    multiline: (0, _defineComponent.props)(Boolean).default(false),
    scrollable: _defineComponent.props.ofType().optional,
    offset: (0, _defineComponent.props)(String).default('100%'),
    delay: (0, _defineComponent.props)(Number).default(1000),
    speed: (0, _defineComponent.props)(Number).default(50)
  },
  data: function data() {
    return {
      timeoutId: null,
      isShow: true,
      translateX: 0,
      marqueeMoveDistance: 0,
      marqueeWidth: 0,
      marqueeContainerWidth: 0,
      marqueeStyle: this.getInitMarqueeStyle()
    };
  },
  computed: {
    isScroll: function isScroll() {
      if (this.scrollable !== undefined) return this.scrollable;
      return this.marqueeContainerWidth < this.marqueeWidth;
    },
    offsetLeft: function offsetLeft() {
      var match = this.offset.match(/(0|[^0]\d{0,1}|100)%?/);
      if (match && match[1]) {
        var value = +match[1];
        return value >= 0 && value <= 100 ? value : 0;
      }
      return 0;
    }
  },
  methods: {
    getInitMarqueeStyle: function getInitMarqueeStyle() {
      return this.offset !== '100%' && !this.multiline ? {
        marginLeft: this.offset
      } : {};
    },
    handleAction: function handleAction(e) {
      if (this.action === 'closable') {
        e.stopPropagation();
        this.isShow = false;
        this.$emit('close', e);
      }
    },
    setMarqueStyle: function setMarqueStyle(translateX, duration) {
      var translate = translateX !== undefined ? translateX : -this.marqueeWidth;
      var style = {
        transitionTimingFunction: 'linear',
        transform: "translate3d(".concat(translate, "px, 0, 0)"),
        transitionDuration: duration === undefined ? "".concat(this.marqueeMoveDistance / this.speed, "s") : "".concat(duration, "s")
      };
      this.marqueeStyle = style;
    },
    setMarqueeWidth: function setMarqueeWidth() {
      var marquee = this.$refs.marquee;
      var marqueeInner = this.$refs.marqueeInner;
      if (!marqueeInner || !marquee) return;
      return {
        marqueeContainerWidth: marquee.clientWidth,
        marqueeWidth: marqueeInner.clientWidth
      };
    },
    computeInitMoveDistance: function computeInitMoveDistance() {
      return this.marqueeContainerWidth * (this.offsetLeft / 100) + this.marqueeWidth;
    },
    initMarquee: function initMarquee() {
      var _this = this;
      if (this.timeoutId) clearTimeout(this.timeoutId);
      Object.assign(this, this.setMarqueeWidth());
      if (!this.isScroll) return;
      this.marqueeMoveDistance = this.computeInitMoveDistance();
      this.timeoutId = setTimeout(function () {
        _this.setMarqueStyle();
        _this.timeoutId = null;
      }, this.delay);
      this.$on('hook:beforeDestroy', function () {
        _this.timeoutId && clearTimeout(_this.timeoutId);
      });
      this.$on('hook:activated', function () {
        _this.resetMarquee();
      });
      this.$on('hook:deactivated', function () {
        _this.timeoutId && clearTimeout(_this.timeoutId);
      });
    },
    resetMarquee: function resetMarquee() {
      var _this2 = this;
      Object.assign(this, this.setMarqueeWidth());
      if (!this.isScroll) {
        return this.marqueeStyle = this.getInitMarqueeStyle();
      }
      this.marqueeMoveDistance = this.marqueeContainerWidth + this.marqueeWidth;
      this.setMarqueStyle(this.marqueeContainerWidth, 0);
      setTimeout(function () {
        _this2.setMarqueStyle();
      }, 300);
    }
  },
  mounted: function mounted() {
    this.initMarquee();
  },
  render: function render() {
    var _this3 = this;
    var h = arguments[0];
    var $slots = this.$slots,
      isShow = this.isShow,
      icon = this.icon,
      action = this.action,
      multiline = this.multiline,
      type = this.type,
      isScroll = this.isScroll,
      text = this.text;
    var root = this.$rootCls().has([icon && 'icon', action && 'action']).is(type);
    var textNode = {
      ref: 'marquee',
      class: root.element('text').is([multiline ? 'wrap' : 'inline', isScroll && 'scrollable'])
    };
    if (isScroll) {
      textNode.on = {
        transitionend: this.resetMarquee
      };
    }
    return h("div", {
      "directives": [{
        name: "show",
        value: isShow
      }],
      "class": root,
      "on": {
        "click": function click(e) {
          return _this3.$emit('click', e);
        }
      }
    }, [$slots.icon ? h("div", {
      "class": root.element('icon')
    }, [$slots.icon]) : icon && h("div", {
      "class": root.element('icon')
    }, [h(_Icon.default, {
      "attrs": {
        "type": icon
      }
    })]), h("div", (0, _babelHelperVueJsxMergeProps.default)([{}, textNode]), [h("div", {
      "ref": "marqueeInner",
      "style": this.marqueeStyle
    }, [text || $slots.default])]), action && h("div", {
      "attrs": {
        "role": "button"
      },
      "class": root.element('action'),
      "on": {
        "click": this.handleAction
      }
    }, [h(_Icon.default, {
      "attrs": {
        "type": action === 'closable' ? _CloseOutlined2.default : _ArrowRightSOutlined2.default
      }
    })])]);
  }
});