Method render

src/CarouselItem.js:57–108

()

  }

  render() {
    const {
      in: isIn,
      children,
      cssModule,
      slide = true,
      tag: Tag = 'div',
      className,
      ...transitionProps
    } = this.props;

    return (
      <Transition
        {...transitionProps}
        enter={slide}
        exit={slide}
        in={isIn}
        onEnter={this.onEnter}
        onEntering={this.onEntering}
        onExit={this.onExit}
        onExiting={this.onExiting}
        onExited={this.onExited}
      >
        {(status) => {
          const { direction } = this.context;
          const isActive =
            status === TransitionStatuses.ENTERED ||
            status === TransitionStatuses.EXITING;
          const directionClassName =
            (status === TransitionStatuses.ENTERING ||
              status === TransitionStatuses.EXITING) &&
            this.state.startAnimation &&
            (direction === 'end' ? 'carousel-item-start' : 'carousel-item-end');
          const orderClassName =
            status === TransitionStatuses.ENTERING &&
            (direction === 'end' ? 'carousel-item-next' : 'carousel-item-prev');
          const itemClasses = mapToCssModules(
            classNames(
              className,
              'carousel-item',
              isActive && 'active',
              directionClassName,
              orderClassName,
            ),
            cssModule,
          );

          return <Tag className={itemClasses}>{children}</Tag>;
        }}
      </Transition>
    );
  }
}

CarouselItem.propTypes = {