react-native-list 1.0.0 → 2.0.0-alpha.1

package/VirtualizedSectionList.js

@@ -1,397 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule VirtualizedSectionList
- * @flow
- */
-'use strict';
-
-const React = require('React');
-const View = require('View');
-const VirtualizedList = require('VirtualizedList');
-
-const invariant = require('fbjs/lib/invariant');
-const warning = require('fbjs/lib/warning');
-
-import type {ViewToken} from './ViewabilityHelper';
-import type {Props as VirtualizedListProps} from 'VirtualizedList';
-
-type Item = any;
-type SectionItem = any;
-
-type SectionBase = {
-  // Must be provided directly on each section.
-  data: Array<SectionItem>,
-  key: string,
-
-  // Optional props will override list-wide props just for this section.
-  renderItem?: ?({
-    item: SectionItem,
-    index: number,
-    separators: {
-      highlight: () => void,
-      unhighlight: () => void,
-      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-    },
-  }) => ?React.Element<*>,
-  ItemSeparatorComponent?: ?ReactClass<*>,
-  keyExtractor?: (item: SectionItem) => string,
-
-  // TODO: support more optional/override props
-  // FooterComponent?: ?ReactClass<*>,
-  // HeaderComponent?: ?ReactClass<*>,
-  // onViewableItemsChanged?: ({viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void,
-};
-
-type RequiredProps<SectionT: SectionBase> = {
-  sections: Array<SectionT>,
-};
-
-type OptionalProps<SectionT: SectionBase> = {
-  /**
-   * Rendered after the last item in the last section.
-   */
-  ListFooterComponent?: ?(ReactClass<*> | React.Element<*>),
-  /**
-   * Rendered at the very beginning of the list.
-   */
-  ListHeaderComponent?: ?(ReactClass<*> | React.Element<*>),
-  /**
-   * Default renderer for every item in every section.
-   */
-  renderItem: (info: {
-    item: Item,
-    index: number,
-    separators: {
-      highlight: () => void,
-      unhighlight: () => void,
-      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-    },
-  }) => ?React.Element<any>,
-  /**
-   * Rendered at the top of each section.
-   */
-  renderSectionHeader?: ?({section: SectionT}) => ?React.Element<*>,
-  /**
-   * Rendered at the bottom of every Section, except the very last one, in place of the normal
-   * ItemSeparatorComponent.
-   */
-  SectionSeparatorComponent?: ?ReactClass<*>,
-  /**
-   * Rendered at the bottom of every Item except the very last one in the last section.
-   */
-  ItemSeparatorComponent?: ?ReactClass<*>,
-  /**
-   * Warning: Virtualization can drastically improve memory consumption for long lists, but trashes
-   * the state of items when they scroll out of the render window, so make sure all relavent data is
-   * stored outside of the recursive `renderItem` instance tree.
-   */
-  enableVirtualization?: ?boolean,
-  keyExtractor: (item: Item, index: number) => string,
-  onEndReached?: ?({distanceFromEnd: number}) => void,
-  /**
-   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
-   * sure to also set the `refreshing` prop correctly.
-   */
-  onRefresh?: ?Function,
-  /**
-   * Called when the viewability of rows changes, as defined by the
-   * `viewabilityConfig` prop.
-   */
-  onViewableItemsChanged?: ?({viewableItems: Array<ViewToken>, changed: Array<ViewToken>}) => void,
-  /**
-   * Set this true while waiting for new data from a refresh.
-   */
-  refreshing?: ?boolean,
-};
-
-export type Props<SectionT> =
-  RequiredProps<SectionT> &
-  OptionalProps<SectionT> &
-  VirtualizedListProps;
-
-type DefaultProps = (typeof VirtualizedList.defaultProps) & {data: Array<Item>};
-type State = {childProps: VirtualizedListProps};
-
-/**
- * Right now this just flattens everything into one list and uses VirtualizedList under the
- * hood. The only operation that might not scale well is concatting the data arrays of all the
- * sections when new props are received, which should be plenty fast for up to ~10,000 items.
- */
-class VirtualizedSectionList<SectionT: SectionBase>
-  extends React.PureComponent<DefaultProps, Props<SectionT>, State>
-{
-  props: Props<SectionT>;
-
-  state: State;
-
-  static defaultProps: DefaultProps = {
-    ...VirtualizedList.defaultProps,
-    data: [],
-  };
-
-  scrollToLocation(params: {
-    animated?: ?boolean, itemIndex: number, sectionIndex: number, viewPosition?: number
-  }) {
-    let index = params.itemIndex + 1;
-    for (let ii = 0; ii < params.sectionIndex; ii++) {
-      index += this.props.sections[ii].data.length + 1;
-    }
-    const toIndexParams = {
-      ...params,
-      index,
-    };
-    this._listRef.scrollToIndex(toIndexParams);
-  }
-
-  getListRef(): VirtualizedList {
-    return this._listRef;
-  }
-
-  _keyExtractor = (item: Item, index: number) => {
-    const info = this._subExtractor(index);
-    return (info && info.key) || String(index);
-  };
-
-  _subExtractor(
-    index: number,
-  ): ?{
-    section: SectionT,
-    key: string, // Key of the section or combined key for section + item
-    index: ?number, // Relative index within the section
-  } {
-    let itemIndex = index;
-    const defaultKeyExtractor = this.props.keyExtractor;
-    for (let ii = 0; ii < this.props.sections.length; ii++) {
-      const section = this.props.sections[ii];
-      const key = section.key;
-      warning(
-        key != null,
-        'VirtualizedSectionList: A `section` you supplied is missing the `key` property.'
-      );
-      itemIndex -= 1; // The section itself is an item
-      if (itemIndex >= section.data.length) {
-        itemIndex -= section.data.length;
-      } else if (itemIndex === -1) {
-        return {section, key, index: null};
-      } else {
-        const keyExtractor = section.keyExtractor || defaultKeyExtractor;
-        return {
-          section,
-          key: key + ':' + keyExtractor(section.data[itemIndex], itemIndex),
-          index: itemIndex,
-        };
-      }
-    }
-  }
-
-  _convertViewable = (viewable: ViewToken): ?ViewToken => {
-    invariant(viewable.index != null, 'Received a broken ViewToken');
-    const info = this._subExtractor(viewable.index);
-    if (!info) {
-      return null;
-    }
-    const keyExtractor = info.section.keyExtractor || this.props.keyExtractor;
-    return {
-      ...viewable,
-      index: info.index,
-      key: keyExtractor(viewable.item, info.index),
-      section: info.section,
-    };
-  };
-
-  _onViewableItemsChanged = (
-    {viewableItems, changed}: {viewableItems: Array<ViewToken>, changed: Array<ViewToken>}
-  ) => {
-    if (this.props.onViewableItemsChanged) {
-      this.props.onViewableItemsChanged({
-        viewableItems: viewableItems.map(this._convertViewable, this).filter(Boolean),
-        changed: changed.map(this._convertViewable, this).filter(Boolean),
-      });
-    }
-  }
-
-  _renderItem = ({item, index}: {item: Item, index: number}) => {
-    const info = this._subExtractor(index);
-    if (!info) {
-      return null;
-    }
-    const infoIndex = info.index;
-    if (infoIndex == null) {
-      const {renderSectionHeader} = this.props;
-      return renderSectionHeader ? renderSectionHeader({section: info.section}) : null;
-    } else {
-      const renderItem = info.section.renderItem || this.props.renderItem;
-      const SeparatorComponent = this._getSeparatorComponent(index, info);
-      invariant(renderItem, 'no renderItem!');
-      return (
-        <ItemWithSeparator
-          SeparatorComponent={SeparatorComponent}
-          LeadingSeparatorComponent={infoIndex === 0
-            ? this.props.SectionSeparatorComponent
-            : undefined
-          }
-          cellKey={info.key}
-          index={infoIndex}
-          item={item}
-          onUpdateSeparator={this._onUpdateSeparator}
-          prevCellKey={(this._subExtractor(index - 1) || {}).key}
-          ref={(ref) => {this._cellRefs[info.key] = ref;}}
-          renderItem={renderItem}
-          section={info.section}
-        />
-      );
-    }
-  };
-
-  _onUpdateSeparator = (key: string, newProps: Object) => {
-    const ref = this._cellRefs[key];
-    ref && ref.updateSeparatorProps(newProps);
-  };
-
-  _getSeparatorComponent(index: number, info?: ?Object): ?ReactClass<*> {
-    info = info || this._subExtractor(index);
-    if (!info) {
-      return null;
-    }
-    const ItemSeparatorComponent = info.section.ItemSeparatorComponent || this.props.ItemSeparatorComponent;
-    const {SectionSeparatorComponent} = this.props;
-    const isLastItemInList = index === this.state.childProps.getItemCount() - 1;
-    const isLastItemInSection = info.index === info.section.data.length - 1;
-    if (SectionSeparatorComponent && isLastItemInSection) {
-      return SectionSeparatorComponent;
-    }
-    if (ItemSeparatorComponent && !isLastItemInSection && !isLastItemInList) {
-      return ItemSeparatorComponent;
-    }
-    return null;
-  }
-
-  _computeState(props: Props<SectionT>): State {
-    const offset = props.ListHeaderComponent ? 1 : 0;
-    const stickyHeaderIndices = [];
-    const itemCount = props.sections.reduce(
-      (v, section) => {
-        stickyHeaderIndices.push(v + offset);
-        return v + section.data.length + 1;
-      },
-      0
-    );
-    return {
-      childProps: {
-        ...props,
-        renderItem: this._renderItem,
-        ItemSeparatorComponent: undefined, // Rendered with renderItem
-        data: props.sections,
-        getItemCount: () => itemCount,
-        getItem,
-        keyExtractor: this._keyExtractor,
-        onViewableItemsChanged:
-          props.onViewableItemsChanged ? this._onViewableItemsChanged : undefined,
-        stickyHeaderIndices: props.stickySectionHeadersEnabled ? stickyHeaderIndices : undefined,
-      },
-    };
-  }
-
-  constructor(props: Props<SectionT>, context: Object) {
-    super(props, context);
-    this.state = this._computeState(props);
-  }
-
-  componentWillReceiveProps(nextProps: Props<SectionT>) {
-    this.setState(this._computeState(nextProps));
-  }
-
-  render() {
-    return <VirtualizedList {...this.state.childProps} ref={this._captureRef} />;
-  }
-
-  _cellRefs = {};
-  _listRef: VirtualizedList;
-  _captureRef = (ref) => { this._listRef = ref; };
-}
-
-class ItemWithSeparator extends React.Component {
-  props: {
-    LeadingSeparatorComponent: ?ReactClass<*>,
-    SeparatorComponent: ?ReactClass<*>,
-    cellKey: string,
-    index: number,
-    item: Item,
-    onUpdateSeparator: (cellKey: string, newProps: Object) => void,
-    prevCellKey?: ?string,
-    renderItem: Function,
-    section: Object,
-  };
-
-  state = {
-    separatorProps: {
-      highlighted: false,
-      leadingItem: this.props.item,
-      leadingSection: this.props.section,
-    },
-    leadingSeparatorProps: {
-      highlighted: false,
-    },
-  };
-
-  _separators = {
-    highlight: () => {
-      ['leading', 'trailing'].forEach(s => this._separators.updateProps(s, {highlighted: true}));
-    },
-    unhighlight: () => {
-      ['leading', 'trailing'].forEach(s => this._separators.updateProps(s, {highlighted: false}));
-    },
-    updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
-      const {LeadingSeparatorComponent, cellKey, prevCellKey} = this.props;
-      if (select === 'leading' && LeadingSeparatorComponent) {
-        this.setState(state => ({
-          leadingSeparatorProps: {...state.leadingSeparatorProps, ...newProps}
-        }));
-      } else {
-        this.props.onUpdateSeparator((select === 'leading' && prevCellKey) || cellKey, newProps);
-      }
-    },
-  };
-
-  updateSeparatorProps(newProps: Object) {
-    this.setState(state => ({separatorProps: {...state.separatorProps, ...newProps}}));
-  }
-
-  render() {
-    const {LeadingSeparatorComponent, SeparatorComponent, renderItem, item, index} = this.props;
-    const element = renderItem({
-      item,
-      index,
-      separators: this._separators,
-    });
-    const leadingSeparator = LeadingSeparatorComponent &&
-      <LeadingSeparatorComponent {...this.state.leadingSeparatorProps} />;
-    const separator = SeparatorComponent && <SeparatorComponent {...this.state.separatorProps} />;
-    return separator ? <View>{leadingSeparator}{element}{separator}</View> : element;
-  }
-}
-
-function getItem(sections: ?Array<Item>, index: number): ?Item {
-  if (!sections) {
-    return null;
-  }
-  let itemIdx = index - 1;
-  for (let ii = 0; ii < sections.length; ii++) {
-    if (itemIdx === -1) {
-      return sections[ii]; // The section itself is the item
-    } else if (itemIdx < sections[ii].data.length) {
-      return sections[ii].data[itemIdx];
-    } else {
-      itemIdx -= (sections[ii].data.length + 1);
-    }
-  }
-  return null;
-}
-
-module.exports = VirtualizedSectionList;

