@flexis/ui
Version:
Styleless React Components
133 lines • 10.1 kB
JavaScript
import { __decorate } from "tslib";
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import { style, classes } from './ScrollArea.st.css';
let ScrollArea = /** @class */ (() => {
class ScrollArea extends PureComponent {
constructor() {
super(...arguments);
this.state = {
topShadow: false,
rightShadow: false,
bottomShadow: false,
leftShadow: false
};
this.isHiddenScrollbar = false;
this.scroller = null;
}
render() {
const { className, ignoreTopShadow, ignoreRightShadow, ignoreBottomShadow, ignoreLeftShadow, hideXScrollbar, hideYScrollbar, children, ...props } = this.props;
const { topShadow, rightShadow, bottomShadow, leftShadow } = this.state;
return (<div {...omit(props, ['y2xScroll'])} className={style(classes.root, className)}>
<div ref={this.onScrollerRef} className={style(classes.scroller, {
hideXScrollbar,
hideYScrollbar
})} onScroll={this.onScroll} onWheel={this.onWheel}>
{children}
</div>
<div className={style(classes.shadow, {
'top': true,
'active': topShadow && !ignoreTopShadow
})}/>
<div className={style(classes.shadow, {
'right': true,
'active': rightShadow && !ignoreRightShadow
})}/>
<div className={style(classes.shadow, {
'bottom': true,
'active': bottomShadow && !ignoreBottomShadow
})}/>
<div className={style(classes.shadow, {
'left': true,
'active': leftShadow && !ignoreLeftShadow
})}/>
</div>);
}
componentDidUpdate() {
this.setShadow(this.scroller);
this.hideScroll(this.scroller);
}
onScrollerRef(ref) {
this.scroller = ref;
this.setShadow(ref);
this.hideScroll(ref);
}
onScroll({ currentTarget }) {
this.setShadow(currentTarget);
}
onWheel(event) {
const { isHiddenScrollbar } = this;
const { y2xScroll } = this.props;
const { deltaY, currentTarget } = event;
if (y2xScroll && !isHiddenScrollbar) {
event.preventDefault();
currentTarget.scrollLeft -= deltaY;
}
}
setShadow(element) {
if (!element) {
return;
}
const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = element;
this.setState(() => ({
topShadow: scrollTop > 0,
rightShadow: scrollLeft + clientWidth < scrollWidth,
bottomShadow: scrollTop + clientHeight < scrollHeight,
leftShadow: scrollLeft > 0
}));
}
hideScroll(element) {
if (!element) {
return;
}
const { hideXScrollbar, hideYScrollbar } = this.props;
const xOffset = element.offsetHeight - element.clientHeight;
const yOffset = element.offsetWidth - element.clientWidth;
this.isHiddenScrollbar = !xOffset;
if (hideXScrollbar) {
element.style.marginBottom = `-${xOffset}px`;
}
else {
element.style.marginBottom = '0';
}
if (hideYScrollbar) {
element.style.marginRight = `-${yOffset}px`;
}
else {
element.style.marginRight = '0';
}
}
}
ScrollArea.propTypes = {
ignoreTopShadow: PropTypes.bool,
ignoreRightShadow: PropTypes.bool,
ignoreBottomShadow: PropTypes.bool,
ignoreLeftShadow: PropTypes.bool,
hideXScrollbar: PropTypes.bool,
hideYScrollbar: PropTypes.bool,
y2xScroll: PropTypes.bool,
children: PropTypes.node
};
ScrollArea.defaultProps = {
ignoreTopShadow: false,
ignoreRightShadow: false,
ignoreBottomShadow: false,
ignoreLeftShadow: false,
hideXScrollbar: false,
hideYScrollbar: false,
y2xScroll: false
};
__decorate([
Bind()
], ScrollArea.prototype, "onScrollerRef", null);
__decorate([
Bind()
], ScrollArea.prototype, "onScroll", null);
__decorate([
Bind()
], ScrollArea.prototype, "onWheel", null);
return ScrollArea;
})();
export default ScrollArea;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsQXJlYS5qc3giLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9TY3JvbGxBcmVhL1Njcm9sbEFyZWEudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUtiLGFBQWEsRUFDYixNQUFNLE9BQU8sQ0FBQztBQUNmLE9BQU8sU0FBUyxNQUFNLFlBQVksQ0FBQztBQUNuQyxPQUFPLEVBRU4sSUFBSSxFQUNKLElBQUksRUFDSixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ04sS0FBSyxFQUNMLE9BQU8sRUFDUCxNQUFNLHFCQUFxQixDQUFDO0FBeUI3QjtJQUFBLE1BQXFCLFVBQVcsU0FBUSxhQUE2QjtRQUFyRTs7WUF1QkMsVUFBSyxHQUFHO2dCQUNQLFNBQVMsRUFBSyxLQUFLO2dCQUNuQixXQUFXLEVBQUcsS0FBSztnQkFDbkIsWUFBWSxFQUFFLEtBQUs7Z0JBQ25CLFVBQVUsRUFBSSxLQUFLO2FBQ25CLENBQUM7WUFFTSxzQkFBaUIsR0FBRyxLQUFLLENBQUM7WUFDMUIsYUFBUSxHQUFtQixJQUFJLENBQUM7UUF5SnpDLENBQUM7UUF2SkEsTUFBTTtZQUVMLE1BQU0sRUFDTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLGlCQUFpQixFQUNqQixrQkFBa0IsRUFDbEIsZ0JBQWdCLEVBQ2hCLGNBQWMsRUFDZCxjQUFjLEVBQ2QsUUFBUSxFQUNSLEdBQUcsS0FBSyxFQUNSLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztZQUNmLE1BQU0sRUFDTCxTQUFTLEVBQ1QsV0FBVyxFQUNYLFlBQVksRUFDWixVQUFVLEVBQ1YsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1lBRWYsT0FBTyxDQUNOLENBQUMsR0FBRyxDQUNILElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FDL0IsU0FBUyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FB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