zarm/lib/marquee/Marquee.js

基于 React 的移动端UI库

"use strict";

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _bem = require("@zarm-design/bem");

var _constants = require("./constants");

var _configProvider = require("../config-provider");

var _dom = require("../utils/dom");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

var SPEED = 30;
var DEFAULT_RECT = {
  top: 0,
  bottom: 0,
  width: 0,
  height: 0,
  left: 0,
  right: 0,
  x: 0,
  y: 0,
  toJSON: function toJSON() {}
};
var CLIENT_RECT = _dom.canUseDOM && 'DOMRect' in window ? new window.DOMRect() : DEFAULT_RECT;

var Marquee = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var direction = props.direction,
      _props$speed = props.speed,
      speed = _props$speed === void 0 ? SPEED : _props$speed,
      delay = props.delay,
      height = props.height,
      width = props.width,
      children = props.children,
      className = props.className;
  var dir = direction.toLowerCase();
  var container = (0, _react.useRef)(null);
  var scrollItem = (0, _react.useRef)(null);
  var containerBoundingRect = (0, _react.useRef)(CLIENT_RECT);
  var boundingRect = (0, _react.useRef)(CLIENT_RECT);

  var marqueeRef = ref || /*#__PURE__*/_react.default.createRef();

  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('marquee', {
    prefixCls: prefixCls
  });
  var style = props.style;
  style = style || {};
  style.width = width;
  style.height = height;
  var setAnimationProperty = (0, _react.useCallback)(function () {
    var transformX = 0;
    var transformY = 0;
    var distanceX = 0;
    var distanceY = 0;
    var distance = 0;
    var rect = boundingRect.current;

    switch (dir) {
      case _constants.DIRECTION_LEFT:
        transformX = containerBoundingRect.current.width;
        distanceX = -boundingRect.current.width;
        distance = boundingRect.current.width + containerBoundingRect.current.width;
        break;

      case _constants.DIRECTION_RIGHT:
        transformX = -rect.width;
        distanceX = containerBoundingRect.current.width;
        distance = boundingRect.current.width + containerBoundingRect.current.width;
        break;

      case _constants.DIRECTION_UP:
        transformY = +(height || 0);
        distanceY = -boundingRect.current.height;
        distance = boundingRect.current.height + containerBoundingRect.current.height;
        break;

      case _constants.DIRECTION_DOWN:
        transformY = -rect.height;
        distanceY = containerBoundingRect.current.height;
        distance = boundingRect.current.height + containerBoundingRect.current.height;
        break;

      default:
        transformX = rect.width;
        distanceX = boundingRect.current.width;
        distance = boundingRect.current.width + containerBoundingRect.current.width;
    }

    container.current.style.setProperty('--transform-x', "".concat(transformX, "px"));
    container.current.style.setProperty('--transform-y', "".concat(transformY, "px"));
    container.current.style.setProperty('--distance-x', "".concat(distanceX, "px"));
    container.current.style.setProperty('--distance-y', "".concat(distanceY, "px"));
    container.current.style.animationDelay = "".concat(delay, "ms");
    container.current.style.animationDuration = "".concat(distance / speed * 1000, "ms");
  }, [dir, height, speed, delay]);
  (0, _react.useEffect)(function () {
    containerBoundingRect.current = container.current.getBoundingClientRect();
    boundingRect.current = scrollItem.current.getBoundingClientRect();
    setAnimationProperty();
  }, [setAnimationProperty]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: bem([className]),
    ref: marqueeRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('body'),
    ref: container,
    style: style
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('content'),
    ref: scrollItem
  }, children)));
});

Marquee.displayName = 'Marquee';
Marquee.defaultProps = {
  direction: 'left',
  speed: 30,
  delay: 0
};
var _default = Marquee;
exports.default = _default;