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

react scroll component using intersection observer API

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; }; }();

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; }

import createStyles from './ScrollView.styles';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { isIOS, forwardRef, debounce, eventOptions } from '../util';
import { refType } from '../PropTypes';
import Observer from '../Observer';
import FixedState from '../FixedState';
import RefreshState from '../RefreshState';
import PullingDown from '../PullingDown';
import Hook from './Hook';
import FixedContainer from './FixedContainer';
import warning from 'warning';
import { ObserverContext, FixedContext, RefreshContext } from '../Contexts';

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;


		warning(!isHorizontal || !refreshControl, '`refreshControl` with `isHorizontal` is NOT supported, `refreshControl` will be ignored');

		warning(!isHorizontal || !onEndReached, '`onEndReached` with `isHorizontal` is NOT supported, `onEndReached` will be ignored');

		_this.styles = createStyles();
		_this.observer = new Observer();
		_this.toEmitOnScrollEnd = debounce(function (ev) {
			var onScrollEnd = _this.props.onScrollEnd;

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

		_this.fixedState = new FixedState();

		if (props.refreshControl) _this.refreshState = new RefreshState();
		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 React.createElement(
				ObserverContext.Provider,
				{ value: observer },
				React.createElement(
					FixedContext.Provider,
					{ value: fixedState },
					React.createElement(
						RefreshContext.Provider,
						{ value: refreshState },
						React.createElement(
							'div',
							{ style: styles.container(style), className: className },
							React.createElement(
								'div',
								_extends({}, other, {
									style: styles.main(direction, disabled),
									ref: this.scrollViewRef,
									onScroll: this.handleScroll
								}),
								!isHorizontal && refreshControl,
								React.createElement(
									'div',
									{
										style: contentContainerStyle,
										className: contentContainerClassName
									},
									children
								),
								isIOS && React.createElement('div', { style: styles.background(direction) }),
								!isHorizontal && React.createElement(Hook, {
									style: styles.endHook(endReachedThreshold),
									onEnter: this.handleEndEnter
								})
							),
							React.createElement(
								FixedContainer,
								{
									style: styles.fixedContainer(contentContainerStyle)
								},
								fixedState.children
							)
						)
					)
				)
			);
		}
	}]);

	return ScrollView;
}(Component);

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

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

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

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

	this.unregisterTouchEvents = function (dom) {
		if (!_this2.refreshState) return;
		dom.removeEventListener('touchstart', _this2.handleTouchStart, 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, eventOptions);
		dom.addEventListener('touchend', _this2.handleTouchEnd, 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, eventOptions);
		dom.removeEventListener('touchend', _this2.handleTouchEnd, eventOptions);
	};
};

export default ScrollView;