@6thquake/react-material
Version:
React components that implement Google's Material Design.
378 lines (311 loc) • 9.65 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactCustomScrollbars = require("react-custom-scrollbars");
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var styles = function styles(theme) {
return {};
};
var Scrollbar =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Scrollbar, _React$Component);
function Scrollbar() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, Scrollbar);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Scrollbar)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.scrollInfo = {
scrollTop: 0,
scrollHeight: 0,
clientHeight: 0
};
_this.direction = 'down';
_this.handleScrollStop = function (e) {
var _this$props = _this.props,
onPullDownRefresh = _this$props.onPullDownRefresh,
onReachBottom = _this$props.onReachBottom,
onScrollStop = _this$props.onScrollStop,
offsetTop = _this$props.offsetTop,
offsetBottom = _this$props.offsetBottom;
var _this$scrollInfo = _this.scrollInfo,
scrollTop = _this$scrollInfo.scrollTop,
scrollHeight = _this$scrollInfo.scrollHeight,
clientHeight = _this$scrollInfo.clientHeight;
if (_this.direction === 'up' && scrollTop - offsetTop <= 0) {
onPullDownRefresh && onPullDownRefresh();
}
if (_this.direction === 'down' && scrollTop >= scrollHeight - offsetBottom - clientHeight) {
onReachBottom && onReachBottom();
}
onScrollStop && onScrollStop();
};
_this.handleScroll = function (e) {
var onScroll = _this.props.onScroll;
var _e$target = e.target,
scrollTop = _e$target.scrollTop,
clientHeight = _e$target.clientHeight,
scrollHeight = _e$target.scrollHeight;
if (scrollTop > _this.scrollInfo.scrollTop) {
_this.direction = 'down';
} else {
_this.direction = 'up';
}
_this.scrollInfo = {
scrollTop: scrollTop,
clientHeight: clientHeight,
scrollHeight: scrollHeight
};
onScroll && onScroll(e);
};
return _this;
}
(0, _createClass2.default)(Scrollbar, [{
key: "scrollTop",
// up or down
/**
* scroll to the top value
* @param {PropTypes.number} top
*/
value: function scrollTop() {
var top = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return this.scrollbar.scrollTop(top);
}
/**
* scroll to the left value
* @param {PropTypes.number} left
*/
}, {
key: "scrollLeft",
value: function scrollLeft() {
var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return this.scrollbar.scrollLeft(left);
}
/**
* scroll to top
*/
}, {
key: "scrollToTop",
value: function scrollToTop() {
return this.scrollbar.scrollToTop();
}
/**
* scroll to bottom
*/
}, {
key: "scrollToBottom",
value: function scrollToBottom() {
return this.scrollbar.scrollToBottom();
}
/**
* scroll to left
*/
}, {
key: "scrollToLeft",
value: function scrollToLeft() {
return this.scrollbar.scrollToLeft();
}
/**
* scroll to right
*/
}, {
key: "scrollToRight",
value: function scrollToRight() {
return this.scrollbar.scrollToRight();
}
/**
* get scrollLeft value
*/
}, {
key: "getScrollLeft",
value: function getScrollLeft() {
return this.scrollbar.getScrollLeft();
}
/**
* get scrollTop value
*/
}, {
key: "getScrollTop",
value: function getScrollTop() {
return this.scrollbar.getScrollTop();
}
/**
* get scrollWidth value
*/
}, {
key: "getScrollWidth",
value: function getScrollWidth() {
return this.scrollbar.getScrollWidth();
}
/**
* get scrollHeight value
*/
}, {
key: "getScrollHeight",
value: function getScrollHeight() {
return this.scrollbar.getScrollHeight();
}
/**
* get view client width
*/
}, {
key: "getClientWidth",
value: function getClientWidth() {
return this.scrollbar.getClientWidth();
}
/**
* get view client height
*/
}, {
key: "getClientHeight",
value: function getClientHeight() {
return this.scrollbar.getClientHeight();
}
/**
* get an object with values about the current position.
*/
}, {
key: "getValues",
value: function getValues() {
return this.scrollbar.getValues();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
children = _this$props2.children,
_this$props2$offsetTo = _this$props2.offsetTop,
offsetTop = _this$props2$offsetTo === void 0 ? 0 : _this$props2$offsetTo,
_this$props2$offsetBo = _this$props2.offsetBottom,
offsetBottom = _this$props2$offsetBo === void 0 ? 0 : _this$props2$offsetBo,
onPullDownRefresh = _this$props2.onPullDownRefresh,
onReachBottom = _this$props2.onReachBottom,
onScrollStop = _this$props2.onScrollStop,
onScroll = _this$props2.onScroll,
other = (0, _objectWithoutProperties2.default)(_this$props2, ["children", "offsetTop", "offsetBottom", "onPullDownRefresh", "onReachBottom", "onScrollStop", "onScroll"]);
return _react.default.createElement(_reactCustomScrollbars.Scrollbars, (0, _extends2.default)({}, other, {
ref: function ref(node) {
return _this2.scrollbar = node;
},
onScrollStop: this.handleScrollStop,
onScroll: this.handleScroll
}), children);
}
}]);
return Scrollbar;
}(_react.default.Component);
Scrollbar.propTypes = {
/**
* This will activate auto-height
*/
autoHeight: _propTypes.default.bool,
/**
* This will activate auto-height
*/
autoHeightMax: _propTypes.default.number,
/**
* This will activate auto-height
*/
autoHeightMin: _propTypes.default.number,
/**
* This will activate auto hide
*/
autoHide: _propTypes.default.bool,
/**
* Duration for hide animation in ms.
*/
autoHideDuration: _propTypes.default.number,
/**
* Hide delay in ms
*/
autoHideTimeout: _propTypes.default.number,
/**
* offsetBottom
*/
offsetBottom: _propTypes.default.func,
/**
* offsetTop
*/
offsetTop: _propTypes.default.func,
/**
* Callback fired after scrolling to top or left
*/
onPullDownRefresh: _propTypes.default.func,
/**
* Callback fired after scrolling to bottom or right
*/
onReachBottom: _propTypes.default.func,
/**
* Will be called with the native scroll event
*/
onScroll: _propTypes.default.func,
/**
* Runs inside the animation frame. Passes some handy values about the current scroll position
*/
onScrollFrame: _propTypes.default.func,
/**
* Called when scrolling starts
*/
onScrollStart: _propTypes.default.func,
/**
* Called when scrolling stops
*/
onScrollStop: _propTypes.default.func,
/**
* Called when ever the component is updated. Runs inside the animation frame
*/
onUpdate: _propTypes.default.func,
/**
* The vertical scrollbars track
*/
renderThumbHorizontal: _propTypes.default.func,
/**
* The horizontal thumb
*/
renderThumbVertical: _propTypes.default.func,
/**
* The element your content is rendered in
*/
renderTrackHorizontal: _propTypes.default.func,
/**
* The horizontal scrollbars track
*/
renderTrackVertical: _propTypes.default.func,
/**
* The vertical thumb
*/
renderView: _propTypes.default.func,
/**
* If your app runs on both client and server, activate the universal mode. This will ensure that the initial markup on client and server are the same
*/
universal: _propTypes.default.bool
};
Scrollbar.defaultProps = {
offsetTop: 0,
offsetBottom: 0
};
var _default = function (Component) {
return _react.default.forwardRef(function (props, ref) {
return _react.default.createElement(Component, (0, _extends2.default)({}, props, {
innerRef: ref
}));
});
}((0, _withStyles.default)(styles)(Scrollbar));
exports.default = _default;