Skip to content

Commit

Permalink
drop es6 classes
Browse files Browse the repository at this point in the history
  • Loading branch information
Malte W committed Oct 4, 2015
1 parent 3783114 commit 1f8d25d
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 60 deletions.
21 changes: 11 additions & 10 deletions examples/simple/components/App.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

91 changes: 41 additions & 50 deletions src/Scrollbars.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component, PropTypes, cloneElement } from 'react';
import React, { createClass, PropTypes, cloneElement } from 'react';
import addClass from './utils/addClass';
import removeClass from './utils/removeClass';
import addStyleSheet from './utils/addStyleSheet';
Expand Down Expand Up @@ -78,73 +78,64 @@ function getDefaultView({ style, ...props }) {
return <div style={finalStyle} {...props} />;
}

export default class Scrollbars extends Component {
export default createClass({

static propTypes = {
displayName: 'Scrollbars',

propTypes: {
scrollbarHorizontal: PropTypes.func,
scrollbarVertical: PropTypes.func,
thumbHorizontal: PropTypes.func,
thumbVertical: PropTypes.func,
view: PropTypes.func,
onScroll: PropTypes.func
};

static defaultProps = {
scrollbarHorizontal: getDefaultScrollbarHorizontal,
scrollbarVertical: getDefaultScrollbarVertical,
thumbHorizontal: getDefaultThumbHorizontal,
thumbVertical: getDefaultThumbVertical,
view: getDefaultView
};
},

constructor(props, context) {
super(props, context);
getDefaultProps() {
return {
scrollbarHorizontal: getDefaultScrollbarHorizontal,
scrollbarVertical: getDefaultScrollbarVertical,
thumbHorizontal: getDefaultThumbHorizontal,
thumbVertical: getDefaultThumbVertical,
view: getDefaultView
};
},

componentWillMount() {
addStyleSheet(stylesheet);
if (SCROLLBAR_WIDTH === false) {
SCROLLBAR_WIDTH = getScrollbarWidth(classnames.testScrollbar);
}

this.bindHandlers();
this.needsUpdate = true;
this.state = {
},

getInitialState() {
return {
x: 0,
y: 0,
width: '100%',
height: '100%',
heightPercentageInner: 100,
widthPercentageInner: 100
};
}
},

componentDidMount() {
this.addListeners();
this.update();
}
},

componentWillReceiveProps() {
this.needsUpdate = true;
}
},

componentDidUpdate() {
this.update();
}
},

componentWillUnmount() {
this.removeListeners();
}

bindHandlers() {
this.update = this.update.bind(this);
this.handleScroll = this.handleScroll.bind(this);
this.handleVerticalTrackMouseDown = this.handleVerticalTrackMouseDown.bind(this);
this.handleHorizontalTrackMouseDown = this.handleHorizontalTrackMouseDown.bind(this);
this.handleVerticalThumbMouseDown = this.handleVerticalThumbMouseDown.bind(this);
this.handleHorizontalThumbMouseDown = this.handleHorizontalThumbMouseDown.bind(this);
this.handleDocumentMouseUp = this.handleDocumentMouseUp.bind(this);
this.handleDocumentMouseMove = this.handleDocumentMouseMove.bind(this);
this.handleWindowResize = this.handleWindowResize.bind(this);
}
},

addListeners() {
this.refs.view.addEventListener('scroll', this.handleScroll);
Expand All @@ -154,7 +145,7 @@ export default class Scrollbars extends Component {
this.refs.thumbHorizontal.addEventListener('mousedown', this.handleHorizontalThumbMouseDown);
document.addEventListener('mouseup', this.handleDocumentMouseUp);
window.addEventListener('resize', this.handleWindowResize);
}
},

removeListeners() {
this.refs.view.removeEventListener('scroll', this.handleScroll);
Expand All @@ -164,7 +155,7 @@ export default class Scrollbars extends Component {
this.refs.thumbHorizontal.removeEventListener('mousedown', this.handleHorizontalThumbMouseDown);
document.removeEventListener('mouseup', this.handleDocumentMouseUp);
window.removeEventListener('resize', this.handleWindowResize);
}
},

getPosition($view = this.refs.view) {
const scrollTop = $view.scrollTop;
Expand All @@ -183,14 +174,14 @@ export default class Scrollbars extends Component {
left: (scrollLeft / (scrollWidth - clientWidth)) || 0,
top: (scrollTop / (scrollHeight - clientHeight)) || 0
};
}
},

getInnerSizePercentage($view = this.refs.view) {
return {
widthPercentageInner: $view.clientWidth * 100 / $view.scrollWidth,
heightPercentageInner: $view.clientHeight * 100 / $view.scrollHeight
};
}
},

update() {
if (SCROLLBAR_WIDTH === 0) return;
Expand All @@ -203,15 +194,15 @@ export default class Scrollbars extends Component {
...sizeInnerPercentage,
x, y
});
}
},

handleScroll(event) {
const position = this.getPosition();
const { x, y, ...values } = position;
const { onScroll } = this.props;
if (onScroll) onScroll(event, values);
this.setState({x, y});
}
},

handleVerticalTrackMouseDown(event) {
const $thumb = this.refs.thumbVertical;
Expand All @@ -221,7 +212,7 @@ export default class Scrollbars extends Component {
const thumbHalf = $thumb.offsetHeight / 2;
const thumbPositionPercentage = (offset - thumbHalf) * 100 / $bar.offsetHeight;
$view.scrollTop = thumbPositionPercentage * $view.scrollHeight / 100;
}
},

handleHorizontalTrackMouseDown() {
const $thumb = this.refs.thumbHorizontal;
Expand All @@ -231,23 +222,23 @@ export default class Scrollbars extends Component {
const thumbHalf = $thumb.offsetWidth / 2;
const thumbPositionPercentage = (offset - thumbHalf) * 100 / $bar.offsetWidth;
$view.scrollLeft = thumbPositionPercentage * $view.scrollWidth / 100;
}
},

handleVerticalThumbMouseDown(event) {
this.dragStart(event);
const { currentTarget, clientY } = event;
this.prevPageY = (currentTarget.offsetHeight - (clientY - currentTarget.getBoundingClientRect().top));
}
},

handleHorizontalThumbMouseDown(event) {
this.dragStart(event);
const { currentTarget, clientX } = event;
this.prevPageX = (currentTarget.offsetWidth - (clientX - currentTarget.getBoundingClientRect().left));
}
},

handleDocumentMouseUp() {
this.dragEnd();
}
},

handleDocumentMouseMove(event) {
if (this.cursorDown === false) return void 0;
Expand All @@ -273,28 +264,28 @@ export default class Scrollbars extends Component {
$view.scrollLeft = thumbPositionPercentage * $view.scrollWidth / 100;
return void 0;
}
}
},

handleWindowResize() {
this.needsUpdate = true;
this.update();
}
},

dragStart(event) {
event.stopImmediatePropagation();
this.cursorDown = true;
addClass(document.body, [classnames.disableSelection]);
document.addEventListener('mousemove', this.handleDocumentMouseMove);
document.onselectstart = returnFalse;
}
},

dragEnd() {
this.cursorDown = false;
this.prevPageX = this.prevPageY = 0;
removeClass(document.body, [classnames.disableSelection]);
document.removeEventListener('mousemove', this.handleDocumentMouseMove);
document.onselectstart = null;
}
},

render() {
const {
Expand Down Expand Up @@ -414,4 +405,4 @@ export default class Scrollbars extends Component {
</div>
);
}
}
});

0 comments on commit 1f8d25d

Please sign in to comment.