|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
- import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
- import React from 'react';
- import PropTypes from 'prop-types';
- import classNames from 'classnames';
- import { Transition } from 'react-transition-group';
- import { mapToCssModules, TransitionTimeouts, TransitionStatuses, tagPropType } from './utils';
-
- var CarouselItem =
- /*#__PURE__*/
- function (_React$Component) {
- _inheritsLoose(CarouselItem, _React$Component);
-
- function CarouselItem(props) {
- var _this;
-
- _this = _React$Component.call(this, props) || this;
- _this.state = {
- startAnimation: false
- };
- _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
- _this.onEntering = _this.onEntering.bind(_assertThisInitialized(_assertThisInitialized(_this)));
- _this.onExit = _this.onExit.bind(_assertThisInitialized(_assertThisInitialized(_this)));
- _this.onExiting = _this.onExiting.bind(_assertThisInitialized(_assertThisInitialized(_this)));
- _this.onExited = _this.onExited.bind(_assertThisInitialized(_assertThisInitialized(_this)));
- return _this;
- }
-
- var _proto = CarouselItem.prototype;
-
- _proto.onEnter = function onEnter(node, isAppearing) {
- this.setState({
- startAnimation: false
- });
- this.props.onEnter(node, isAppearing);
- };
-
- _proto.onEntering = function onEntering(node, isAppearing) {
- // getting this variable triggers a reflow
- var offsetHeight = node.offsetHeight;
- this.setState({
- startAnimation: true
- });
- this.props.onEntering(node, isAppearing);
- return offsetHeight;
- };
-
- _proto.onExit = function onExit(node) {
- this.setState({
- startAnimation: false
- });
- this.props.onExit(node);
- };
-
- _proto.onExiting = function onExiting(node) {
- this.setState({
- startAnimation: true
- });
- node.dispatchEvent(new CustomEvent('slide.bs.carousel'));
- this.props.onExiting(node);
- };
-
- _proto.onExited = function onExited(node) {
- node.dispatchEvent(new CustomEvent('slid.bs.carousel'));
- this.props.onExited(node);
- };
-
- _proto.render = function render() {
- var _this2 = this;
-
- var _this$props = this.props,
- isIn = _this$props.in,
- children = _this$props.children,
- cssModule = _this$props.cssModule,
- slide = _this$props.slide,
- Tag = _this$props.tag,
- className = _this$props.className,
- transitionProps = _objectWithoutPropertiesLoose(_this$props, ["in", "children", "cssModule", "slide", "tag", "className"]);
-
- return React.createElement(Transition, _extends({}, transitionProps, {
- enter: slide,
- exit: slide,
- in: isIn,
- onEnter: this.onEnter,
- onEntering: this.onEntering,
- onExit: this.onExit,
- onExiting: this.onExiting,
- onExited: this.onExited
- }), function (status) {
- var direction = _this2.context.direction;
- var isActive = status === TransitionStatuses.ENTERED || status === TransitionStatuses.EXITING;
- var directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) && _this2.state.startAnimation && (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right');
- var orderClassName = status === TransitionStatuses.ENTERING && (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev');
- var itemClasses = mapToCssModules(classNames(className, 'carousel-item', isActive && 'active', directionClassName, orderClassName), cssModule);
- return React.createElement(Tag, {
- className: itemClasses
- }, children);
- });
- };
-
- return CarouselItem;
- }(React.Component);
-
- CarouselItem.propTypes = _objectSpread({}, Transition.propTypes, {
- tag: tagPropType,
- in: PropTypes.bool,
- cssModule: PropTypes.object,
- children: PropTypes.node,
- slide: PropTypes.bool,
- className: PropTypes.string
- });
- CarouselItem.defaultProps = _objectSpread({}, Transition.defaultProps, {
- tag: 'div',
- timeout: TransitionTimeouts.Carousel,
- slide: true
- });
- CarouselItem.contextTypes = {
- direction: PropTypes.string
- };
- export default CarouselItem;
|