package/__flowtests__/FlatList-flowtest.js

@@ -1,90 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @flow
- */
-
-'use strict';
-
-const FlatList = require('FlatList');
-const React = require('react');
-
-function renderMyListItem(info: {item: {title: string}, index: number}) {
-  return <span />;
-}
-
-module.exports = {
-  testEverythingIsFine() {
-    const data = [{
-      title: 'Title Text',
-      key: 1,
-    }];
-    return <FlatList renderItem={renderMyListItem} data={data} />;
-  },
-
-  testBadDataWithTypicalItem() {
-    // $FlowExpectedError - bad title type 6, should be string
-    const data = [{
-      title: 6,
-      key: 1,
-    }];
-    return <FlatList renderItem={renderMyListItem} data={data} />;
-  },
-
-  testMissingFieldWithTypicalItem() {
-    const data = [{
-      key: 1,
-    }];
-    // $FlowExpectedError - missing title
-    return <FlatList renderItem={renderMyListItem} data={data} />;
-  },
-
-  testGoodDataWithBadCustomRenderItemFunction() {
-    const data = [{
-      widget: 6,
-      key: 1,
-    }];
-    return (
-      <FlatList
-        renderItem={(info) =>
-          // $FlowExpectedError - bad widgetCount type 6, should be Object
-          <span>{info.item.widget.missingProp}</span>
-        }
-        data={data}
-      />
-    );
-  },
-
-  testBadRenderItemFunction() {
-    const data = [{
-      title: 'foo',
-      key: 1,
-    }];
-    return [
-      // $FlowExpectedError - title should be inside `item`
-      <FlatList renderItem={(info: {title: string}) => <span /> } data={data} />,
-      // $FlowExpectedError - bad index type string, should be number
-      <FlatList renderItem={(info: {item: any, index: string}) => <span /> } data={data} />,
-      // $FlowExpectedError - bad title type number, should be string
-      <FlatList renderItem={(info: {item: {title: number}}) => <span /> } data={data} />,
-      // EverythingIsFine
-      <FlatList renderItem={(info: {item: {title: string}}) => <span /> } data={data} />,
-    ];
-  },
-
-  testOtherBadProps() {
-    return [
-      // $FlowExpectedError - bad numColumns type "lots"
-      <FlatList renderItem={renderMyListItem} data={[]} numColumns="lots" />,
-      // $FlowExpectedError - bad windowSize type "big"
-      <FlatList renderItem={renderMyListItem} data={[]} windowSize="big" />,
-      // $FlowExpectedError - missing `data` prop
-      <FlatList renderItem={renderMyListItem} />,
-    ];
-  },
-};

