@6thquake/react-material/Carousel/CarouselItem.js

React components that implement Google's Material Design.

"use strict";

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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _Video = _interopRequireDefault(require("../Video"));

/**
 * @ignore - internal component.
 */
var styles = {
  imgwarp: {
    float: 'left',
    overflow: 'hidden',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%',
    '@global img': {
      width: '100%',
      height: 'auto',
      display: 'none'
    }
  },
  placeholder: {
    position: 'relative',
    zIndex: '2',
    '& div': {
      width: '100%',
      height: '100%'
    }
  }
};

var CarouselItem =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(CarouselItem, _React$Component);

  function CarouselItem(props) {
    var _this;

    (0, _classCallCheck2.default)(this, CarouselItem);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CarouselItem).call(this, props));

    _this.onRef = function (ref) {
      _this.childVideo = ref;
    };

    _this.itemRef = _react.default.createRef();
    _this.videoRef = _react.default.createRef();
    return _this;
  }

  (0, _createClass2.default)(CarouselItem, [{
    key: "componentDidMount",
    value: function componentDidMount() {// const itemEl = ReactDOM.findDOMNode(this.itemRef.current),
      //   parentEl = itemEl.parentNode.parentNode,
      // h = parentEl.offsetHeight,
      // w = parentEl.offsetWidth;
      // itemEl.style.height= h+'px';
      // itemEl.style.width= w+'px';
      // itemEl.children[0].style.minHeight=h+'px';
      // itemEl.children[0].style.display='block';
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (!!this.childVideo && !!this.props.data.isVideo) {
        // this.props.onCleanInterval 清除interval
        // this.props.onResumeInterval 继续interval
        if (this.props.isCurrent) {
          this.props.onCleanInterval();
          this.childVideo.play();
        } else {
          this.childVideo.pause();
        }
      }
    }
  }, {
    key: "ended",
    value: function ended() {
      this.props.onResumeInterval();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          data = _this$props.data,
          index = _this$props.index,
          classes = _this$props.classes,
          size = _this$props.size,
          isCurrent = _this$props.isCurrent;
      return _react.default.createElement("div", {
        ref: this.itemRef,
        style: {
          width: "".concat(size.width, "px"),
          height: "".concat(size.height, "px"),
          backgroundImage: "url(".concat(data.src) || "".concat(null, ")")
        },
        alt: data.alt,
        className: classes.imgwarp
      }, data.url ? _react.default.createElement("a", {
        href: data.url,
        className: classes.placeholder,
        target: "_blank"
      }, _react.default.createElement("div", null)) : null, !!data.src && !data.isVideo ? _react.default.createElement("img", {
        src: data.src,
        alt: data.alt
      }) : null, data.isVideo ? _react.default.createElement(_Video.default, {
        onRef: this.onRef,
        controls: false,
        sources: [{
          src: data.src,
          type: 'video/mp4'
        }],
        onEnded: this.ended.bind(this)
      }) : null);
    }
  }]);
  return CarouselItem;
}(_react.default.Component);

CarouselItem.propTypes = {};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMCarouselItem'
})(CarouselItem);

exports.default = _default;