From 8cb913f36a3820341c07383be86c5030ab107483 Mon Sep 17 00:00:00 2001 From: sizeight Date: Wed, 19 Oct 2016 13:15:44 +0200 Subject: [PATCH 1/6] issue #59 ScrollArea tests fail --- test/scrollArea.spec.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/test/scrollArea.spec.js b/test/scrollArea.spec.js index 4d79542..b0337e6 100644 --- a/test/scrollArea.spec.js +++ b/test/scrollArea.spec.js @@ -50,14 +50,14 @@ function getRendererComponentInstance(renderer){ return renderer._instance? renderer._instance._instance : null; } -describe('ScrolLArea component', () => { - it('Should render children and both scrollbars', () => { +describe('ScrollArea component', () => { + it('Should render children and both scrollbars', () => { let {scrollbars, content} = setupComponentWithMockedSizes(); expect(scrollbars.length).toBe(2); expect(content).toEqualJSX( -
{}} - style={undefined} +
{}} + style={{}} className="scrollarea-content " onTouchStart={() => {}} onTouchMove={() => {}} @@ -82,11 +82,19 @@ describe('ScrolLArea component', () => { expect(scrollbar.props.type).toBe('horizontal'); }); - it('Should change content element class when contentClassName porp is used', () => { + it('Should change content element class when contentClassName prop is used', () => { let {content} = setup({contentClassName: 'test-class'}); expect(content.props.className).toInclude('test-class'); }); + + it('Should have proper element style when contentStyle prop is used', () => { + let {content, instance} = setupComponentWithMockedSizes({ + contentStyle: {test: 'contentStyle'}, + }); + + expect(content.props.style).toEqual({ test: 'contentStyle' }); + }); it('Should have proper scrollbars styles', () => { let {content, scrollbars} = setupComponentWithMockedSizes({ From 2587ef7f097dd07d491cafcf513d413bb6571429 Mon Sep 17 00:00:00 2001 From: sizeight Date: Wed, 19 Oct 2016 13:18:22 +0200 Subject: [PATCH 2/6] issue #59 ScrollArea fixed --- src/js/ScrollArea.jsx | 29 ++++++++++++++++++----------- test/scrollBar.spec.js | 2 +- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/js/ScrollArea.jsx b/src/js/ScrollArea.jsx index 63aeb2c..2955b2c 100644 --- a/src/js/ScrollArea.jsx +++ b/src/js/ScrollArea.jsx @@ -134,20 +134,27 @@ export default class ScrollArea extends React.Component{ let springifiedContentStyle = withMotion ? modifyObjValues(contentStyle, x => spring(x)) : contentStyle; return ( - - { style => -
this.wrapper = x} style={this.props.style} className={classes} onWheel={this.handleWheel.bind(this)}> -
this.content = x} - style={style} + + { style => +
this.wrapper = x} + className={classes} + style={this.props.style} + onWheel={this.handleWheel.bind(this)} + > +
this.content = x} + style={{ ...style, ...this.props.contentStyle }} className={contentClasses} onTouchStart={this.handleTouchStart.bind(this)} onTouchMove={this.handleTouchMove.bind(this)} - onTouchEnd={this.handleTouchEnd.bind(this)}> - {children} -
- {scrollbarY} - {scrollbarX} -
+ onTouchEnd={this.handleTouchEnd.bind(this)} + > + {children} +
+ {scrollbarY} + {scrollbarX} +
} ); diff --git a/test/scrollBar.spec.js b/test/scrollBar.spec.js index 54f17a3..2f996f4 100644 --- a/test/scrollBar.spec.js +++ b/test/scrollBar.spec.js @@ -250,4 +250,4 @@ describe('ScrollBar component', () => { expect(handlePositionChangeSpy.calls.length).toEqual(1); expect(handlePositionChangeSpy.calls[0].arguments).toEqual([200]); }); -}); \ No newline at end of file +}); From 5a6c417094fb1ddeb34141ac2d41aad2634981d7 Mon Sep 17 00:00:00 2001 From: sizeight Date: Wed, 19 Oct 2016 13:19:02 +0200 Subject: [PATCH 3/6] issue #59 Scrollbar tests fail --- test/scrollBar.spec.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/test/scrollBar.spec.js b/test/scrollBar.spec.js index 2f996f4..38c434b 100644 --- a/test/scrollBar.spec.js +++ b/test/scrollBar.spec.js @@ -37,12 +37,48 @@ describe('ScrollBar component', () => { expect(wrapper.props.className).toInclude('vertical'); }); + it('Vertical should have proper container styles', () => { + let {wrapper} = setupScrollbar({ + type: 'vertical', + containerStyle: {test: 'containerStyle'}, + }); + + expect(wrapper.props.style).toEqual({test: 'containerStyle'}); + }); + + it('Vertical should have proper scrollbar styles', () => { + let {content} = setupScrollbar({ + type: 'vertical', + scrollbarStyle: {test: 'scrollbarStyle'}, + }); + + expect(content.props.style).toEqual({test: 'scrollbarStyle'}); + }); + it('Horizontal should have proper class', () => { let {wrapper} = setupScrollbar({type: 'horizontal'}); expect(wrapper.props.className).toInclude('horizontal'); }); + it('Horizontal should have proper container styles', () => { + let {wrapper} = setupScrollbar({ + type: 'horizontal', + containerStyle: {test: 'containerStyle'}, + }); + + expect(wrapper.props.style).toEqual({test: 'containerStyle'}); + }); + + it('Horizontal should have proper scrollbar styles', () => { + let {content} = setupScrollbar({ + type: 'horizontal', + scrollbarStyle: {test: 'scrollbarStyle'}, + }); + + expect(content.props.style).toEqual({test: 'scrollbarStyle'}); + }); + it('ScrollBar should be in proper position', () => { let {instance} = setupScrollbar({ realSize: 400, From 09ddee3eaff27740b25932983c8db5c1a264936e Mon Sep 17 00:00:00 2001 From: sizeight Date: Wed, 19 Oct 2016 13:19:43 +0200 Subject: [PATCH 4/6] issue #59 Scrollbar fixed --- src/js/Scrollbar.jsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/js/Scrollbar.jsx b/src/js/Scrollbar.jsx index 64afa80..5a4d2fe 100644 --- a/src/js/Scrollbar.jsx +++ b/src/js/Scrollbar.jsx @@ -68,18 +68,19 @@ class ScrollBar extends React.Component { let scrollbarClasses = `scrollbar-container ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`; return ( - - { style => -
+ { style => +
{ this.scrollbarContainer = x}}> - -
this.scrollbarContainer = x } + > +
-
+ />
} From 4cd8f2fd8ec9f5cf814c135be80edbe606c95091 Mon Sep 17 00:00:00 2001 From: sizeight Date: Thu, 8 Dec 2016 13:32:28 +0200 Subject: [PATCH 5/6] fixed test --- test/scrollArea.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/scrollArea.spec.js b/test/scrollArea.spec.js index 0d1997d..218205c 100644 --- a/test/scrollArea.spec.js +++ b/test/scrollArea.spec.js @@ -73,7 +73,7 @@ describe('ScrollArea component', () => { expect(scrollbars.length).toBe(2); expect(content).toEqualJSX(
{}} - style={undefined} + style={{}} tabIndex={100} className="scrollarea-content " onTouchStart={() => {}} From 9dd979bfde29eaaba313c8373689a06a0204e987 Mon Sep 17 00:00:00 2001 From: sizeight Date: Wed, 14 Dec 2016 14:38:41 +0200 Subject: [PATCH 6/6] override with motion style --- src/js/ScrollArea.jsx | 2 +- src/js/Scrollbar.jsx | 30 +++++++++++++++--------------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/js/ScrollArea.jsx b/src/js/ScrollArea.jsx index 80b3a0e..275ed5e 100644 --- a/src/js/ScrollArea.jsx +++ b/src/js/ScrollArea.jsx @@ -149,7 +149,7 @@ export default class ScrollArea extends React.Component { >
this.content = x} - style={{ ...style, ...this.props.contentStyle }} + style={{ ...this.props.contentStyle, ...style }} className={contentClasses} onTouchStart={this.handleTouchStart.bind(this)} onTouchMove={this.handleTouchMove.bind(this)} diff --git a/src/js/Scrollbar.jsx b/src/js/Scrollbar.jsx index c9fbd9e..98258d4 100644 --- a/src/js/Scrollbar.jsx +++ b/src/js/Scrollbar.jsx @@ -26,7 +26,7 @@ class ScrollBar extends React.Component { if (this.props.ownerDocument) { this.props.ownerDocument.addEventListener("mousemove", this.bindedHandleMouseMove); this.props.ownerDocument.addEventListener("mouseup", this.bindedHandleMouseUp); - } + } } componentWillReceiveProps(nextProps){ @@ -42,16 +42,16 @@ class ScrollBar extends React.Component { calculateFractionalPosition(realContentSize, containerSize, contentPosition){ let relativeSize = realContentSize - containerSize; - + return 1 - ((relativeSize - contentPosition) / relativeSize); } calculateState(props){ - let fractionalPosition = this.calculateFractionalPosition(props.realSize, props.containerSize, props.position); + let fractionalPosition = this.calculateFractionalPosition(props.realSize, props.containerSize, props.position); let proportionalToPageScrollSize = props.containerSize * props.containerSize / props.realSize; let scrollSize = proportionalToPageScrollSize < props.minScrollSize ? props.minScrollSize : proportionalToPageScrollSize; - let scrollPosition = (props.containerSize - scrollSize) * fractionalPosition; + let scrollPosition = (props.containerSize - scrollSize) * fractionalPosition; return { scrollSize: scrollSize, position: Math.round(scrollPosition) @@ -65,7 +65,7 @@ class ScrollBar extends React.Component { let scrollStyles = this.createScrollStyles(); let springifiedScrollStyles = smoothScrolling ? modifyObjValues(scrollStyles, x => spring(x)) : scrollStyles; - let scrollbarClasses = `scrollbar-container ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`; + let scrollbarClasses = `scrollbar-container ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`; return ( @@ -78,7 +78,7 @@ class ScrollBar extends React.Component { >
@@ -86,24 +86,24 @@ class ScrollBar extends React.Component { ); } - + handleScrollBarContainerClick(e) { - e.preventDefault(); + e.preventDefault(); let multiplier = this.computeMultiplier(); let clientPosition = this.isVertical() ? e.clientY : e.clientX; let { top, left } = this.scrollbarContainer.getBoundingClientRect(); - let clientScrollPosition = this.isVertical() ? top : left; - + let clientScrollPosition = this.isVertical() ? top : left; + let position = clientPosition - clientScrollPosition; let proportionalToPageScrollSize = this.props.containerSize * this.props.containerSize / this.props.realSize; - + this.setState({isDragging: true, lastClientPosition: clientPosition }); this.props.onPositionChange((position - proportionalToPageScrollSize / 2) / multiplier); } handleMouseMoveForHorizontal(e){ let multiplier = this.computeMultiplier(); - + if(this.state.isDragging){ e.preventDefault(); let deltaX = this.state.lastClientPosition - e.clientX; @@ -114,7 +114,7 @@ class ScrollBar extends React.Component { handleMouseMoveForVertical(e){ let multiplier = this.computeMultiplier(); - + if(this.state.isDragging){ e.preventDefault(); let deltaY = this.state.lastClientPosition - e.clientY; @@ -150,11 +150,11 @@ class ScrollBar extends React.Component { }; } } - + computeMultiplier(){ return (this.props.containerSize) / this.props.realSize; } - + isVertical(){ return this.props.type === 'vertical'; }