package/__flowtests__/SectionList-flowtest.js

@@ -1,89 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @flow
- */
-
-'use strict';
-
-const React = require('react');
-const SectionList = require('SectionList');
-
-function renderMyListItem(info: {item: {title: string}, index: number}) {
-  return <span />;
-}
-
-const renderMyHeader = ({section}: {section: {fooNumber: number} & Object}) => <span />;
-
-module.exports = {
-  testGoodDataWithGoodItem() {
-    const sections = [{
-      key: 'a', data: [{
-        title: 'foo',
-        key: 1,
-      }],
-    }];
-    return <SectionList renderItem={renderMyListItem} sections={sections} />;
-  },
-
-  testBadRenderItemFunction() {
-    const sections = [{
-      key: 'a', data: [{
-        title: 'foo',
-        key: 1,
-      }],
-    }];
-    return [
-      // $FlowExpectedError - title should be inside `item`
-      <SectionList renderItem={(info: {title: string}) => <span /> } sections={sections} />,
-      // $FlowExpectedError - bad index type string, should be number
-      <SectionList renderItem={(info: {index: string}) => <span /> } sections={sections} />,
-      // EverythingIsFine
-      <SectionList renderItem={(info: {item: {title: string}}) => <span /> } sections={sections} />,
-    ];
-  },
-
-  testBadInheritedDefaultProp(): React.Element<*> {
-    const sections = [];
-    // $FlowExpectedError - bad windowSize type "big"
-    return <SectionList renderItem={renderMyListItem} sections={sections} windowSize="big" />;
-  },
-
-  testMissingData(): React.Element<*> {
-    // $FlowExpectedError - missing `sections` prop
-    return <SectionList renderItem={renderMyListItem} />;
-  },
-
-  testBadSectionsShape(): React.Element<*> {
-    const sections = [{
-      key: 'a', items: [{
-        title: 'foo',
-        key: 1,
-      }],
-    }];
-    // $FlowExpectedError - section missing `data` field
-    return <SectionList renderItem={renderMyListItem} sections={sections} />;
-  },
-
-  testBadSectionsMetadata(): React.Element<*> {
-    // $FlowExpectedError - section has bad meta data `fooNumber` field of type string
-    const sections = [{
-      key: 'a', fooNumber: 'string', data: [{
-        title: 'foo',
-        key: 1,
-      }],
-    }];
-    return (
-      <SectionList
-        renderSectionHeader={renderMyHeader}
-        renderItem={renderMyListItem}
-        sections={sections}
-      />
-    );
-  },
-};

