rc-horizontal-scroll
Version:
React Horizontal Scroll
105 lines • 4.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
class HorizontalScrollView extends React.Component {
constructor() {
super(...arguments);
this.isDown = false;
this.startX = 0;
this.scrollLeft = 0;
this.itemWidth = 0;
this.lastItemReached = false;
this.page = 1;
this.onScroll = () => {
this.checkIfLastItemIsReached();
};
this.onMouseDown = (e) => {
window.addEventListener("mouseup", this.onMouseUp);
window.addEventListener("mousemove", this.onMouseMove);
setTimeout(() => {
if (this.isDown) {
this.sliderRef.classList.add("rc__active");
}
}, 100);
this.startX = e.pageX - this.sliderRef.offsetLeft;
this.scrollLeft = this.sliderRef.scrollLeft;
this.isDown = true;
};
this.onMouseMove = (e) => {
e.preventDefault();
const { moveSpeed } = this.props;
this.sliderRef.classList.add("rc__active");
const x = e.pageX - this.sliderRef.offsetLeft;
const walk = (x - this.startX) * moveSpeed;
this.sliderRef.scrollLeft = this.scrollLeft - walk;
};
this.onMouseUp = () => {
window.removeEventListener("mouseup", this.onMouseUp);
window.removeEventListener("mousemove", this.onMouseMove);
this.sliderRef.classList.remove("rc__active");
this.isDown = false;
};
this.checkIfLastItemIsReached = () => {
if (this.lastItemReached)
return;
const { scrollLeft, offsetWidth, scrollWidth } = this.sliderRef;
if (scrollWidth - scrollLeft - offsetWidth - this.itemWidth < (1.3 * this.itemWidth)) {
this.lastItemReached = true;
this.page++;
this.props.onLastItemReached(this.page);
}
};
}
componentDidUpdate(prevProps) {
if (prevProps.items.length !== this.props.items.length) {
this.lastItemReached = false;
}
}
componentWillUnmount() {
window.removeEventListener("mouseup", this.onMouseUp);
window.removeEventListener("mousemove", this.onMouseMove);
this.sliderRef.removeEventListener('scroll', this.onScroll);
}
render() {
const { items, uniqueProp, ItemComponent, spaceBetweenItems, defaultSpace, itemComponentProps } = this.props;
const itemsCount = items.length;
return (React.createElement(React.Fragment, null,
React.createElement("style", { dangerouslySetInnerHTML: {
__html: `
.rc__horizontal-scroll::-webkit-scrollbar {
display: none;
}
`
} }),
React.createElement("div", { className: "rc__horizontal-scroll", style: {
display: "flex",
overflowX: "auto",
maxWidth: "none",
msOverflowStyle: "none",
userSelect: "none"
}, onMouseDown: this.onMouseDown, onScroll: this.onScroll, ref: ref => {
if (!ref)
return;
this.sliderRef = ref;
} }, items.map((item, index) => (React.createElement("div", { key: "rc-slide-" + (item[uniqueProp] || index), className: 'rc__item-container', style: {
paddingRight: index === (itemsCount - 1) ? defaultSpace : spaceBetweenItems,
maxWidth: 'none',
paddingLeft: index === 0 ? defaultSpace : undefined,
}, ref: ref => {
if (!index && ref)
this.itemWidth = ref.offsetWidth;
} },
React.createElement(ItemComponent, { parentProps: itemComponentProps, item: item, index: index })))))));
}
}
exports.HorizontalScrollView = HorizontalScrollView;
HorizontalScrollView.defaultProps = {
items: [],
ItemComponent: () => { },
spaceBetweenItems: "20px",
moveSpeed: 1.5,
onLastItemReached: () => { },
defaultSpace: "20px",
itemComponentProps: {}
};
//# sourceMappingURL=HorizontalScroll.js.map