Skip to content

Commit 1e70e64

Browse files
gergely-nagyTheSharpieOne
authored andcommitted
feat(CarouselItem): support tag prop on carousel item (#681)
1 parent 48edd6b commit 1e70e64

3 files changed

Lines changed: 65 additions & 5 deletions

File tree

docs/lib/Components/CarouselPage.js

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default class CarouselPage extends React.Component {
2323
</PrismCode>
2424
</pre>
2525

26-
<h3>Properties</h3>
26+
<h3>Carousel Properties</h3>
2727
<pre>
2828
<PrismCode className="language-jsx">
2929
{`Carousel.propTypes = {
@@ -60,6 +60,59 @@ export default class CarouselPage extends React.Component {
6060
</PrismCode>
6161
</pre>
6262

63+
<h3>CarouselItem Properties</h3>
64+
<pre>
65+
<PrismCode className="language-jsx">
66+
{`CarouselItem.propTypes = {
67+
...Transition.propTypes,
68+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
69+
in: PropTypes.bool,
70+
src: PropTypes.string,
71+
altText: PropTypes.string,
72+
cssModule: PropTypes.object,
73+
children: PropTypes.shape({
74+
type: PropTypes.oneOf([CarouselCaption]),
75+
}),
76+
slide: PropTypes.bool,
77+
};`}
78+
</PrismCode>
79+
</pre>
80+
81+
<h3>CarouselControl Properties</h3>
82+
<pre>
83+
<PrismCode className="language-jsx">
84+
{`CarouselControl.propTypes = {
85+
direction: PropTypes.oneOf(['prev', 'next']).isRequired,
86+
onClickHandler: PropTypes.func.isRequired,
87+
cssModule: PropTypes.object,
88+
directionText: PropTypes.string
89+
};`}
90+
</PrismCode>
91+
</pre>
92+
93+
<h3>CarouselIndicators Properties</h3>
94+
<pre>
95+
<PrismCode className="language-jsx">
96+
{`CarouselIndicators.propTypes = {
97+
items: PropTypes.array.isRequired,
98+
activeIndex: PropTypes.number.isRequired,
99+
cssModule: PropTypes.object,
100+
onClickHandler: PropTypes.func.isRequired
101+
};`}
102+
</PrismCode>
103+
</pre>
104+
105+
<h3>CarouselCaption Properties</h3>
106+
<pre>
107+
<PrismCode className="language-jsx">
108+
{`CarouselCaption.propTypes = {
109+
captionHeader: PropTypes.string,
110+
captionText: PropTypes.string.isRequired,
111+
cssModule: PropTypes.object
112+
};`}
113+
</PrismCode>
114+
</pre>
115+
63116
<h3>Uncontrolled Carousel</h3>
64117
<p>
65118
For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. <code>UncontrolledCarousel</code> does not require <code>previous</code>, <code>next</code> nor <code>activeIndex</code> props to work.

src/CarouselItem.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ class CarouselItem extends React.Component {
5050
}
5151

5252
render() {
53-
const { src, altText, in: isIn, children, cssModule, slide, ...transitionProps } = this.props;
53+
const { src, altText, in: isIn, children, cssModule, slide, tag: Tag, ...transitionProps } = this.props;
5454
const imgClasses = mapToCssModules(classNames(
5555
'd-block',
5656
'img-fluid'
@@ -85,7 +85,7 @@ class CarouselItem extends React.Component {
8585

8686
return (
8787
<div className={itemClasses}>
88-
<img className={imgClasses} src={src} alt={altText} />
88+
<Tag className={imgClasses} src={src} alt={altText} />
8989
{children}
9090
</div>
9191
);
@@ -97,8 +97,9 @@ class CarouselItem extends React.Component {
9797

9898
CarouselItem.propTypes = {
9999
...Transition.propTypes,
100+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
100101
in: PropTypes.bool,
101-
src: PropTypes.string.isRequired,
102+
src: PropTypes.string,
102103
altText: PropTypes.string,
103104
cssModule: PropTypes.object,
104105
children: PropTypes.shape({
@@ -109,6 +110,7 @@ CarouselItem.propTypes = {
109110

110111
CarouselItem.defaultProps = {
111112
...Transition.defaultProps,
113+
tag: 'img',
112114
timeout: TransitionTimeouts.Carousel,
113115
slide: true,
114116
};

src/__tests__/Carousel.spec.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,16 @@ describe('Carousel', () => {
3030
});
3131

3232
describe('items', () => {
33-
it('should render an img tag', () => {
33+
it('should render an img tag by default', () => {
3434
const wrapper = mount(<CarouselItem src={items[0].src} altText={items[0].src} />);
3535
expect(wrapper.find('img').length).toEqual(1);
3636
});
3737

38+
it('should render custom tag', () => {
39+
const wrapper = mount(<CarouselItem tag="image" />);
40+
expect(wrapper.find('image').length).toBe(1);
41+
});
42+
3843
it('should render a caption if one is passed in', () => {
3944
const wrapper = mount(
4045
<CarouselItem src={items[0].src} altText={items[0].src}>

0 commit comments

Comments
 (0)