From a69881437fe3d861c44e9493c1983c7c7d13ae34 Mon Sep 17 00:00:00 2001 From: bestguy <7zark7@gmail.com> Date: Mon, 17 May 2021 19:11:46 -0700 Subject: [PATCH] feat(carousel): add Bootstrap5 updates - Use renamed RTL class names - Updates indicator markup and selectors for correct styling - Add support for carousel-fade --- src/Carousel.js | 14 ++++++++------ src/CarouselIndicators.js | 12 ++++++++---- src/CarouselItem.js | 4 ++-- src/__tests__/Carousel.spec.js | 32 ++++++++++++++++---------------- types/lib/Carousel.d.ts | 1 + 5 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/Carousel.js b/src/Carousel.js index abfaca045..81ffffd7e 100644 --- a/src/Carousel.js +++ b/src/Carousel.js @@ -19,7 +19,7 @@ class Carousel extends React.Component { this.touchStartY = 0; this.state = { activeIndex: this.props.activeIndex, - direction: 'right', + direction: 'end', indicatorClicked: false, }; } @@ -45,13 +45,13 @@ class Carousel extends React.Component { if (nextProps.activeIndex !== activeIndex) { // Calculate the direction to turn if (nextProps.activeIndex === activeIndex + 1) { - direction = 'right'; + direction = 'end'; } else if (nextProps.activeIndex === activeIndex -1) { - direction = 'left'; + direction = 'start'; } else if (nextProps.activeIndex < activeIndex) { - direction = indicatorClicked ? 'left' : 'right'; + direction = indicatorClicked ? 'start' : 'end'; } else if (nextProps.activeIndex !== activeIndex) { - direction = indicatorClicked ? 'right' : 'left'; + direction = indicatorClicked ? 'end' : 'start'; } newState = { @@ -166,10 +166,11 @@ class Carousel extends React.Component { } render() { - const { cssModule, slide, className, dark } = this.props; + const { cssModule, slide, className, dark, fade } = this.props; const outerClasses = mapToCssModules(classNames( className, 'carousel', + 'carousel-fade' && fade, slide && 'slide', dark && 'carousel-dark' ), cssModule); @@ -274,6 +275,7 @@ Carousel.defaultProps = { keyboard: true, slide: true, enableTouch: true, + fade: false, }; Carousel.childContextTypes = { diff --git a/src/CarouselIndicators.js b/src/CarouselIndicators.js index 12118010d..2eb1c9ddd 100644 --- a/src/CarouselIndicators.js +++ b/src/CarouselIndicators.js @@ -12,20 +12,24 @@ const CarouselIndicators = (props) => { { active: activeIndex === idx } ), cssModule); return ( -
  • { e.preventDefault(); onClickHandler(idx); }} className={indicatorClasses} - />); + > + {item.caption} + ); }); return ( -
      +
      {indicators} -
    + ); }; diff --git a/src/CarouselItem.js b/src/CarouselItem.js index b61ce5c47..2610691f0 100644 --- a/src/CarouselItem.js +++ b/src/CarouselItem.js @@ -68,9 +68,9 @@ class CarouselItem extends React.Component { const isActive = (status === TransitionStatuses.ENTERED) || (status === TransitionStatuses.EXITING); const directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) && this.state.startAnimation && - (direction === 'right' ? 'carousel-item-left' : 'carousel-item-right'); + (direction === 'end' ? 'carousel-item-start' : 'carousel-item-end'); const orderClassName = (status === TransitionStatuses.ENTERING) && - (direction === 'right' ? 'carousel-item-next' : 'carousel-item-prev'); + (direction === 'end' ? 'carousel-item-next' : 'carousel-item-prev'); const itemClasses = mapToCssModules(classNames( className, 'carousel-item', diff --git a/src/__tests__/Carousel.spec.js b/src/__tests__/Carousel.spec.js index 067eb1c2a..762f5adc9 100644 --- a/src/__tests__/Carousel.spec.js +++ b/src/__tests__/Carousel.spec.js @@ -55,27 +55,27 @@ describe('Carousel', () => { describe('transitions', () => { it('should add the appropriate classes when entering right', () => { - const wrapper = mount(, { context: { direction: 'right' } }); + const wrapper = mount(, { context: { direction: 'end' } }); wrapper.setProps({ in: true }); - expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item carousel-item-left carousel-item-next'); + expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item carousel-item-start carousel-item-next'); jest.runTimersToTime(600); expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item active'); wrapper.setProps({ in: false }); - expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item active carousel-item-left'); + expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item active carousel-item-start'); jest.runTimersToTime(600); expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item'); }); it('should add the appropriate classes when entering left', () => { - const wrapper = mount(, { context: { direction: 'left' } }); + const wrapper = mount(, { context: { direction: 'start' } }); wrapper.setProps({ in: true }); - expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item carousel-item-right carousel-item-prev'); + expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item carousel-item-end carousel-item-prev'); jest.runTimersToTime(600); expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item active'); wrapper.setProps({ in: false }); - expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item active carousel-item-right'); + expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item active carousel-item-end'); jest.runTimersToTime(600); expect(wrapper.update().find('div').prop('className')).toEqual('carousel-item'); }); @@ -114,8 +114,8 @@ describe('Carousel', () => { describe('indicators', () => { it('should render a list with the right number of items', () => { const wrapper = mount( { }} />); - expect(wrapper.find('ol').length).toEqual(1); - expect(wrapper.find('li').length).toEqual(3); + expect(wrapper.find('div').length).toEqual(1); + expect(wrapper.find('button').length).toEqual(3); }); it('should append the correct active class', () => { @@ -126,7 +126,7 @@ describe('Carousel', () => { it('should call the click hanlder', () => { const onClick = jest.fn(); const wrapper = mount(); - wrapper.find('li').first().simulate('click'); + wrapper.find('button').first().simulate('click'); expect(onClick).toHaveBeenCalled(); }); }); @@ -314,7 +314,7 @@ describe('Carousel', () => { ); - wrapper.find(CarouselIndicators).find('li').first().simulate('click'); + wrapper.find(CarouselIndicators).find('button').first().simulate('click'); expect(wrapper.state().indicatorClicked).toEqual(true); }); @@ -336,7 +336,7 @@ describe('Carousel', () => { ); wrapper.setProps({ activeIndex: 1 }); - expect(wrapper.state().direction).toEqual('right'); + expect(wrapper.state().direction).toEqual('end'); }); it('should go left when the index decreases', () => { @@ -357,7 +357,7 @@ describe('Carousel', () => { ); wrapper.setProps({ activeIndex: 0 }); - expect(wrapper.state().direction).toEqual('left'); + expect(wrapper.state().direction).toEqual('start'); }); it('should go right if transitioning from the last to first slide by non-indicator', () => { @@ -378,7 +378,7 @@ describe('Carousel', () => { ); wrapper.setProps({ activeIndex: 0 }); - expect(wrapper.state().direction).toEqual('right'); + expect(wrapper.state().direction).toEqual('end'); }); it('should go left if transitioning from the last to first slide by indicator', () => { @@ -403,7 +403,7 @@ describe('Carousel', () => { wrapper.setState({ indicatorClicked: true }); wrapper.setProps({ activeIndex: 0 }); - expect(wrapper.state().direction).toEqual('left'); + expect(wrapper.state().direction).toEqual('start'); }); it('should go left if transitioning from the first to last slide by non-indicator', () => { @@ -424,7 +424,7 @@ describe('Carousel', () => { ); wrapper.setProps({ activeIndex: 2 }); - expect(wrapper.state().direction).toEqual('left'); + expect(wrapper.state().direction).toEqual('start'); }); }); @@ -450,7 +450,7 @@ describe('Carousel', () => { wrapper.setState({ indicatorClicked: true }); wrapper.setProps({ activeIndex: 2 }); - expect(wrapper.state().direction).toEqual('right'); + expect(wrapper.state().direction).toEqual('end'); }); describe('interval', () => { diff --git a/types/lib/Carousel.d.ts b/types/lib/Carousel.d.ts index e9835bf25..57833c2f3 100644 --- a/types/lib/Carousel.d.ts +++ b/types/lib/Carousel.d.ts @@ -12,6 +12,7 @@ interface CommonCarouselProps extends React.HTMLAttributes { mouseExit?: () => void; slide?: boolean; dark?: boolean; + fade?: boolean; cssModule?: CSSModule; enableTouch?: boolean; }