Feedback on RecyclerListView about recyclerlistview HOT 16 CLOSED

import { View } from 'react-native';
import React from 'react';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';
import { array, func, node, number, string } from 'prop-types';
import createInstanceSelector from '../../modules/createInstanceSelector';
import ScrollPositionContext from './ScrollPositionContext';

const noop = () => {};

const positionCache = {};

class ScrollView extends React.Component {
  static propTypes = {
    assumedItemHeight: number,
    cacheKey: string.isRequired,
    items: array.isRequired,
    onAtEnd: func,
    onAtStart: func,
    onNearEnd: func,
    onNearStart: func,
    onPositionRestored: func.isRequired,
    renderer: func.isRequired
  };

  static defaultProps = {
    onPositionRestored: noop,
    onAtEnd: noop,
    onAtStart: noop,
    onNearEnd: noop,
    onNearStart: noop
  };


  static defaultProps = {}

  constructor(props, context) {
    super(props, context);
    this._layoutProvider = new LayoutProvider(
      (index) => this.props.items[index].type,
      (type, dim) => {
        dim.height = 200;
      }
    );
  }

  componentDidMount() {
    const { onPositionRestored } = this.props;
    // TODO: revisit
    (window.requestIdleCallback || window.requestAnimationFrame)(() => {
      onPositionRestored();
    });
  }

  render() {
    return (
      <RecyclerListView
        contextProvider={this._contextProvider()}
        layoutProvider={this._layoutProvider}
        dataProvider={this._dataProvider()}
        rowRenderer={this._rowRenderer}
        useWindowScroll
        forceNonDeterministicRendering
        onEndReached={this._handleOnEndReached}
        onEndReachedThreshold={500}
      />
    );
  }

  _rowRenderer = (type, data) => {
    const { renderer } = this.props;
    return renderer(data);
  };

  _handleOnEndReached = () => {
    const { onNearEnd } = this.props;
    onNearEnd();
  };

  _dataProvider = createInstanceSelector(this,
    (props) => props.items,
    (items) => {
      return new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(items)
    }
  );

  _contextProvider = createInstanceSelector(this,
    (props) => props.cacheKey,
    (cacheKey) => new ScrollPositionContext(positionCache, cacheKey)
  );
}

export default ScrollView;

import { ContextProvider } from "recyclerlistview";

export default class ScrollPosition extends ContextProvider {
  constructor(cache, cacheKey) {
    super();
    this._cache = cache;
    this._cacheKey = cacheKey;
  }
 
  getUniqueKey() {
    return this._cacheKey;
  }

  save(key, value) {
    this._cache[key] = value;
  }

  get(key) {
    return this._cache[key];
  }

  remove(key) {
    delete this._cache[key];
  }
}

/***
 Use this component inside your React Native Application.
 A simple scrollable list view
 */
import React from 'react';
import {RecyclerListView, DataProvider, LayoutProvider} from 'recyclerlistview';
import ScrollPositionContext from "./ScrollPosition";

const ViewTypes = {
    FULL: 0,
    HALF_LEFT: 1,
    HALF_RIGHT: 2,
};

let containerCount = 0;

class CellContainer extends React.Component {
    constructor(args) {
        super(args);
        this._containerId = containerCount++;
    }

    shouldComponentUpdate(newProps) {
        this.renderFromProps(newProps);
        return false;
    }

    componentDidMount() {
        if (this._idDiv) {
            this._idDiv.innerText = "Cell Id: " + this._containerId;
        }
        this.renderFromProps(this.props);
    }

    renderFromProps(props) {
        if (this._dataDiv) {
            this._dataDiv.innerText = "Data: " + props.data;
        }
    }

    render() {
        return <div {...this.props}>
            <div ref={x => this._dataDiv = x}/>
            <div ref={x => this._idDiv = x}/>
        </div>;
    }
}

/***
 * To test out just copy this component and render in you root component
 */
export default class RecycleTestComponent extends React.Component {
    constructor(args) {
        super(args);

        let width = window.innerWidth;
        this._contextProvider = new ScrollPositionContext();


        //Create the data provider and provide method which takes in two rows of data and return if those two are different or not.
        let dataProvider = new DataProvider((r1, r2) => {
            return r1 !== r2;
        });

        //Create the layout provider
        //First method: Given an index return the type of item e.g ListItemType1, ListItemType2 in case you have variety of items in your list/grid
        //Second: Given a type and object set the height and width for that type on given object
        //If you need data based check you can access your data provider here
        //You'll need data in most cases, we don't provide it by default to enable things like data virtualization in the future
        //NOTE: For complex lists LayoutProvider will also be complex it would then make sense to move it to a different file
        this._layoutProvider = new LayoutProvider(
            index => {
                if (index % 3 === 0) {
                    return ViewTypes.FULL;
                } else if (index % 3 === 1) {
                    return ViewTypes.HALF_LEFT;
                } else {
                    return ViewTypes.HALF_RIGHT;
                }
            },
            (type, dim) => {
                switch (type) {
                    case ViewTypes.HALF_LEFT:
                        dim.width = 150;
                        dim.height = 200;
                        break;
                    case ViewTypes.HALF_RIGHT:
                        dim.width = 150;
                        dim.height = 250;
                        break;
                    case ViewTypes.FULL:
                        dim.width = 300;
                        dim.height = 100;
                        break;
                    default:
                        dim.width = 0;
                        dim.height = 0;
                }
            }
        );

        this._rowRenderer = this._rowRenderer.bind(this);

        //Since component should always render once data has changed, make data provider part of the state
        this.state = {
            dataProvider: dataProvider.cloneWithRows(this._generateArray(1000)),
            isMounted: true
        };
    }

    _generateArray(n) {
        let arr = new Array(n);
        for (let i = 0; i < n; i++) {
            arr[i] = i;
        }
        return arr;
    }

    _rowRenderer(type, data) {
        //You can return any view here, CellContainer has no special significance
        switch (type) {
            case ViewTypes.HALF_LEFT:
                return (
                    <CellContainer data={data} style={styles.containerGridLeft}>
                    </CellContainer>
                );
            case ViewTypes.HALF_RIGHT:
                return (
                    <CellContainer data={data} style={styles.containerGridRight}>
                    </CellContainer>
                );
            case ViewTypes.FULL:
                return (
                    <CellContainer data={data} style={styles.container}>
                    </CellContainer>
                );
            default:
                return null;
        }
    }

    render() {
       return  <div style={{height:"100%", width:"100%", display:"flex"}} onClick={() => {
            this.setState({isMounted: !this.state.isMounted})
        }}>
            {this.state.isMounted?
            <RecyclerListView layoutProvider={this._layoutProvider} forceNonDeterministicRendering={true}
                              contextProvider={this._contextProvider}
                              dataProvider={this.state.dataProvider} rowRenderer={this._rowRenderer}/>: null}
        </div>
    }
}
const styles = {
    container: {
        justifyContent: 'space-around',
        alignItems: 'center',
        width: 200,
        height: 120,
        display: 'flex',
        flexDirection: 'column',
        border: '0.5px solid black',
        borderRadius: 20,
    },
    containerGridLeft: {
        justifyContent: 'space-around',
        alignItems: 'center',
        height: 260,
        width: 150,
        display: 'flex',
        flexDirection: 'column',
        border: '0.5px solid black',
        borderRadius: 20,
    },
    containerGridRight: {
        justifyContent: 'space-around',
        alignItems: 'center',
        height: 250,
        width: 150,
        display: 'flex',
        flexDirection: 'column',
        border: '0.5px solid black',
        borderRadius: 20,
    },
};