You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

CarouselItem.js 4.3 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  4. import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
  5. import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
  6. import React from 'react';
  7. import PropTypes from 'prop-types';
  8. import classNames from 'classnames';
  9. import { Transition } from 'react-transition-group';
  10. import { mapToCssModules, TransitionTimeouts, TransitionStatuses, tagPropType } from './utils';
  11. var CarouselItem =
  12. /*#__PURE__*/
  13. function (_React$Component) {
  14. _inheritsLoose(CarouselItem, _React$Component);
  15. function CarouselItem(props) {
  16. var _this;
  17. _this = _React$Component.call(this, props) || this;
  18. _this.state = {
  19. startAnimation: false
  20. };
  21. _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  22. _this.onEntering = _this.onEntering.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  23. _this.onExit = _this.onExit.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  24. _this.onExiting = _this.onExiting.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  25. _this.onExited = _this.onExited.bind(_assertThisInitialized(_assertThisInitialized(_this)));
  26. return _this;
  27. }
  28. var _proto = CarouselItem.prototype;
  29. _proto.onEnter = function onEnter(node, isAppearing) {
  30. this.setState({
  31. startAnimation: false
  32. });
  33. this.props.onEnter(node, isAppearing);
  34. };
  35. _proto.onEntering = function onEntering(node, isAppearing) {
  36. // getting this variable triggers a reflow
  37. var offsetHeight = node.offsetHeight;
  38. this.setState({
  39. startAnimation: true
  40. });
  41. this.props.onEntering(node, isAppearing);
  42. return offsetHeight;
  43. };
  44. _proto.onExit = function onExit(node) {
  45. this.setState({
  46. startAnimation: false
  47. });
  48. this.props.onExit(node);
  49. };
  50. _proto.onExiting = function onExiting(node) {
  51. this.setState({
  52. startAnimation: true
  53. });
  54. node.dispatchEvent(new CustomEvent('slide.bs.carousel'));
  55. this.props.onExiting(node);
  56. };
  57. _proto.onExited = function onExited(node) {
  58. node.dispatchEvent(new CustomEvent('slid.bs.carousel'));
  59. this.props.onExited(node);
  60. };
  61. _proto.render = function render() {
  62. var _this2 = this;
  63. var _this$props = this.props,
  64. isIn = _this$props.in,
  65. children = _this$props.children,
  66. cssModule = _this$props.cssModule,
  67. slide = _this$props.slide,
  68. Tag = _this$props.tag,
  69. className = _this$props.className,
  70. transitionProps = _objectWithoutPropertiesLoose(_this$props, ["in", "children", "cssModule", "slide", "tag", "className"]);
  71. return React.createElement(Transition, _extends({}, transitionProps, {
  72. enter: slide,
  73. exit: slide,
  74. in: isIn,
  75. onEnter: this.onEnter,
  76. onEntering: this.onEntering,
  77. onExit: this.onExit,
  78. onExiting: this.onExiting,
  79. onExited: this.onExited
  80. }), function (status) {
  81. var direction = _this2.context.direction;
  82. var isActive = status === TransitionStatuses.ENTERED || status === TransitionStatuses.EXITING;
  83. var directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) && _this2.state.startAnimation && (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right');
  84. var orderClassName = status === TransitionStatuses.ENTERING && (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev');
  85. var itemClasses = mapToCssModules(classNames(className, 'carousel-item', isActive && 'active', directionClassName, orderClassName), cssModule);
  86. return React.createElement(Tag, {
  87. className: itemClasses
  88. }, children);
  89. });
  90. };
  91. return CarouselItem;
  92. }(React.Component);
  93. CarouselItem.propTypes = _objectSpread({}, Transition.propTypes, {
  94. tag: tagPropType,
  95. in: PropTypes.bool,
  96. cssModule: PropTypes.object,
  97. children: PropTypes.node,
  98. slide: PropTypes.bool,
  99. className: PropTypes.string
  100. });
  101. CarouselItem.defaultProps = _objectSpread({}, Transition.defaultProps, {
  102. tag: 'div',
  103. timeout: TransitionTimeouts.Carousel,
  104. slide: true
  105. });
  106. CarouselItem.contextTypes = {
  107. direction: PropTypes.string
  108. };
  109. export default CarouselItem;