@flexis/ui
Version:
Styleless React Components
223 lines (195 loc) • 13.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _helpers = require("../../helpers");
var _ScrollAreaSt = require("./ScrollArea.st.css");
var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent;
var ScrollArea =
/** @class */
function () {
var ScrollArea = /*#__PURE__*/function (_PureComponent) {
(0, _inherits2.default)(ScrollArea, _PureComponent);
function ScrollArea() {
var _this;
(0, _classCallCheck2.default)(this, ScrollArea);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ScrollArea).apply(this, arguments));
_this.state = {
topShadow: false,
rightShadow: false,
bottomShadow: false,
leftShadow: false
};
_this.isHiddenScrollbar = false;
_this.scroller = null;
return _this;
}
(0, _createClass2.default)(ScrollArea, [{
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
ignoreTopShadow = _this$props.ignoreTopShadow,
ignoreRightShadow = _this$props.ignoreRightShadow,
ignoreBottomShadow = _this$props.ignoreBottomShadow,
ignoreLeftShadow = _this$props.ignoreLeftShadow,
hideXScrollbar = _this$props.hideXScrollbar,
hideYScrollbar = _this$props.hideYScrollbar,
children = _this$props.children,
props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "ignoreTopShadow", "ignoreRightShadow", "ignoreBottomShadow", "ignoreLeftShadow", "hideXScrollbar", "hideYScrollbar", "children"]);
var _this$state = this.state,
topShadow = _this$state.topShadow,
rightShadow = _this$state.rightShadow,
bottomShadow = _this$state.bottomShadow,
leftShadow = _this$state.leftShadow;
return _createElement("div", (0, _extends2.default)({}, (0, _helpers.omit)(props, ['y2xScroll']), {
className: (0, _ScrollAreaSt.style)(_ScrollAreaSt.classes.root, className)
}), _createElement("div", {
ref: this.onScrollerRef,
className: (0, _ScrollAreaSt.style)(_ScrollAreaSt.classes.scroller, {
hideXScrollbar: hideXScrollbar,
hideYScrollbar: hideYScrollbar
}),
onScroll: this.onScroll,
onWheel: this.onWheel
}, children), _createElement("div", {
className: (0, _ScrollAreaSt.style)(_ScrollAreaSt.classes.shadow, {
'top': true,
'active': topShadow && !ignoreTopShadow
})
}), _createElement("div", {
className: (0, _ScrollAreaSt.style)(_ScrollAreaSt.classes.shadow, {
'right': true,
'active': rightShadow && !ignoreRightShadow
})
}), _createElement("div", {
className: (0, _ScrollAreaSt.style)(_ScrollAreaSt.classes.shadow, {
'bottom': true,
'active': bottomShadow && !ignoreBottomShadow
})
}), _createElement("div", {
className: (0, _ScrollAreaSt.style)(_ScrollAreaSt.classes.shadow, {
'left': true,
'active': leftShadow && !ignoreLeftShadow
})
}));
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.setShadow(this.scroller);
this.hideScroll(this.scroller);
}
}, {
key: "onScrollerRef",
value: function onScrollerRef(ref) {
this.scroller = ref;
this.setShadow(ref);
this.hideScroll(ref);
}
}, {
key: "onScroll",
value: function onScroll(_ref) {
var currentTarget = _ref.currentTarget;
this.setShadow(currentTarget);
}
}, {
key: "onWheel",
value: function onWheel(event) {
var isHiddenScrollbar = this.isHiddenScrollbar;
var y2xScroll = this.props.y2xScroll;
var deltaY = event.deltaY,
currentTarget = event.currentTarget;
if (y2xScroll && !isHiddenScrollbar) {
event.preventDefault();
currentTarget.scrollLeft -= deltaY;
}
}
}, {
key: "setShadow",
value: function setShadow(element) {
if (!element) {
return;
}
var scrollLeft = element.scrollLeft,
scrollTop = element.scrollTop,
scrollWidth = element.scrollWidth,
scrollHeight = element.scrollHeight,
clientWidth = element.clientWidth,
clientHeight = element.clientHeight;
this.setState(function () {
return {
topShadow: scrollTop > 0,
rightShadow: scrollLeft + clientWidth < scrollWidth,
bottomShadow: scrollTop + clientHeight < scrollHeight,
leftShadow: scrollLeft > 0
};
});
}
}, {
key: "hideScroll",
value: function hideScroll(element) {
if (!element) {
return;
}
var _this$props2 = this.props,
hideXScrollbar = _this$props2.hideXScrollbar,
hideYScrollbar = _this$props2.hideYScrollbar;
var xOffset = element.offsetHeight - element.clientHeight;
var yOffset = element.offsetWidth - element.clientWidth;
this.isHiddenScrollbar = !xOffset;
if (hideXScrollbar) {
element.style.marginBottom = "-".concat(xOffset, "px");
} else {
element.style.marginBottom = '0';
}
if (hideYScrollbar) {
element.style.marginRight = "-".concat(yOffset, "px");
} else {
element.style.marginRight = '0';
}
}
}]);
return ScrollArea;
}(PureComponent);
process.env.NODE_ENV !== "production" ? ScrollArea.propTypes = {
ignoreTopShadow: _propTypes.default.bool,
ignoreRightShadow: _propTypes.default.bool,
ignoreBottomShadow: _propTypes.default.bool,
ignoreLeftShadow: _propTypes.default.bool,
hideXScrollbar: _propTypes.default.bool,
hideYScrollbar: _propTypes.default.bool,
y2xScroll: _propTypes.default.bool,
children: _propTypes.default.node
} : void 0;
ScrollArea.defaultProps = {
ignoreTopShadow: false,
ignoreRightShadow: false,
ignoreBottomShadow: false,
ignoreLeftShadow: false,
hideXScrollbar: false,
hideYScrollbar: false,
y2xScroll: false
};
(0, _tslib.__decorate)([(0, _helpers.Bind)()], ScrollArea.prototype, "onScrollerRef", null);
(0, _tslib.__decorate)([(0, _helpers.Bind)()], ScrollArea.prototype, "onScroll", null);
(0, _tslib.__decorate)([(0, _helpers.Bind)()], ScrollArea.prototype, "onWheel", null);
return ScrollArea;
}();
var _default = ScrollArea;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Njcm9sbEFyZWEvU2Nyb2xsQXJlYS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBOztBQU9BOztBQUNBOztBQUtBOzs7OztBQTRCQSxJQUFBLFVBQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixVQUFyQjtBQUFBOztBQUFBLDBCQUFBO0FBQUE7O0FBQUE7O0FBdUJDLFlBQUEsS0FBQSxHQUFRO0FBQ1AsUUFBQSxTQUFTLEVBQUssS0FEUDtBQUVQLFFBQUEsV0FBVyxFQUFHLEtBRlA7QUFHUCxRQUFBLFlBQVksRUFBRSxLQUhQO0FBSVAsUUFBQSxVQUFVLEVBQUk7QUFKUCxPQUFSO0FBT1EsWUFBQSxpQkFBQSxHQUFvQixLQUFwQjtBQUNBLFlBQUEsUUFBQSxHQUEyQixJQUEzQjtBQS9CVDtBQXdMQzs7QUF4TEQ7QUFBQTtBQUFBLCtCQWlDTztBQUFBLDBCQVlELEtBQUssS0FaSjtBQUFBLFlBR0osU0FISSxlQUdKLFNBSEk7QUFBQSxZQUlKLGVBSkksZUFJSixlQUpJO0FBQUEsWUFLSixpQkFMSSxlQUtKLGlCQUxJO0FBQUEsWUFNSixrQkFOSSxlQU1KLGtCQU5JO0FBQUEsWUFPSixnQkFQSSxlQU9KLGdCQVBJO0FBQUEsWUFRSixjQVJJLGVBUUosY0FSSTtBQUFBLFlBU0osY0FUSSxlQVNKLGNBVEk7QUFBQSxZQVVKLFFBVkksZUFVSixRQVZJO0FBQUEsWUFXRCxLQVhDO0FBQUEsMEJBa0JELEtBQUssS0FsQko7QUFBQSxZQWNKLFNBZEksZUFjSixTQWRJO0FBQUEsWUFlSixXQWZJLGVBZUosV0FmSTtBQUFBLFlBZ0JKLFlBaEJJLGVBZ0JKLFlBaEJJO0FBQUEsWUFpQkosVUFqQkksZUFpQkosVUFqQkk7QUFvQkwsZUFDQyxpREFDSyxtQkFBSyxLQUFMLEVBQVksQ0FBQyxXQUFELENBQVosQ0FETDtBQUVDLFVBQUEsU0FBUyxFQUFFLHlCQUFN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