@centreon/react-components/lib/Slider/SliderContent/index.js

react components used by centreon web frontend

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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 = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _contentSlider = _interopRequireDefault(require("./content-slider.scss"));

var _ContentSliderItem = _interopRequireDefault(require("./ContentSliderItem"));

var _ContentSliderLeftArrow = _interopRequireDefault(require("./ContentSliderLeftArrow"));

var _ContentSliderRightArrow = _interopRequireDefault(require("./ContentSliderRightArrow"));

var _ContentSliderIndicators = _interopRequireDefault(require("./ContentSliderIndicators"));

var _sliderDefaultImageModule = _interopRequireDefault(require("../../../img/slider-default-image-module.png"));

var _sliderDefaultImageWidget = _interopRequireDefault(require("../../../img/slider-default-image-widget.png"));

/* eslint-disable radix */

/* eslint-disable react/no-array-index-key */

/* eslint-disable react/jsx-filename-extension */

/* eslint-disable react/prop-types */

/* eslint-disable consistent-return */
var SliderContent =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(SliderContent, _Component);

  function SliderContent(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, SliderContent);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SliderContent).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "goToPrevSlide", function () {
      var currentIndex = _this.state.currentIndex;
      if (currentIndex === 0) return;

      _this.setState(function (prevState) {
        return {
          currentIndex: prevState.currentIndex - 1,
          translateValue: prevState.translateValue + _this.slideWidth()
        };
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "goToNextSlide", function () {
      var currentIndex = _this.state.currentIndex;
      var images = _this.props.images;

      if (currentIndex === images.length - 1) {
        return _this.setState({
          currentIndex: 0,
          translateValue: 0
        });
      } // This will not run if we met the if condition above


      _this.setState(function (prevState) {
        return {
          currentIndex: prevState.currentIndex + 1,
          translateValue: prevState.translateValue - _this.slideWidth()
        };
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "slideWidth", function () {
      return document.querySelector('.content-slider-wrapper') ? document.querySelector('.content-slider-wrapper').clientWidth : 780;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderSlides", function () {
      var currentIndex = _this.state.currentIndex;
      var _this$props = _this.props,
          type = _this$props.type,
          images = _this$props.images;
      var slides = images.map(function (image, index) {
        var isActive = currentIndex === index;
        return _react["default"].createElement(_ContentSliderItem["default"], {
          key: index,
          image: image,
          isActive: isActive
        });
      });

      if (images.length === 0) {
        var defaultImage = type === 'widget' ? _sliderDefaultImageWidget["default"] : _sliderDefaultImageModule["default"];
        return [_react["default"].createElement(_ContentSliderItem["default"], {
          image: defaultImage,
          isActive: true
        })];
      }

      return slides;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDotClick", function (e) {
      var _this$state = _this.state,
          currentIndex = _this$state.currentIndex,
          translateValue = _this$state.translateValue;
      var dotIndex = parseInt(e.target.getAttribute('data-index')); // Go back

      if (dotIndex < currentIndex) {
        return _this.setState({
          currentIndex: dotIndex,
          translateValue: -dotIndex * _this.slideWidth()
        });
      } // Go forward


      _this.setState({
        currentIndex: dotIndex,
        translateValue: translateValue + (currentIndex - dotIndex) * _this.slideWidth()
      });
    });
    _this.state = {
      currentIndex: 0,
      translateValue: 0
    };
    return _this;
  }

  (0, _createClass2["default"])(SliderContent, [{
    key: "render",
    value: function render() {
      var _this$state2 = this.state,
          currentIndex = _this$state2.currentIndex,
          translateValue = _this$state2.translateValue;
      var _this$props2 = this.props,
          images = _this$props2.images,
          children = _this$props2.children;
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_contentSlider["default"]['content-slider-wrapper'])
      }, _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_contentSlider["default"]['content-slider'])
      }, _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_contentSlider["default"]['content-slider-items']),
        style: {
          transform: "translateX(".concat(translateValue, "px)")
        }
      }, this.renderSlides()), _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_contentSlider["default"]['content-slider-controls'])
      }, currentIndex === 0 ? null : _react["default"].createElement(_ContentSliderLeftArrow["default"], {
        goToPrevSlide: this.goToPrevSlide,
        iconColor: "gray"
      }), images.length <= 1 ? null : _react["default"].createElement(_ContentSliderRightArrow["default"], {
        goToNextSlide: this.goToNextSlide,
        iconColor: "gray"
      })), _react["default"].createElement(_ContentSliderIndicators["default"], {
        images: images,
        currentIndex: currentIndex,
        handleDotClick: this.handleDotClick
      })), children);
    }
  }]);
  return SliderContent;
}(_react.Component);

var _default = SliderContent;
exports["default"] = _default;