UNPKG

react-misc-toolbox

Version:

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

102 lines (73 loc) 3.52 kB
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _recompose = require('recompose'); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var DetectVisibility = function (_React$Component) { (0, _inherits3.default)(DetectVisibility, _React$Component); function DetectVisibility() { var _ref; var _temp, _this, _ret; (0, _classCallCheck3.default)(this, DetectVisibility); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DetectVisibility.__proto__ || (0, _getPrototypeOf2.default)(DetectVisibility)).call.apply(_ref, [this].concat(args))), _this), _this.state = { bottomIsVisible: true }, _this.handleScroll = function () { var _this2 = _this, _this2$props = _this2.props, containerSelector = _this2$props.containerSelector, isLocked = _this2$props.isLocked; var containerElement = document.querySelector(containerSelector); if (!isLocked) { if (containerElement.getBoundingClientRect().bottom > 0) { _this.setState({ bottomIsVisible: true }); } else { _this.setState({ bottomIsVisible: false }); } } }, _this.componentDidMount = function () { var _this3 = _this, containerSelector = _this3.props.containerSelector; var containerElement = document.querySelector(containerSelector); if (containerElement.getBoundingClientRect().bottom > 0) { _this.setState({ bottomIsVisible: true }); } else { _this.setState({ bottomIsVisible: false }); } typeof window !== 'undefined' && window.addEventListener('scroll', _this.handleScroll); }, _this.componentWillUnmount = function () { window.removeEventListener('scroll', _this.handleScroll); }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); } (0, _createClass3.default)(DetectVisibility, [{ key: 'render', value: function render() { var bottomIsVisible = this.state.bottomIsVisible, children = this.props.children; return children({ bottomIsVisible: bottomIsVisible }); } }]); return DetectVisibility; }(_react2.default.Component); DetectVisibility.propTypes = { containerSelector: _propTypes2.default.string.isRequired }; var enhance = (0, _recompose.compose)((0, _recompose.onlyUpdateForKeys)(['containerSelector'])); exports.default = enhance(DetectVisibility);