gui-one-nutui-react-taro/dist/esm/barrage.taro-d86c367a.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "frequency", "loop", "barrageList", "speeds", "rows", "top"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React__default, { useRef, useImperativeHandle, useEffect } from 'react';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import { c as cn } from './bem-893ad28d.js';
var defaultProps = {
  barrageList: [],
  frequency: 500,
  loop: true,
  speeds: 2000,
  rows: 3,
  top: 10
};
var InternalBarrage = function InternalBarrage(props, ref) {
  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
    className = _defaultProps$props.className,
    frequency = _defaultProps$props.frequency,
    loop = _defaultProps$props.loop,
    barrageList = _defaultProps$props.barrageList,
    speeds = _defaultProps$props.speeds,
    rows = _defaultProps$props.rows,
    top = _defaultProps$props.top,
    restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
  var barrageBody = useRef(null);
  var barrageContainer = useRef(null);
  var timer = useRef(0);
  var index = useRef(0);
  var b = cn('barrage');
  var classes = classNames(className, b(''));
  useImperativeHandle(ref, function () {
    return {
      add: function add(word) {
        var _index = index.current % barrageList.length;
        barrageList.splice(_index, 0, word);
      }
    };
  });
  useEffect(function () {
    run();
    return function () {
      clearInterval(timer.current);
    };
  }, [barrageList]);
  var run = function run() {
    clearInterval(timer.current);
    timer.current = setInterval(function () {
      play();
      run();
    }, frequency);
  };
  var play = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _index, el;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _index = loop ? index.current % barrageList.length : index.current;
              el = document.createElement("div");
              el.innerHTML = barrageList[_index];
              el.classList.add('barrage-item');
              barrageContainer.current.appendChild(el);
              Taro.createSelectorQuery().select('.barrage-item').boundingClientRect(function (res) {
                console.log('res', res);
                var height = res === null || res === void 0 ? void 0 : res.height;
                el.classList.add('move');
                el.style.animationDuration = "".concat(speeds, "ms");
                el.style.top = "".concat(_index % rows * (height + top) + 20, "px");
                el.dataset.index = "".concat(_index);
                el.addEventListener('animationend', function () {
                  barrageContainer.current.removeChild(el);
                });
                index.current++;
              }).exec();
            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    return function play() {
      return _ref.apply(this, arguments);
    };
  }();
  return React__default.createElement("div", _objectSpread({
    className: classes,
    ref: barrageBody
  }, restProps), React__default.createElement("div", {
    ref: barrageContainer,
    className: "bContainer"
  }));
};
var Barrage = React__default.forwardRef(InternalBarrage);
Barrage.defaultProps = defaultProps;
Barrage.displayName = 'NutBarrage';
export { Barrage as B };