@forchange/aui/lib/carousel/index.js

ai-boss 业务 ui 组件库

"use strict";

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

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

var _antd = require("antd");

require("./style/carousel.css");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

class Carousel extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      currentPage: 1,
      // 当前页数
      contentWidth: 0,
      // 容器宽度
      cardWidthArr: [],
      // 卡片宽度数组
      scrollWidthArr: [],
      // 滑动长度数组
      spaceWidth: Number(this.props.auiSpaceWidth) || 21
    });

    _defineProperty(this, "componentDidMount", () => {
      window.addEventListener('resize', this.updateSize);
      this.updateSize();
    });

    _defineProperty(this, "componentWillUnmount", () => {
      window.removeEventListener('resize', this.updateSize);
    });

    _defineProperty(this, "updateSize", () => {
      this.setState({
        scrollWidthArr: [],
        cardWidthArr: []
      });

      try {
        const ele = document.getElementById('carousel-content');
        const cardWidthArr = [];

        if (ele && ele.children.length > 0) {
          // 整体宽度
          this.setState({
            contentWidth: ele.offsetWidth
          });

          for (let i = 0; i < ele.children.length; i++) {
            if (i !== ele.children.length - 1) {
              cardWidthArr.push(ele.children[i].clientWidth);
            }
          }
        }

        this.setState({
          cardWidthArr: [...this.state.cardWidthArr, ...cardWidthArr]
        }, () => {
          // 空白卡片宽度，卡片可能宽度不一致，需要计算。
          const emptyDiv = document.getElementById('carousel-empty');

          if (emptyDiv) {
            emptyDiv.style.width = this.getEmptyWidth();
          }
        });
      } catch (e) {
        console.log('监听浏览器事件出错', e);

        _antd.message.warning('轮播图渲染错误，请联系开发');
      }
    });

    _defineProperty(this, "getEmptyWidth", () => {
      const cardSpaceWidth = this.state.spaceWidth;
      const scrollWidthArr = [];
      let total = 0; // 空白内容总长度

      this.state.cardWidthArr.map((item, index) => {
        total += item + cardSpaceWidth;

        if (total - cardSpaceWidth > this.state.contentWidth) {
          scrollWidthArr.push(total - item - cardSpaceWidth);
          total = item + cardSpaceWidth; // 卡片长度重新计算
        }

        if (index === this.state.cardWidthArr.length - 1 && total - cardSpaceWidth === this.state.contentWidth) {
          total = 0;
        }
      });
      this.setState({
        scrollWidthArr: [...this.state.scrollWidthArr, ...scrollWidthArr]
      });
      return this.state.contentWidth - total + 'px';
    });

    _defineProperty(this, "scrollLeft", () => {
      const ele = document.getElementById('carousel-content');
      ele.scrollLeft = this.getScrollLengthLeft();

      if (this.state.currentPage > 1) {
        this.setState({
          currentPage: this.state.currentPage - 1
        });
      }
    });

    _defineProperty(this, "scrollRight", () => {
      const ele = document.getElementById('carousel-content');
      ele.scrollLeft = this.getScrollLengthRight();

      if (this.state.currentPage < this.state.scrollWidthArr.length + 1) {
        this.setState({
          currentPage: this.state.currentPage + 1
        });
      }
    });

    _defineProperty(this, "getScrollLengthRight", () => {
      let scrollLength = 0;

      for (let page = 0; page < this.state.currentPage; page++) {
        scrollLength += this.state.scrollWidthArr[page];
      }

      return scrollLength;
    });

    _defineProperty(this, "getScrollLengthLeft", () => {
      if (this.state.currentPage === 1) {
        return 0;
      }

      let scrollLength = 0;

      for (let page = 0; page < this.state.currentPage - 2; page++) {
        scrollLength += this.state.scrollWidthArr[page];
      }

      return scrollLength;
    });
  }

  render() {
    return React.createElement("div", {
      className: "aui-carousel"
    }, React.createElement("div", {
      className: `${this.state.currentPage === 1 ? 'carousel-disabled' : ''}`
    }, React.createElement(_antd.Icon, {
      type: "left",
      onClick: this.scrollLeft
    })), React.createElement("div", {
      className: "content",
      id: "carousel-content"
    }, Array.isArray(this.props.children) ? this.props.children.map(child => child) : '', React.createElement("div", {
      id: "carousel-empty"
    })), React.createElement("div", {
      className: `${this.state.currentPage - 1 === this.state.scrollWidthArr.length ? 'carousel-disabled' : ''}`
    }, React.createElement(_antd.Icon, {
      type: "right",
      onClick: this.scrollRight
    })));
  }

}

var _default = Carousel;
exports.default = _default;