Question: Expose reportScrollTop or scrollTop in some way about react-virtuoso HOT 10 CLOSED

import styles from './index.module.less';

import React from 'react';
import ReactDOM from 'react-dom';
import propTypes from 'prop-types';
import classNames from 'classnames';
import { Virtuoso } from 'react-virtuoso';

const STATS = {
  INIT: styles.stateInit,
  RESET: styles.stateReset,
  LOADING: styles.stateLoading,
  PULLING: styles.statePulling,
  REFRESHED: styles.stateRefreshed,
  REFRESHING: styles.stateRefreshing,
  ENOUGH: `${styles.statePulling} ${styles.enough}`
};

export const PROGRESS = {
  DISABLE: 0,
  START: 1,
  DONE: 2
};

// 拖拽的缓动公式 - easeOutSine
function easing(distance) {
  // Current time
  const t = distance;
  // BegInnIng value
  const b = 0;
  // Duration
  // 允许拖拽的最大距离
  const d = window.screen.availHeight;
  // Change In value
  // 提示标签最大有效拖拽距离
  const c = d / 3.5;

  return c * Math.sin((t / d) * (Math.PI / 2)) + b;
}

// Test via a getter in the options object to see
// if the passive property is accessed
let supportsPassive = false;

try {
  const options = Object.defineProperty({}, 'passive', {
    get: () => (supportsPassive = true)
  });

  window.addEventListener('test', null, options);
} catch (e) {
  // Do nothing
}

const willPreventDefault = supportsPassive ? { passive: false } : false;

// Pull to refresh
// Tap bottom to load more
export default class VirtualList extends React.PureComponent {
  static defaultProps = {
    overscan: 1,
    autoLoadMore: true,
    refreshThreshold: 72,
    progress: PROGRESS.DISABLE,
    placeholder: <div className={styles.noData}>暂无数据</div>
  };

  /**
   * @property propTypes
   */
  static propTypes = {
    hasMore: propTypes.bool,
    onRefresh: propTypes.func,
    onLoadMore: propTypes.func,
    autoLoadMore: propTypes.bool,
    data: propTypes.array.isRequired,
    refreshThreshold: propTypes.number,
    children: propTypes.func.isRequired,
    placeholder: propTypes.oneOfType([propTypes.string, propTypes.element]),
    progress: propTypes.oneOf([PROGRESS.DISABLE, PROGRESS.START, PROGRESS.DONE])
  };

  state = {
    pullHeight: 0,
    status: STATS.INIT
  };

  bodyRef = React.createRef();

  vListRef = React.createRef();

  initialTouch = { clientY: 0, scrollTop: 0 };

  vListStyles = { width: '100%', height: '100%' };

  getClassName() {
    const { status } = this.state;
    const { className, progress } = this.props;

    return classNames(className, styles.vList, status, {
      [styles.vListProgress]: progress !== PROGRESS.DISABLE,
      [styles.progressCompleted]: progress === PROGRESS.DONE
    });
  }

  getSymbolStyle() {
    const { pullHeight } = this.state;

    if (pullHeight) {
      const height = Math.max(48, pullHeight);

      return { height, lineHeight: `${height}px` };
    }
  }

  getBodyStyle() {
    const { pullHeight } = this.state;

    if (pullHeight) {
      const transform = `translate3d(0, ${pullHeight}px, 0)`;

      return { transform };
    }
  }

  canLoad() {
    const { status } = this.state;

    return status !== STATS.REFRESHING && status !== STATS.LOADING;
  }

  canLoadMore() {
    const { hasMore, onLoadMore } = this.props;

    return hasMore && onLoadMore && this.canLoad();
  }

  canRefresh() {
    const { onRefresh } = this.props;
    const vList = this.vListRef.current;
    const atTop = !vList || ReactDOM.findDOMNode(vList).scrollTop === 0;

    return atTop && onRefresh && this.canLoad();
  }

  calculateDistance(touch) {
    return touch.clientY - this.initialTouch.clientY;
  }

  loadMore = () => {
    this.setState({ status: STATS.LOADING });
    this.props.onLoadMore(() => this.setState({ status: STATS.INIT }));
  };

  onTouchStart = e => {
    if (this.canRefresh() && e.touches.length === 1) {
      const { scrollTop } = this.bodyRef.current;

      this.initialTouch = { scrollTop, clientY: e.touches[0].clientY };
    }
  };

