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;
}