@cantonjs/react-scroll-view/lib/components/ScrollView.js

react scroll component using intersection observer API

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _ScrollView = require('./ScrollView.styles');

var _ScrollView2 = _interopRequireDefault(_ScrollView);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _util = require('../util');

var _PropTypes = require('../PropTypes');

var _Observer = require('../Observer');

var _Observer2 = _interopRequireDefault(_Observer);

var _FixedState = require('../FixedState');

var _FixedState2 = _interopRequireDefault(_FixedState);

var _RefreshState = require('../RefreshState');

var _RefreshState2 = _interopRequireDefault(_RefreshState);

var _PullingDown = require('../PullingDown');

var _PullingDown2 = _interopRequireDefault(_PullingDown);

var _Hook = require('./Hook');

var _Hook2 = _interopRequireDefault(_Hook);

var _FixedContainer = require('./FixedContainer');

var _FixedContainer2 = _interopRequireDefault(_FixedContainer);

var _warning = require('warning');

var _warning2 = _interopRequireDefault(_warning);

var _Contexts = require('../Contexts');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ScrollView = function (_Component) {
	_inherits(ScrollView, _Component);

	function ScrollView(props) {
		_classCallCheck(this, ScrollView);

		var _this = _possibleConstructorReturn(this, (ScrollView.__proto__ || Object.getPrototypeOf(ScrollView)).call(this, props));

		_initialiseProps.call(_this);

		var isHorizontal = props.isHorizontal,
		    onEndReached = props.onEndReached,
		    refreshControl = props.refreshControl;


		(0, _warning2.default)(!isHorizontal || !refreshControl, '`refreshControl` with `isHorizontal` is NOT supported, `refreshControl` will be ignored');

		(0, _warning2.default)(!isHorizontal || !onEndReached, '`onEndReached` with `isHorizontal` is NOT supported, `onEndReached` will be ignored');

		_this.styles = (0, _ScrollView2.default)();
		_this.observer = new _Observer2.default();
		_this.toEmitOnScrollEnd = (0, _util.debounce)(function (ev) {
			var onScrollEnd = _this.props.onScrollEnd;

			_this.isScrolling = false;
			onScrollEnd && onScrollEnd(ev);
		}, 100);

		_this.fixedState = new _FixedState2.default();

		if (props.refreshControl) _this.refreshState = new _RefreshState2.default();
		return _this;
	}

	_createClass(ScrollView, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			var dom = this.dom;

			this.observer.mount(dom);
			this.registerTouchEvents(dom);
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			var dom = this.dom;

			this.toEmitOnScrollEnd.clearDebounce();
			this.unregisterTouchEvents(dom);
		}
	}, {
		key: 'scrollTo',
		value: function scrollTo() {
			var _dom;

			var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

			var args = this.props.isHorizontal ? [val, 0] : [0, val];
			(_dom = this.dom).scrollTo.apply(_dom, args);
		}
	}, {
		key: 'render',
		value: function render() {
			var _props = this.props,
			    style = _props.style,
			    className = _props.className,
			    contentContainerStyle = _props.contentContainerStyle,
			    contentContainerClassName = _props.contentContainerClassName,
			    children = _props.children,
			    onScrollStart = _props.onScrollStart,
			    onScrollEnd = _props.onScrollEnd,
			    onEndReached = _props.onEndReached,
			    endReachedThreshold = _props.endReachedThreshold,
			    isHorizontal = _props.isHorizontal,
			    disabled = _props.disabled,
			    refreshControl = _props.refreshControl,
			    innerRef = _props.innerRef,
			    other = _objectWithoutProperties(_props, ['style', 'className', 'contentContainerStyle', 'contentContainerClassName', 'children', 'onScrollStart', 'onScrollEnd', 'onEndReached', 'endReachedThreshold', 'isHorizontal', 'disabled', 'refreshControl', 'innerRef']),
			    styles = this.styles,
			    observer = this.observer,
			    fixedState = this.fixedState,
			    refreshState = this.refreshState;

			var direction = isHorizontal ? 'horizontal' : 'vertical';
			return _react2.default.createElement(
				_Contexts.ObserverContext.Provider,
				{ value: observer },
				_react2.default.createElement(
					_Contexts.FixedContext.Provider,
					{ value: fixedState },
					_react2.default.createElement(
						_Contexts.RefreshContext.Provider,
						{ value: refreshState },
						_react2.default.createElement(
							'div',
							{ style: styles.container(style), className: className },
							_react2.default.createElement(
								'div',
								_extends({}, other, {
									style: styles.main(direction, disabled),
									ref: this.scrollViewRef,
									onScroll: this.handleScroll
								}),
								!isHorizontal && refreshControl,
								_react2.default.createElement(
									'div',
									{
										style: contentContainerStyle,
										className: contentContainerClassName
									},
									children
								),
								_util.isIOS && _react2.default.createElement('div', { style: styles.background(direction) }),
								!isHorizontal && _react2.default.createElement(_Hook2.default, {
									style: styles.endHook(endReachedThreshold),
									onEnter: this.handleEndEnter
								})
							),
							_react2.default.createElement(
								_FixedContainer2.default,
								{
									style: styles.fixedContainer(contentContainerStyle)
								},
								fixedState.children
							)
						)
					)
				)
			);
		}
	}]);

	return ScrollView;
}(_react.Component);

