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

ai-boss 业务 ui 组件库

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; }

import * as React from 'react';
import { Icon, message } from 'antd';
import "./style/carousel.css";

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);
        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(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(Icon, {
      type: "right",
      onClick: this.scrollRight
    })));
  }

}

export default Carousel;