ming-demo3/lib/components/basic/carousel.js

mdf metaui web

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _baseui = require("@mdf/baseui");

var _util = require("@mdf/cube/lib/helpers/util");

process.env.__CLIENT__ && require("./carousel.css");

var CarouselControl = function (_React$Component) {
  (0, _inherits2["default"])(CarouselControl, _React$Component);

  function CarouselControl(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, CarouselControl);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(CarouselControl).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onafterChange", function (index) {
      _this.setState({
        index: index
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "baseControl", function () {
      var _this$state = _this.state,
          dataSource = _this$state.dataSource,
          index = _this$state.index;

      var _baseControl = dataSource.length ? _react["default"].createElement("div", {
        className: "carousel",
        onMouseOver: _this.handleMouseOver,
        onMouseLeave: _this.handleMouseLeave
      }, _react["default"].createElement("div", {
        className: "carousel-tab"
      }, dataSource.map(function (value, i) {
        return _react["default"].createElement("span", {
          className: index == i ? 'on' : '',
          onClick: function onClick() {
            return _this.handleTabClick(i);
          },
          key: 'tab' + i
        }, value.value);
      })), _react["default"].createElement(_baseui.Carousel, {
        afterChange: _this.onafterChange,
        ref: "swipeBigPic"
      }, dataSource.map(function (value, i) {
        return _react["default"].createElement("div", {
          className: value.icon + ' carousel-content',
          key: 'img' + i
        });
      }))) : null;

      return _baseControl;
    });
    var _this$props$config = _this.props.config,
        enumCode = _this$props$config.enumCode,
        title = _this$props$config.title;
    _this.state = {
      index: 0,
      stop: true,
      title: title,
      dataSource: [],
      size: 'default'
    };
    _this.handleMouseOver = _this.handleMouseOver.bind((0, _assertThisInitialized2["default"])(_this));
    _this.handleMouseLeave = _this.handleMouseLeave.bind((0, _assertThisInitialized2["default"])(_this));

    _this.getSourceData(enumCode);

    return _this;
  }

  (0, _createClass2["default"])(CarouselControl, [{
    key: "getSourceData",
    value: function () {
      var _getSourceData = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(enumCode) {
        var config, json;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                config = {
                  url: 'enum/getEnumStrFetch',
                  method: 'GET',
                  params: {
                    enumtype: enumCode
                  }
                };
                _context.next = 3;
                return (0, _util.proxy)(config);

              case 3:
                json = _context.sent;

                if (!(json.code !== 200)) {
                  _context.next = 6;
                  break;
                }

                return _context.abrupt("return");

              case 6:
                json.data && this.setState({
                  dataSource: JSON.parse(json.data)
                });

              case 7:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function getSourceData(_x) {
        return _getSourceData.apply(this, arguments);
      }

      return getSourceData;
    }()
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      this.timer = setInterval(function () {
        return _this2.change();
      }, 3000);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.timer && clearTimeout(this.timer);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {}
  }, {
    key: "change",
    value: function change() {
      var _this$state2 = this.state,
          stop = _this$state2.stop,
          index = _this$state2.index,
          dataSource = _this$state2.dataSource;

      if (stop) {
        index = dataSource.length && (index + 1) % dataSource.length;
        this["goto"](index);
      } else {
        return false;
      }
    }
  }, {
    key: "handleTabClick",
    value: function handleTabClick(index) {
      this.setState({
        index: index
      });
      this["goto"](index);
    }
  }, {
    key: "handleMouseOver",
    value: function handleMouseOver() {
      this.setState({
        stop: false
      });
    }
  }, {
    key: "handleMouseLeave",
    value: function handleMouseLeave() {
      this.setState({
        stop: true
      });
    }
  }, {
    key: "goto",
    value: function goto(index) {
      this.refs.swipeBigPic && this.refs.swipeBigPic.refs.slick.innerSlider.slickGoTo(index);
    }
  }, {
    key: "render",
    value: function render() {
      return this.baseControl();
    }
  }]);
  return CarouselControl;
}(_react["default"].Component);

exports["default"] = CarouselControl;
//# sourceMappingURL=carousel.js.map