ScrollView.propTypes = {
	style: _propTypes2.default.object,
	className: _propTypes2.default.string,
	contentContainerStyle: _propTypes2.default.object,
	contentContainerClassName: _propTypes2.default.string,
	children: _propTypes2.default.node,
	onScrollStart: _propTypes2.default.func,
	onScroll: _propTypes2.default.func,
	onScrollEnd: _propTypes2.default.func,
	onEndReached: _propTypes2.default.func,
	endReachedThreshold: _propTypes2.default.number,
	isHorizontal: _propTypes2.default.bool,
	innerRef: _PropTypes.refType,
	disabled: _propTypes2.default.bool,
	refreshControl: _propTypes2.default.node
};
ScrollView.defaultProps = {
	endReachedThreshold: 0,
	isHorizontal: false,
	disabled: false
};

var _initialiseProps = function _initialiseProps() {
	var _this2 = this;

	this.scrollViewRef = function (dom) {
		(0, _util.forwardRef)(_this2.props.innerRef, dom);
		_this2.dom = dom;
	};

	this.registerTouchEvents = function (dom) {
		if (!_this2.refreshState) return;
		_this2.pullingDown = new _PullingDown2.default(_this2.dom);
		dom.addEventListener('touchstart', _this2.handleTouchStart, _util.eventOptions);
	};

	this.unregisterTouchEvents = function (dom) {
		if (!_this2.refreshState) return;
		dom.removeEventListener('touchstart', _this2.handleTouchStart, _util.eventOptions);
	};

	this.handleEndEnter = function () {
		var onEndReached = _this2.props.onEndReached;

		if (onEndReached) onEndReached();
	};

	this.handleScroll = function (ev) {
		var _props2 = _this2.props,
		    onScrollStart = _props2.onScrollStart,
		    onScroll = _props2.onScroll,
		    isScrolling = _this2.isScrolling;

		if (!isScrolling) {
			_this2.isScrolling = true;
			onScrollStart && onScrollStart(ev);
		}
		onScroll && onScroll(ev);
		_this2.toEmitOnScrollEnd(ev);
	};

	this.handleTouchStart = function (ev) {
		var dom = _this2.dom;

		_this2.y0 = ev.touches[0].clientY;
		dom.addEventListener('touchmove', _this2.handleTouchMove, _util.eventOptions);
		dom.addEventListener('touchend', _this2.handleTouchEnd, _util.eventOptions);
	};

	this.handleTouchMove = function (ev) {
		var touchClient = ev.touches[0];
		var dy = touchClient.clientY - _this2.y0;
		if (!_this2.pullingDown.isActive) {
			if (_this2.dom.scrollTop <= 0) {
				if (dy > 0) {
					_this2.pullingDown.start();
					_this2.refreshState.call('disableTransition');
				}
			} else {
				_this2.y0 = touchClient.clientY;
			}
		} else if (dy <= 0) {
			_this2.refreshState.call('setHeight', 0);
			_this2.pullingDown.stop();
		}

		if (_this2.pullingDown.isActive) {
			_this2.refreshState.call('setHeight', dy);
		}
	};

	this.handleTouchEnd = function () {
		var dom = _this2.dom;

		_this2.y0 = 0;
		if (_this2.pullingDown.isActive) {
			_this2.refreshState.call('attemptToRefresh');
			_this2.pullingDown.stop();
		}

		dom.removeEventListener('touchmove', _this2.handleTouchMove, _util.eventOptions);
		dom.removeEventListener('touchend', _this2.handleTouchEnd, _util.eventOptions);
	};
};

exports.default = ScrollView;