Update Carousel (react-bootstrap#3201)

* Update Carousel

* WIP

* fix tests

* remove transition

* docs: code mod graphic imports

* fix tests

Author: jquense

src/Carousel.js

@@ -1,10 +1,14 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 import elementType from 'prop-types-extra/lib/elementType';
-
-import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
+import { createBootstrapComponent } from './ThemeProvider';
 
 const propTypes = {
+  /**
+   * @default 'carousel-caption'
+   */
+  bsPrefix: PropTypes.string,
   as: elementType,
 };
 
@@ -14,18 +18,13 @@ const defaultProps = {
 
 class CarouselCaption extends React.Component {
   render() {
-    const { as: Component, className, ...props } = this.props;
-    const [bsProps, elementProps] = splitBsProps(props);
-
-    const classes = getClassSet(bsProps);
+    const { as: Component, className, bsPrefix, ...props } = this.props;
 
-    return (
-      <Component {...elementProps} className={classNames(className, classes)} />
-    );
+    return <Component {...props} className={classNames(className, bsPrefix)} />;
   }
 }
 
 CarouselCaption.propTypes = propTypes;
 CarouselCaption.defaultProps = defaultProps;
 
-export default bsClass('carousel-caption', CarouselCaption);
+export default createBootstrapComponent(CarouselCaption, 'carousel-caption');

src/CarouselCaption.js

@@ -1,109 +1,27 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import transition from 'dom-helpers/transition';
+import { createBootstrapComponent } from './ThemeProvider';
 
 const propTypes = {
-  direction: PropTypes.oneOf(['prev', 'next']),
-  onAnimateOutEnd: PropTypes.func,
-  active: PropTypes.bool,
-  animateIn: PropTypes.bool,
-  animateOut: PropTypes.bool,
-  index: PropTypes.number,
-};
-
-const defaultProps = {
-  active: false,
-  animateIn: false,
-  animateOut: false,
+  /**
+   * @default 'carousel-item'
+   */
+  bsPrefix: PropTypes.string,
 };
 
 class CarouselItem extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleAnimateOutEnd = this.handleAnimateOutEnd.bind(this);
-
-    this.state = {
-      direction: null,
-    };
-
-    this.isUnmounted = false;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (this.props.active !== nextProps.active) {
-      this.setState({ direction: null });
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { active } = this.props;
-    const prevActive = prevProps.active;
-
-    if (!active && prevActive) {
-      transition.end(ReactDOM.findDOMNode(this), this.handleAnimateOutEnd);
-    }
-
-    if (active !== prevActive) {
-      setTimeout(() => this.startAnimation(), 20);
-    }
-  }
-
-  componentWillUnmount() {
-    this.isUnmounted = true;
-  }
-
-  handleAnimateOutEnd() {
-    if (this.isUnmounted) {
-      return;
-    }
-
-    if (this.props.onAnimateOutEnd) {
-      this.props.onAnimateOutEnd(this.props.index);
-    }
-  }
-
-  startAnimation() {
-    if (this.isUnmounted) {
-      return;
-    }
-
-    this.setState({
-      direction: this.props.direction === 'prev' ? 'right' : 'left',
-    });
-  }
-
   render() {
-    const {
-      direction,
-      active,
-      animateIn,
-      animateOut,
-      className,
-      ...props
-    } = this.props;
-
-    delete props.onAnimateOutEnd;
-    delete props.index;
-
-    const classes = {
-      item: true,
-      active: (active && !animateIn) || animateOut,
-    };
-    if (direction && active && animateIn) {
-      classes[direction] = true;
-    }
-    if (this.state.direction && (animateIn || animateOut)) {
-      classes[this.state.direction] = true;
-    }
+    const { bsPrefix, children, className, ...props } = this.props;
 
-    return <div {...props} className={classNames(className, classes)} />;
+    return (
+      <div {...props} className={classNames(className, bsPrefix)}>
+        {children}
+      </div>
+    );
   }
 }
 
 CarouselItem.propTypes = propTypes;
-CarouselItem.defaultProps = defaultProps;
 
-export default CarouselItem;
+export default createBootstrapComponent(CarouselItem, 'carousel-item');

src/CarouselItem.js

@@ -10,19 +10,14 @@ import Transition, {
   EXITING,
 } from 'react-transition-group/Transition';
 
+import triggerBrowserReflow from './utils/triggerBrowserReflow';
 import createChainedFunction from './utils/createChainedFunction';
 
 const MARGINS = {
   height: ['marginTop', 'marginBottom'],
   width: ['marginLeft', 'marginRight'],
 };
 
-// reading a dimension prop will cause the browser to recalculate,
-// which will let our animations work
-function triggerBrowserReflow(node) {
-  node.offsetHeight; // eslint-disable-line no-unused-expressions
-}
-
 function getDimensionValue(dimension, elem) {
   let offset = `offset${dimension[0].toUpperCase()}${dimension.slice(1)}`;
   let value = elem[offset];

src/Collapse.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
-import BaseDropdownMenu from 'react-overlays//DropdownMenu';
+import BaseDropdownMenu from 'react-overlays/DropdownMenu';
 import NavbarContext from './NavbarContext';
 
 import { createBootstrapComponent } from './ThemeProvider';

src/DropdownMenu.js

@@ -6,6 +6,7 @@ import Transition, {
   ENTERING,
 } from 'react-transition-group/Transition';
 import onEnd from 'dom-helpers/transition/end';
+import triggerBrowserReflow from './utils/triggerBrowserReflow';
 
 const propTypes = {
   /**
@@ -75,10 +76,6 @@ const fadeStyles = {
   [ENTERED]: 'show',
 };
 
-function triggerBrowserReflow(node) {
-  node.offsetHeight; // eslint-disable-line no-unused-expressions
-}
-
 class Fade extends React.Component {
   handleEnter = node => {
     triggerBrowserReflow(node);

src/Fade.js

@@ -6,7 +6,7 @@ import canUseDOM from 'dom-helpers/util/inDOM';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import React from 'react';
 import PropTypes from 'prop-types';
-import BaseModal from 'react-overlays//Modal';
+import BaseModal from 'react-overlays/Modal';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';

src/Modal.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import BaseOverlay from 'react-overlays//Overlay';
+import BaseOverlay from 'react-overlays/Overlay';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';

src/Overlay.js

@@ -1,7 +1,7 @@
 import qsa from 'dom-helpers/query/querySelectorAll';
 import css from 'dom-helpers/style';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
-import ModalManager from 'react-overlays//ModalManager';
+import ModalManager from 'react-overlays/ModalManager';
 
 const Selector = {
   FIXED_CONTENT: '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',

src/utils/BootstrapModalManager.js

@@ -0,0 +1,5 @@
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+export default function triggerBrowserReflow(node) {
+  node.offsetHeight; // eslint-disable-line no-unused-expressions
+}

src/utils/triggerBrowserReflow.js

@@ -1,38 +1,20 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
+import { mount } from 'enzyme';
 
 import Carousel from '../src/Carousel';
 
 describe('<Carousel.Caption>', () => {
   it('uses "div" by default', () => {
-    let instance = ReactTestUtils.renderIntoDocument(<Carousel.Caption />);
-
-    assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'DIV');
+    mount(
+      <Carousel.Caption className="custom-class">
+        <strong>Children</strong>
+      </Carousel.Caption>,
+    ).assertSingle('div.carousel-caption.custom-class strong');
   });
 
-  it('has "carousel-caption" class', () => {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Carousel.Caption>Carousel.Caption content</Carousel.Caption>,
-    );
-    assert.equal(ReactDOM.findDOMNode(instance).className, 'carousel-caption');
-  });
-
-  it('Should merge additional classes passed in', () => {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Carousel.Caption className="bob" />,
-    );
-    assert.ok(ReactDOM.findDOMNode(instance).className.match(/\bbob\b/));
-    assert.ok(
-      ReactDOM.findDOMNode(instance).className.match(/\bcarousel-caption\b/),
+  it('should allow custom elements instead of "div"', () => {
+    mount(<Carousel.Caption as="section" />).assertSingle(
+      'section.carousel-caption',
     );
   });
-
-  it('allows custom elements instead of "div"', () => {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Carousel.Caption as="section" />,
-    );
-
-    assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'SECTION');
-  });
 });