package/__tests__/FillRateHelper-test.js

@@ -1,106 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- */
-'use strict';
-
-jest.unmock('FillRateHelper');
-
-const FillRateHelper = require('FillRateHelper');
-
-let rowFramesGlobal;
-const dataGlobal = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}];
-function getFrameMetrics(index: number) {
-  const frame = rowFramesGlobal[dataGlobal[index].key];
-  return {length: frame.height, offset: frame.y, inLayout: frame.inLayout};
-}
-
-function computeResult({helper, props, state, scroll}) {
-  return helper.computeInfoSampled(
-    'test',
-    {
-      data: dataGlobal,
-      fillRateTrackingSampleRate: 1,
-      getItemCount: (data2) => data2.length,
-      initialNumToRender: 10,
-      ...(props || {}),
-    },
-    {first: 0, last: 1, ...(state || {})},
-    {offset: 0, visibleLength: 100, ...(scroll || {})},
-  );
-}
-
-describe('computeInfoSampled', function() {
-  beforeEach(() => {
-    FillRateHelper.setSampleRate(1);
-  });
-
-  it('computes correct blankness of viewport', function() {
-    const helper = new FillRateHelper(getFrameMetrics);
-    rowFramesGlobal = {
-      a: {y: 0, height: 50, inLayout: true},
-      b: {y: 50, height: 50, inLayout: true},
-    };
-    let result = computeResult({helper});
-    expect(result).toBeNull();
-    result = computeResult({helper, state: {last: 0}});
-    expect(result.event.blankness).toBe(0.5);
-    result = computeResult({helper, scroll: {offset: 25}});
-    expect(result.event.blankness).toBe(0.25);
-    result = computeResult({helper, scroll: {visibleLength: 400}});
-    expect(result.event.blankness).toBe(0.75);
-    result = computeResult({helper, scroll: {offset: 100}});
-    expect(result.event.blankness).toBe(1);
-    expect(result.aggregate.avg_blankness).toBe(0.5);
-  });
-
-  it('skips frames that are not in layout', function() {
-    const helper = new FillRateHelper(getFrameMetrics);
-    rowFramesGlobal = {
-      a: {y: 0, height: 10, inLayout: false},
-      b: {y: 10, height: 30, inLayout: true},
-      c: {y: 40, height: 40, inLayout: true},
-      d: {y: 80, height: 20, inLayout: false},
-    };
-    const result = computeResult({helper, state: {last: 3}});
-    expect(result.event.blankness).toBe(0.3);
-  });
-
-  it('sampling rate can disable', function() {
-    const helper = new FillRateHelper(getFrameMetrics);
-    rowFramesGlobal = {
-      a: {y: 0, height: 40, inLayout: true},
-      b: {y: 40, height: 40, inLayout: true},
-    };
-    let result = computeResult({helper});
-    expect(result.event.blankness).toBe(0.2);
-
-    FillRateHelper.setSampleRate(0);
-
-    result = computeResult({helper});
-    expect(result).toBeNull();
-  });
-
-  it('can handle multiple listeners and unsubscribe', function() {
-    const listeners = [jest.fn(), jest.fn(), jest.fn()];
-    const subscriptions = listeners.map(
-      (listener) => FillRateHelper.addFillRateExceededListener(listener)
-    );
-    subscriptions[1].remove();
-    const helper = new FillRateHelper(getFrameMetrics);
-    rowFramesGlobal = {
-      a: {y: 0, height: 40, inLayout: true},
-      b: {y: 40, height: 40, inLayout: true},
-    };
-    const result = computeResult({helper});
-    expect(result.event.blankness).toBe(0.2);
-    expect(listeners[0]).toBeCalledWith(result);
-    expect(listeners[1]).not.toBeCalled();
-    expect(listeners[2]).toBeCalledWith(result);
-  });
-});