  onTouchMove = e => {
    if (e.cancelable && this.canRefresh()) {
      const { refreshThreshold } = this.props;
      const { scrollTop } = this.bodyRef.current;
      const distance = this.calculateDistance(e.touches[0]);

      if (distance > 0 && scrollTop <= 0) {
        let pullDistance = distance - this.initialTouch.scrollTop;

        if (pullDistance < 0) {
          // 修复 webview 滚动过程中 touchstart 时计算 viewport.scrollTop 不准
          pullDistance = 0;

          this.initialTouch.scrollTop = distance;
        }

        const pullHeight = easing(pullDistance);

        // 减弱滚动
        pullHeight && e.preventDefault();

        this.setState({ pullHeight, status: pullHeight >= refreshThreshold ? STATS.ENOUGH : STATS.PULLING });
      }
    }
  };

  onTouchEnd = () => {
    if (this.canRefresh()) {
      if (this.state.status === STATS.ENOUGH) {
        // Refreshing
        this.setState({ pullHeight: 0, status: STATS.REFRESHING });
      } else if (!this.bodyRef.current.scrollTop) {
        // Reset
        this.setState({ pullHeight: 0, status: STATS.RESET });
      } else {
        this.setState({ pullHeight: 0, status: STATS.INIT });
      }
    }
  };

  onTransitionEnd = e => {
    // Only body self transition can trigger events
    if (e.target === this.bodyRef.current) {
      switch (this.state.status) {
        // Trigger refresh action
        case STATS.REFRESHING:
          this.props.onRefresh(
            () => {
              this.setState({ pullHeight: 0, status: STATS.REFRESHED });
              // Close success message after 300ms
              setTimeout(() => this.setState({ status: STATS.INIT }), 300);
            },
            () => this.setState({ pullHeight: 0, status: STATS.RESET })
          );
          break;
        case STATS.RESET:
          this.setState({ status: STATS.INIT });
          break;
      }
    }
  };

  onReachEnd = () => {
    const { autoLoadMore } = this.props;

    autoLoadMore && this.canLoadMore() && this.loadMore();
  };

  componentDidMount() {
    const { bodyRef } = this;
    const { autoLoadMore } = this.props;

    autoLoadMore && this.canLoadMore() && this.loadMore();

    this.initialTouch.scrollTop = bodyRef.current.scrollTop;

    bodyRef.current.addEventListener('touchstart', this.onTouchStart, willPreventDefault);
    bodyRef.current.addEventListener('touchmove', this.onTouchMove, willPreventDefault);
    bodyRef.current.addEventListener('touchend', this.onTouchEnd, willPreventDefault);
    bodyRef.current.addEventListener('touchcancel', this.onTouchEnd, willPreventDefault);
  }

  componentWillUnmount() {
    const { bodyRef } = this;

    bodyRef.current.removeEventListener('touchstart', this.onTouchStart);
    bodyRef.current.removeEventListener('touchmove', this.onTouchMove);
    bodyRef.current.removeEventListener('touchend', this.onTouchEnd);
    bodyRef.current.removeEventListener('touchcancel', this.onTouchEnd);
  }

  renderRows = index => {
    const { data, children } = this.props;

    return children(data[index]);
  };

  renderFooter = () => {
    const { hasMore } = this.props;

    if (!hasMore) return null;

    return (
      <div className={styles.vListFooter}>
        <div className={styles.vListBtn} onClick={this.loadMore} />
        <div className={styles.vListLoading}>
          <i className={styles.spinning} />
        </div>
      </div>
    );
  };

  renderBody = () => {
    const { data, style, className, hasMore, placeholder, ...restProps } = this.props;

    const totalCount = data.length;

    if (totalCount) {
      return (
        <Virtuoso
          {...restProps}
          ref={this.vListRef}
          item={this.renderRows}
          totalCount={totalCount}
          style={this.vListStyles}
          footer={this.renderFooter}
          endReached={this.onReachEnd}
        />
      );
    }

    return hasMore ? null : placeholder;
  };

  render() {
    const { style } = this.props;

    return (
      <div style={style} className={this.getClassName()}>
        <div className={styles.vListSymbol} style={this.getSymbolStyle()}>
          <div className={styles.vListMsg}>
            <i />
          </div>
          <div className={styles.vListLoading}>
            <i className={styles.spinning} />
          </div>
        </div>
        <div ref={this.bodyRef}
          style={this.getBodyStyle()}
          className={styles.vListBody}
          onTransitionEnd={this.onTransitionEnd}
        >
          {this.renderBody()}
        </div>
      </div>
    );
  }
}