Skip to content

Commit 17bed65

Browse files
reckterreckter
authored
Add variableHeight argument to CarouselProvider that disables the ratio (#243)
* Add variableHeight argument to CarouselProvider that disables the ratio logic * Fix intedation * Rename the new flag to `intrinsicAxisSize` ` # Please enter the commit message for your changes. Lines starting * Use flex box to stretch all slides to the same size * Add example with different slide sizes * Fix intendations and add Test for Slider * Rename intrinsicHeight to isIntrinsicHeight; Add error condition for isIntrinsicHeight in vertical orientation
1 parent 30e3110 commit 17bed65

File tree

14 files changed

+181
-0
lines changed

14 files changed

+181
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,7 @@ Any remaining props not consumed by the component are passed directly to the roo
213213
| dragEnabled | boolean | true | No | Set to true to enable mouse dragging events |
214214
| visibleSlides | number | 1 | No | The number of slides to show at once. This number should be <= totalSlides |
215215
| infinite | boolean | false | No | Should the carousel continue or stop at the beginning or end of the slides |
216+
| isIntrinsicHeight | boolean | false | No | Disables the enforced height ratio, and instead uses the intrinsic height of the slides. This option can only be active in horizontal orientation, it will throw an error in vertical orientation. |
216217

217218
#### The CarouselProvider component creates the following pseudo HTML by default:
218219

‎src/App/App.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
Example10,
1313
Example11,
1414
Example12,
15+
Example13,
1516
} from './examples';
1617
import s from './style.scss';
1718

@@ -149,6 +150,7 @@ class DevelopmentApp extends React.Component {
149150
<option value="10">Carousel with custom spinner component.</option>
150151
<option value="11">Simple carousel with event callbacks on Slider.</option>
151152
<option value="12">Infinite Carousel</option>
153+
<option value="13">Using Intrinsic Axis Dimension</option>
152154
</select>
153155
</label>
154156
</p>
@@ -237,6 +239,14 @@ class DevelopmentApp extends React.Component {
237239
<Example12 />
238240
</section>
239241
)}
242+
243+
{(value === '0' || value === '13') && (
244+
<section id="example--13">
245+
<hr />
246+
<Example13 />
247+
</section>
248+
)}
249+
240250
</div>
241251
</div>
242252
</div>

‎src/App/examples/Example13/Example13.jsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import {
3+
ButtonBack, ButtonFirst, ButtonLast, ButtonNext, CarouselProvider, Slide, Slider,
4+
} from '../../..';
5+
6+
import s from '../../style.scss';
7+
8+
export default () => (
9+
<CarouselProvider
10+
visibleSlides={2}
11+
totalSlides={4}
12+
step={1}
13+
naturalSlideWidth={400}
14+
naturalSlideHeight={500}
15+
isIntrinsicHeight
16+
>
17+
<h2 className={s.headline}>With intrinsic axis dimension</h2>
18+
<p />
19+
<Slider className={s.slider}>
20+
<Slide index={0}>
21+
<h1>This is a test slide to demonstrate, how this affects height</h1>
22+
<p>
23+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
24+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
25+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
26+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
27+
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
28+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
29+
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
30+
</p>
31+
</Slide>
32+
<Slide index={1}>
33+
<h1>This is a test slide to demonstrate, how this affects height</h1>
34+
<p>
35+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
36+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
37+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
38+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
39+
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
40+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
41+
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
42+
</p>
43+
<h1>This is a test slide to demonstrate, how this affects height</h1>
44+
<p>
45+
lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
46+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et
47+
accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata
48+
sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing
49+
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
50+
sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita
51+
kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
52+
</p>
53+
</Slide>
54+
<Slide index={2}>
55+
<h1>This is a test slide to demonstrate, how this affects height</h1>
56+
<p>
57+
lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
58+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et
59+
accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata
60+
sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing
61+
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
62+
sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita
63+
kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
64+
</p>
65+
</Slide>
66+
<Slide index={2}>
67+
<h1>This is a test slide to demonstrate, how this affects height</h1>
68+
<p>
69+
lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
70+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et
71+
accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata
72+
sanctus est lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, consetetur sadipscing
73+
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
74+
sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita
75+
kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
76+
</p>
77+
</Slide>
78+
</Slider>
79+
<ButtonFirst>First</ButtonFirst>
80+
<ButtonBack>Back</ButtonBack>
81+
<ButtonNext>Next</ButtonNext>
82+
<ButtonLast>Last</ButtonLast>
83+
</CarouselProvider>
84+
);

‎src/App/examples/Example13/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Example13 from './Example13';
2+
3+
export default Example13;

‎src/App/examples/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ export { default as Example9 } from './Example9';
1010
export { default as Example10 } from './Example10';
1111
export { default as Example11 } from './Example11';
1212
export { default as Example12 } from './Example12';
13+
export { default as Example13 } from './Example13';

‎src/CarouselProvider/CarouselProvider.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const CarouselProvider = class CarouselProvider extends React.Component {
3030
dragEnabled: PropTypes.bool,
3131
visibleSlides: PropTypes.number,
3232
infinite: PropTypes.bool,
33+
isIntrinsicHeight: PropTypes.bool,
3334
};
3435

3536
static defaultProps = {
@@ -51,10 +52,14 @@ const CarouselProvider = class CarouselProvider extends React.Component {
5152
dragEnabled: true,
5253
visibleSlides: 1,
5354
infinite: false,
55+
isIntrinsicHeight: false,
5456
};
5557

5658
constructor(props) {
5759
super(props);
60+
if (props.isIntrinsicHeight && props.orientation !== 'horizontal') {
61+
throw Error('isIntrinsicHeight can only be used in "horizontal" orientation. See Readme for more information.');
62+
}
5863
const options = {
5964
currentSlide: props.currentSlide,
6065
disableAnimation: props.disableAnimation,
@@ -81,6 +86,7 @@ const CarouselProvider = class CarouselProvider extends React.Component {
8186
dragEnabled: props.dragEnabled,
8287
visibleSlides: props.visibleSlides,
8388
infinite: props.infinite,
89+
isIntrinsicHeight: props.isIntrinsicHeight,
8490
};
8591
this.carouselStore = new Store(options);
8692
}
@@ -179,6 +185,7 @@ const CarouselProvider = class CarouselProvider extends React.Component {
179185
dragEnabled,
180186
visibleSlides,
181187
infinite,
188+
isIntrinsicHeight,
182189
...filteredProps
183190
} = this.props;
184191

‎src/CarouselProvider/__tests__/CarouselProvider.test.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,4 +95,19 @@ describe('<CarouselProvider />', () => {
9595
false,
9696
);
9797
});
98+
it('should correctly set store variable when using isIntrinsicHeight', async () => {
99+
const wrapper = mount(
100+
<CarouselProvider {...props} isIntrinsicHeight>
101+
test
102+
</CarouselProvider>,
103+
);
104+
expect(wrapper.instance().getStore().state.isIntrinsicHeight).toBe(true);
105+
});
106+
it('should throw an error, when tryng to use isIntrinsicHeight in vertical orientation', async () => {
107+
expect(() => shallow(
108+
<CarouselProvider {...props} isIntrinsicHeight orientation="vertical">
109+
test
110+
</CarouselProvider>,
111+
)).toThrow(Error);
112+
});
98113
});

‎src/Slide/Slide.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const Slide = class Slide extends React.PureComponent {
2525
tag: PropTypes.string,
2626
totalSlides: PropTypes.number.isRequired,
2727
visibleSlides: PropTypes.number.isRequired,
28+
isIntrinsicHeight: PropTypes.bool,
2829
}
2930

3031
static defaultProps = {
@@ -40,6 +41,7 @@ const Slide = class Slide extends React.PureComponent {
4041
style: {},
4142
tabIndex: null,
4243
tag: 'li',
44+
isIntrinsicHeight: false,
4345
}
4446

4547
constructor(props) {
@@ -103,6 +105,7 @@ const Slide = class Slide extends React.PureComponent {
103105
tag: Tag,
104106
totalSlides,
105107
visibleSlides,
108+
isIntrinsicHeight,
106109
...props
107110
} = this.props;
108111

@@ -116,6 +119,18 @@ const Slide = class Slide extends React.PureComponent {
116119
tempStyle.paddingBottom = pct((naturalSlideHeight * 100) / naturalSlideWidth);
117120
}
118121

122+
const innerStyle = {};
123+
if (isIntrinsicHeight) {
124+
if (orientation === 'horizontal') {
125+
tempStyle.height = 'unset';
126+
} else {
127+
tempStyle.width = 'unset';
128+
}
129+
tempStyle.position = 'unset';
130+
tempStyle.paddingBottom = 'unset';
131+
innerStyle.position = 'unset';
132+
}
133+
119134
const newStyle = Object.assign({}, tempStyle, style);
120135

121136
const isVisible = this.isVisible();
@@ -156,6 +171,7 @@ const Slide = class Slide extends React.PureComponent {
156171
<InnerTag
157172
ref={(el) => { this.innerTagRef = el; }}
158173
className={newInnerClassName}
174+
style={innerStyle}
159175
>
160176
{this.props.children}
161177
{this.renderFocusRing()}

‎src/Slide/__tests__/Slide.test.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,28 @@ describe('<Slide />', () => {
130130
const wrapper = shallow(<Slide {...props} tabIndex={7} />);
131131
expect(wrapper.find('.slide').prop('tabIndex')).toBe(7);
132132
});
133+
it('should correctly set styles, if isIntrinsicHeight is set', () => {
134+
// this is for testing only.
135+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
136+
const wrapper = shallow(<Slide {...props} isIntrinsicHeight />);
137+
const slideStyle = wrapper.find('.slide').prop('style');
138+
expect(slideStyle.paddingBottom).toBe('unset');
139+
expect(slideStyle.height).toBe('unset');
140+
expect(slideStyle.position).toBe('unset');
141+
142+
const innerSlideStyle = wrapper.find('.carousel__inner-slide').prop('style');
143+
expect(innerSlideStyle.position).toBe('unset');
144+
});
145+
it('should correctly set styles, in vertical mode if isIntrinsicHeight is set', () => {
146+
// this is for testing only.
147+
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
148+
const wrapper = shallow(<Slide {...props} orientation="vertical" isIntrinsicHeight />);
149+
const slideStyle = wrapper.find('.slide').prop('style');
150+
expect(slideStyle.paddingBottom).toBe('unset');
151+
expect(slideStyle.width).toBe('unset');
152+
expect(slideStyle.position).toBe('unset');
153+
154+
const innerSlideStyle = wrapper.find('.carousel__inner-slide').prop('style');
155+
expect(innerSlideStyle.position).toBe('unset');
156+
});
133157
});

‎src/Slide/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ export default WithStore(Slide, state => ({
99
slideSize: state.slideSize,
1010
totalSlides: state.totalSlides,
1111
visibleSlides: state.visibleSlides,
12+
isIntrinsicHeight: state.isIntrinsicHeight,
1213
}));

‎src/Slider/Slider.jsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const Slider = class Slider extends React.Component {
5555
}),
5656
trayTag: PropTypes.string,
5757
visibleSlides: PropTypes.number,
58+
isIntrinsicHeight: PropTypes.bool,
5859
}
5960

6061
static defaultProps = {
@@ -75,6 +76,7 @@ const Slider = class Slider extends React.Component {
7576
trayProps: {},
7677
trayTag: 'ul',
7778
visibleSlides: 1,
79+
isIntrinsicHeight: false,
7880
}
7981

8082
static slideSizeInPx(orientation, sliderTrayWidth, sliderTrayHeight, totalSlides) {
@@ -554,6 +556,7 @@ const Slider = class Slider extends React.Component {
554556
trayProps,
555557
trayTag: TrayTag,
556558
visibleSlides,
559+
isIntrinsicHeight,
557560
...props
558561
} = this.props;
559562

@@ -579,12 +582,19 @@ const Slider = class Slider extends React.Component {
579582
trayStyle.transition = 'none';
580583
}
581584

585+
if (isIntrinsicHeight) {
586+
trayStyle.display = 'flex';
587+
trayStyle.alignItems = 'stretch';
588+
}
589+
582590
if (orientation === 'vertical') {
583591
trayStyle.transform = `translateY(${trans}) translateY(${this.state.deltaY}px)`;
584592
trayStyle.width = pct(100);
593+
trayStyle.flexDirection = 'column';
585594
} else {
586595
trayStyle.width = pct(slideTraySize);
587596
trayStyle.transform = `translateX(${trans}) translateX(${this.state.deltaX}px)`;
597+
trayStyle.flexDirection = 'row';
588598
}
589599

590600
const sliderClasses = cn([

‎src/Slider/__tests__/Slider.test.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1055,5 +1055,11 @@ describe('<Slider />', () => {
10551055
expect(divProps.step).toBeUndefined();
10561056
expect(divProps.infinite).toBeUndefined();
10571057
});
1058+
it('should correctly set styles, if isIntrinsicHeight is set', () => {
1059+
const wrapper = shallow(<Slider {...props} orientation="vertical" isIntrinsicHeight />);
1060+
const sliderStyle = wrapper.find('.sliderTray').prop('style');
1061+
expect(sliderStyle.display).toBe('flex');
1062+
expect(sliderStyle.alignItems).toBe('stretch');
1063+
});
10581064
});
10591065
});

‎src/Slider/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,5 @@ export default WithStore(Slider, state => ({
2525
totalSlides: state.totalSlides,
2626
touchEnabled: state.touchEnabled,
2727
visibleSlides: state.visibleSlides,
28+
isIntrinsicHeight: state.isIntrinsicHeight,
2829
}));

‎typings/index.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ interface CarouselState {
5050
readonly dragEnabled: boolean
5151
readonly visibleSlides: number
5252
readonly infinite: boolean
53+
readonly isIntrinsicHeight: boolean
5354
}
5455

5556
interface CarouselStoreInterface {
@@ -92,6 +93,7 @@ interface CarouselProviderProps {
9293
readonly dragEnabled?: CarouselState['dragEnabled']
9394
readonly visibleSlides?: CarouselState['visibleSlides']
9495
readonly infinite?: CarouselState['infinite']
96+
readonly isIntrinsicHeight?: CarouselState['isIntrinsicHeight']
9597
}
9698

9799
type CarouselProviderInterface = React.ComponentClass<CarouselProviderProps>

0 commit comments

Comments
 (0)