@ttk/component/es/fadeSlider/index.js

ttk组件库

import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, e as _assertThisInitialized, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { PureComponent } from 'react';
import classNames from 'classnames';
import '../_commonjsHelpers-471920d6.js';

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var FadeSliderComponent = /*#__PURE__*/function (_PureComponent) {
  _inherits(FadeSliderComponent, _PureComponent);

  var _super = _createSuper(FadeSliderComponent);

  function FadeSliderComponent(props) {
    var _this;

    _classCallCheck(this, FadeSliderComponent);

    _this = _super.call(this, props);

    _this.createDot = function (item, index) {
      var className = classNames({
        "highlight": _this.state.index == index,
        "middleDot": index == 1
      });
      var span = /*#__PURE__*/React__default.createElement("span", {
        key: "create-dot-span-".concat(index),
        className: className,
        onClick: _this.selectDot.bind(_assertThisInitialized(_this), index)
      });
      return span;
    };

    _this.timer;
    _this.state = {
      index: 0,
      totalPage: _this.props.children.length,
      zIndex: 1
    };
    return _this;
  }

  _createClass(FadeSliderComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      this.timer = setInterval(function () {
        if (location.href.indexOf("edfx-app-home") > -1) {
          _this2.turnToNextPage();
        } else {
          clearInterval(_this2.timer);
        }
      }, 8000);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.timer && clearInterval(this.timer);
    }
  }, {
    key: "turnToLastPage",
    value: function turnToLastPage() {
      var index = this.state.index;
      var totalPage = this.state.totalPage - 1;

      if (index == 0) {
        index = totalPage;
      } else if (index > 0) {
        index--;
      }

      this.setState({
        index: index
      });
    }
  }, {
    key: "turnToNextPage",
    value: function turnToNextPage() {
      var index = this.state.index;
      var totalPage = this.state.totalPage - 1;

      if (index == totalPage) {
        index = 0;
      } else if (index < totalPage) {
        index++;
      }

      this.setState({
        index: index
      });
    }
  }, {
    key: "handleImg",
    value: function handleImg(item, index) {
      var itemClass = classNames({
        "fadeIn": this.state.index == index,
        "imgBox": true,
        "animated": true
      });
      var style = {
        zIndex: this.state.index == index ? 10 : 0
      };
      var img = /*#__PURE__*/React__default.createElement("div", {
        key: "handle-img-".concat(index),
        className: itemClass,
        style: style
      }, item);
      return img;
    }
  }, {
    key: "selectDot",
    value: function selectDot(index) {
      this.setState({
        index: index
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      return /*#__PURE__*/React__default.createElement("div", {
        className: 'fadeSlider'
      }, /*#__PURE__*/React__default.createElement("div", {
        className: 'sliderContainer'
      }, this.props.children.map(function (item, index) {
        return _this3.handleImg(item, index);
      })), /*#__PURE__*/React__default.createElement("span", {
        className: 'lastPage',
        onClick: this.turnToLastPage.bind(this)
      }, /*#__PURE__*/React__default.createElement("i", {
        className: 'edficon edficon-zuo'
      })), /*#__PURE__*/React__default.createElement("span", {
        className: 'nextPage',
        onClick: this.turnToNextPage.bind(this)
      }, /*#__PURE__*/React__default.createElement("i", {
        className: 'edficon edficon-you'
      })), /*#__PURE__*/React__default.createElement("div", {
        className: 'navDot'
      }, this.props.children.map(function (item, index) {
        return _this3.createDot(item, index);
      })));
    }
  }]);

  return FadeSliderComponent;
}(PureComponent);

export { FadeSliderComponent as default };