Skip to content

Commit 249d5e0

Browse files
author
Malte W
committed
fix checksum mismatch when using autoheight. closes malte-wessel#52 
1 parent 6b7edaa commit 249d5e0

File tree

2 files changed

+90
-33
lines changed

2 files changed

+90
-33
lines changed

‎src/Scrollbars/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
viewStyleDefault,
1414
viewStyleAutoHeight,
1515
viewStyleUniversalInitial,
16+
viewStyleAutoHeightUniversalInitial,
1617
trackHorizontalStyleDefault,
1718
trackVerticalStyleDefault,
1819
thumbHorizontalStyleDefault,
@@ -563,6 +564,12 @@ export default createClass({
563564
? `calc(${autoHeightMax} + ${scrollbarWidth}px)`
564565
: autoHeightMax + scrollbarWidth
565566
}),
567+
// Override min/max height for initial universal rendering
568+
...((autoHeight && universal && !didMountUniversal) && {
569+
minHeight: autoHeightMin,
570+
maxHeight: autoHeightMax
571+
}),
572+
// Override
566573
...((universal && !didMountUniversal) && viewStyleUniversalInitial)
567574
};
568575

‎test/Scrollbars/universal.js

Lines changed: 83 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Scrollbars } from 'react-custom-scrollbars';
22
import { render, unmountComponentAtNode } from 'react-dom';
33
import React from 'react';
44

5-
export default function createTests() {
5+
export default function createTests(scrollbarWidth) {
66
let node;
77
beforeEach(() => {
88
node = document.createElement('div');
@@ -14,41 +14,91 @@ export default function createTests() {
1414
});
1515

1616
describe('universal', () => {
17-
describe('when rendered', () => {
18-
it('should hide overflow', done => {
19-
class ScrollbarsTest extends Scrollbars {
20-
// Override componentDidMount, so we can check, how the markup
21-
// looks like on the first rendering
22-
componentDidMount() {}
23-
}
24-
render((
25-
<ScrollbarsTest universal style={{ width: 100, height: 100 }}>
26-
<div style={{ width: 200, height: 200 }}/>
27-
</ScrollbarsTest>
28-
), node, function callback() {
29-
const { view, trackHorizontal, trackVertical } = this.refs;
30-
expect(view.style.position).toEqual('absolute');
31-
expect(view.style.overflow).toEqual('hidden');
32-
expect(view.style.top).toEqual('0px');
33-
expect(view.style.bottom).toEqual('0px');
34-
expect(view.style.left).toEqual('0px');
35-
expect(view.style.right).toEqual('0px');
36-
expect(trackHorizontal.style.display).toEqual('none');
37-
expect(trackVertical.style.display).toEqual('none');
38-
done();
17+
describe('default', () => {
18+
describe('when rendered', () => {
19+
it('should hide overflow', done => {
20+
class ScrollbarsTest extends Scrollbars {
21+
// Override componentDidMount, so we can check, how the markup
22+
// looks like on the first rendering
23+
componentDidMount() {}
24+
}
25+
render((
26+
<ScrollbarsTest universal style={{ width: 100, height: 100 }}>
27+
<div style={{ width: 200, height: 200 }}/>
28+
</ScrollbarsTest>
29+
), node, function callback() {
30+
const { view, trackHorizontal, trackVertical } = this.refs;
31+
expect(view.style.position).toEqual('absolute');
32+
expect(view.style.overflow).toEqual('hidden');
33+
expect(view.style.top).toEqual('0px');
34+
expect(view.style.bottom).toEqual('0px');
35+
expect(view.style.left).toEqual('0px');
36+
expect(view.style.right).toEqual('0px');
37+
expect(view.style.marginBottom).toEqual('0px');
38+
expect(view.style.marginRight).toEqual('0px');
39+
expect(trackHorizontal.style.display).toEqual('none');
40+
expect(trackVertical.style.display).toEqual('none');
41+
done();
42+
});
43+
});
44+
});
45+
describe('when componentDidMount', () => {
46+
it('should rerender', done => {
47+
render((
48+
<Scrollbars universal style={{ width: 100, height: 100 }}>
49+
<div style={{ width: 200, height: 200 }}/>
50+
</Scrollbars>
51+
), node, function callback() {
52+
const { view } = this.refs;
53+
expect(view.style.overflow).toEqual('scroll');
54+
expect(view.style.marginBottom).toEqual(`${-scrollbarWidth}px`);
55+
expect(view.style.marginRight).toEqual(`${-scrollbarWidth}px`);
56+
done();
57+
});
3958
});
4059
});
4160
});
42-
describe('when componentDidMount', () => {
43-
it('should rerender', done => {
44-
render((
45-
<Scrollbars universal style={{ width: 100, height: 100 }}>
46-
<div style={{ width: 200, height: 200 }}/>
47-
</Scrollbars>
48-
), node, function callback() {
49-
const { view } = this.refs;
50-
expect(view.style.overflow).toEqual('scroll');
51-
done();
61+
describe('when using autoHeight', () => {
62+
describe('when rendered', () => {
63+
it('should hide overflow', done => {
64+
class ScrollbarsTest extends Scrollbars {
65+
// Override componentDidMount, so we can check, how the markup
66+
// looks like on the first rendering
67+
componentDidMount() {}
68+
}
69+
render((
70+
<ScrollbarsTest universal autoHeight autoHeightMax={100}>
71+
<div style={{ width: 200, height: 200 }}/>
72+
</ScrollbarsTest>
73+
), node, function callback() {
74+
const { view, trackHorizontal, trackVertical } = this.refs;
75+
expect(view.style.position).toEqual('relative');
76+
expect(view.style.overflow).toEqual('hidden');
77+
expect(view.style.marginBottom).toEqual('0px');
78+
expect(view.style.marginRight).toEqual('0px');
79+
expect(view.style.minHeight).toEqual('0px');
80+
expect(view.style.maxHeight).toEqual('100px');
81+
expect(trackHorizontal.style.display).toEqual('none');
82+
expect(trackVertical.style.display).toEqual('none');
83+
done();
84+
});
85+
});
86+
});
87+
describe('when componentDidMount', () => {
88+
it('should rerender', done => {
89+
render((
90+
<Scrollbars universal autoHeight autoHeightMax={100}>
91+
<div style={{ width: 200, height: 200 }}/>
92+
</Scrollbars>
93+
), node, function callback() {
94+
const { view } = this.refs;
95+
expect(view.style.overflow).toEqual('scroll');
96+
expect(view.style.marginBottom).toEqual(`${-scrollbarWidth}px`);
97+
expect(view.style.marginRight).toEqual(`${-scrollbarWidth}px`);
98+
expect(view.style.minHeight).toEqual(`${scrollbarWidth}px`);
99+
expect(view.style.maxHeight).toEqual(`${100 + scrollbarWidth}px`);
100+
done();
101+
});
52102
});
53103
});
54104
});

0 commit comments

Comments
 (0)