react-native-list 1.0.1 → 2.0.0-alpha.2

package/LICENSE.md

@@ -1,31 +0,0 @@
-BSD License
-
-For React Native software
-
-Copyright (c) 2015-present, Facebook, Inc. All rights reserved.
-Copyright (c) 2017-present, Alexey Kureev
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
- * Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
- * Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
- * Neither the name Facebook nor the names of its contributors may be used to
-   endorse or promote products derived from this software without specific
-   prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/MetroListView.js

@@ -1,166 +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 MetroListView
- * @flow
- */
-'use strict';
-
-const ListView = require('ListView');
-const React = require('React');
-const RefreshControl = require('RefreshControl');
-const ScrollView = require('ScrollView');
-
-const invariant = require('fbjs/lib/invariant');
-
-type Item = any;
-
-type NormalProps = {
-  FooterComponent?: ReactClass<*>,
-  renderItem: (info: Object) => ?React.Element<*>,
-  renderSectionHeader?: ({section: Object}) => ?React.Element<*>,
-  SeparatorComponent?: ?ReactClass<*>, // not supported yet
-
-  // Provide either `items` or `sections`
-  items?: ?Array<Item>, // By default, an Item is assumed to be {key: string}
-  // $FlowFixMe - Something is a little off with the type Array<Item>
-  sections?: ?Array<{key: string, data: Array<Item>}>,
-
-  /**
-   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
-   * sure to also set the `refreshing` prop correctly.
-   */
-  onRefresh?: ?Function,
-  /**
-   * Set this true while waiting for new data from a refresh.
-   */
-  refreshing?: boolean,
-  /**
-   * If true, renders items next to each other horizontally instead of stacked vertically.
-   */
-  horizontal?: ?boolean,
-};
-type DefaultProps = {
-  keyExtractor: (item: Item, index: number) => string,
-};
-/* $FlowFixMe - the renderItem passed in from SectionList is optional there but
- * required here */
-type Props = NormalProps & DefaultProps;
-
-/**
- * This is just a wrapper around the legacy ListView that matches the new API of FlatList, but with
- * some section support tacked on. It is recommended to just use FlatList directly, this component
- * is mostly for debugging and performance comparison.
- */
-class MetroListView extends React.Component {
-  props: Props;
-  scrollToEnd(params?: ?{animated?: ?boolean}) {
-    throw new Error('scrollToEnd not supported in legacy ListView.');
-  }
-  scrollToIndex(params: {animated?: ?boolean, index: number, viewPosition?: number}) {
-    throw new Error('scrollToIndex not supported in legacy ListView.');
-  }
-  scrollToItem(params: {animated?: ?boolean, item: Item, viewPosition?: number}) {
-    throw new Error('scrollToItem not supported in legacy ListView.');
-  }
-  scrollToLocation() {
-    throw new Error('scrollToLocation not supported in legacy ListView.');
-  }
-  scrollToOffset(params: {animated?: ?boolean, offset: number}) {
-    const {animated, offset} = params;
-    this._listRef.scrollTo(
-      this.props.horizontal ? {x: offset, animated} : {y: offset, animated}
-    );
-  }
-  getListRef() {
-    return this._listRef;
-  }
-  static defaultProps: DefaultProps = {
-    keyExtractor: (item, index) => item.key || String(index),
-    renderScrollComponent: (props: Props) => {
-      if (props.onRefresh) {
-        return (
-          <ScrollView
-            {...props}
-            refreshControl={
-              <RefreshControl
-                refreshing={props.refreshing}
-                onRefresh={props.onRefresh}
-              />
-            }
-          />
-        );
-      } else {
-        return <ScrollView {...props} />;
-      }
-    },
-  };
-  state = this._computeState(
-    this.props,
-    {
-      ds: new ListView.DataSource({
-        rowHasChanged: (itemA, itemB) => true,
-        sectionHeaderHasChanged: () => true,
-        getSectionHeaderData: (dataBlob, sectionID) => this.state.sectionHeaderData[sectionID],
-      }),
-      sectionHeaderData: {},
-    },
-  );
-  componentWillReceiveProps(newProps: Props) {
-    this.setState((state) => this._computeState(newProps, state));
-  }
-  render() {
-    return (
-      <ListView
-        {...this.props}
-        dataSource={this.state.ds}
-        ref={this._captureRef}
-        renderRow={this._renderRow}
-        renderFooter={this.props.FooterComponent && this._renderFooter}
-        renderSectionHeader={this.props.sections && this._renderSectionHeader}
-        renderSeparator={this.props.SeparatorComponent && this._renderSeparator}
-      />
-    );
-  }
-  _listRef: ListView;
-  _captureRef = (ref) => { this._listRef = ref; };
-  _computeState(props: Props, state) {
-    const sectionHeaderData = {};
-    if (props.sections) {
-      invariant(!props.items, 'Cannot have both sections and items props.');
-      const sections = {};
-      props.sections.forEach((sectionIn, ii) => {
-        const sectionID = 's' + ii;
-        sections[sectionID] = sectionIn.data;
-        sectionHeaderData[sectionID] = sectionIn;
-      });
-      return {
-        ds: state.ds.cloneWithRowsAndSections(sections),
-        sectionHeaderData,
-      };
-    } else {
-      invariant(!props.sections, 'Cannot have both sections and items props.');
-      return {
-        ds: state.ds.cloneWithRows(props.items),
-        sectionHeaderData,
-      };
-    }
-  }
-  _renderFooter = () => <this.props.FooterComponent key="$footer" />;
-  _renderRow = (item, sectionID, rowID, highlightRow) => {
-    return this.props.renderItem({item, index: rowID});
-  };
-  _renderSectionHeader = (section, sectionID) => {
-    const {renderSectionHeader} = this.props;
-    invariant(renderSectionHeader, 'Must provide renderSectionHeader with sections prop');
-    return renderSectionHeader({section});
-  }
-  _renderSeparator = (sID, rID) => <this.props.SeparatorComponent key={sID + rID} />;
-}
-
-module.exports = MetroListView;

package/SectionList.js

@@ -1,291 +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 SectionList
- * @flow
- */
-'use strict';
-
-const MetroListView = require('MetroListView');
-const Platform = require('Platform');
-const React = require('React');
-const VirtualizedSectionList = require('VirtualizedSectionList');
-
-import type {ViewToken} from 'ViewabilityHelper';
-import type {Props as VirtualizedSectionListProps} from 'VirtualizedSectionList';
-
-type Item = any;
-
-type SectionBase<SectionItemT> = {
-  // Must be provided directly on each section.
-  data: Array<SectionItemT>,
-  key: string,
-
-  // Optional props will override list-wide props just for this section.
-  renderItem?: ?(info: {
-    item: SectionItemT,
-    index: number,
-    separators: {
-      highlight: () => void,
-      unhighlight: () => void,
-      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-    },
-  }) => ?React.Element<any>,
-  ItemSeparatorComponent?: ?ReactClass<any>,
-  keyExtractor?: (item: SectionItemT) => string,
-
-  // TODO: support more optional/override props
-  // onViewableItemsChanged?: ...
-};
-
-type RequiredProps<SectionT: SectionBase<any>> = {
-  /**
-   * The actual data to render, akin to the `data` prop in [`<FlatList>`](/react-native/docs/flatlist.html).
-   *
-   * General shape:
-   *
-   *     sections: Array<{
-   *       data: Array<SectionItem>,
-   *       key: string,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
-   *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
-   *     }>
-   */
-  sections: Array<SectionT>,
-};
-
-type OptionalProps<SectionT: SectionBase<any>> = {
-  /**
-   * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
-   */
-  renderItem: (info: {
-    item: Item,
-    index: number,
-    separators: {
-      highlight: () => void,
-      unhighlight: () => void,
-      updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
-    },
-  }) => ?React.Element<any>,
-  /**
-   * Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
-   * `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
-   * which will update the `highlighted` prop, but you can also add custom props with
-   * `separators.updateProps`.
-   */
-  ItemSeparatorComponent?: ?ReactClass<any>,
-  /**
-   * Rendered at the very beginning of the list.
-   */
-  ListHeaderComponent?: ?(ReactClass<any> | React.Element<any>),
-  /**
-   * Rendered at the very end of the list.
-   */
-  ListFooterComponent?: ?(ReactClass<any> | React.Element<any>),
-  /**
-   * Rendered in between each section. Also receives `highlighted`, `leadingItem`, and any custom
-   * props from `separators.updateProps`.
-   */
-  SectionSeparatorComponent?: ?ReactClass<any>,
-  /**
-   * A marker property for telling the list to re-render (since it implements `PureComponent`). If
-   * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
-   * `data` prop, stick it here and treat it immutably.
-   */
-  extraData?: any,
-  /**
-   * How many items to render in the initial batch. This should be enough to fill the screen but not
-   * much more. Note these items will never be unmounted as part of the windowed rendering in order
-   * to improve perceived performance of scroll-to-top actions.
-   */
-  initialNumToRender: number,
-  /**
-   * Used to extract a unique key for a given item at the specified index. Key is used for caching
-   * and as the react key to track item re-ordering. The default extractor checks item.key, then
-   * falls back to using the index, like react does.
-   */
-
-  keyExtractor: (item: Item, index: number) => string,
-  /**
-   * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
-   * content.
-   */
-  onEndReached?: ?(info: {distanceFromEnd: number}) => void,
-  /**
-   * How far from the end (in units of visible length of the list) the bottom edge of the
-   * list must be from the end of the content to trigger the `onEndReached` callback.
-   * Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
-   * within half the visible length of the list.
-   */
-  onEndReachedThreshold?: ?number,
-  /**
-   * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
-   * sure to also set the `refreshing` prop correctly.
-   */
-  onRefresh?: ?() => void,
-  /**
-   * Called when the viewability of rows changes, as defined by the
-   * `viewabilityConfig` prop.
-   */
-  onViewableItemsChanged?: ?(info: {
-    viewableItems: Array<ViewToken>,
-    changed: Array<ViewToken>,
-  }) => void,
-  /**
-   * Set this true while waiting for new data from a refresh.
-   */
-  refreshing?: ?boolean,
-  /**
-   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
-   *
-   * This may improve scroll performance for large lists.
-   */
-  removeClippedSubviews?: boolean,
-  /**
-   * Rendered at the top of each section. These stick to the top of the `ScrollView` by default on
-   * iOS. See `stickySectionHeadersEnabled`.
-   */
-  renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any>,
-  /**
-   * Makes section headers stick to the top of the screen until the next one pushes it off. Only
-   * enabled by default on iOS because that is the platform standard there.
-   */
-  stickySectionHeadersEnabled?: boolean,
-
-  legacyImplementation?: ?boolean,
-};
-
-type Props<SectionT> = RequiredProps<SectionT>
-  & OptionalProps<SectionT>
-  & VirtualizedSectionListProps<SectionT>;
-
-const defaultProps = {
-  ...VirtualizedSectionList.defaultProps,
-  stickySectionHeadersEnabled: Platform.OS === 'ios',
-};
-
-type DefaultProps = typeof defaultProps;
-
-/**
- * A performant interface for rendering sectioned lists, supporting the most handy features:
- *
- *  - Fully cross-platform.
- *  - Configurable viewability callbacks.
- *  - List header support.
- *  - List footer support.
- *  - Item separator support.
- *  - Section header support.
- *  - Section separator support.
- *  - Heterogeneous data and item rendering support.
- *  - Pull to Refresh.
- *  - Scroll loading.
- *
- * If you don't need section support and want a simpler interface, use
- * [`<FlatList>`](/react-native/docs/flatlist.html).
- *
- * Simple Examples:
- *
- *     <SectionList
- *       renderItem={({item}) => <ListItem title={item.title}}
- *       renderSectionHeader={({section}) => <H1 title={section.key} />}
- *       sections={[ // homogenous rendering between sections
- *         {data: [...], key: ...},
- *         {data: [...], key: ...},
- *         {data: [...], key: ...},
- *       ]}
- *     />
- *
- *     <SectionList
- *       sections={[ // heterogeneous rendering between sections
- *         {data: [...], key: ..., renderItem: ...},
- *         {data: [...], key: ..., renderItem: ...},
- *         {data: [...], key: ..., renderItem: ...},
- *       ]}
- *     />
- *
- * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
- * and thus inherits it's props (as well as those of `ScrollView`) that aren't explicitly listed
- * here, along with the following caveats:
- *
- * - Internal state is not preserved when content scrolls out of the render window. Make sure all
- *   your data is captured in the item data or external stores like Flux, Redux, or Relay.
- * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
- *   equal. Make sure that everything your `renderItem` function depends on is passed as a prop
- *   (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
- *   changes. This includes the `data` prop and parent component state.
- * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
- *   offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
- *   blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
- *   and we are working on improving it behind the scenes.
- * - By default, the list looks for a `key` prop on each item and uses that for the React key.
- *   Alternatively, you can provide a custom `keyExtractor` prop.
- *
- */
-class SectionList<SectionT: SectionBase<any>>
-  extends React.PureComponent<DefaultProps, Props<SectionT>, void>
-{
-  props: Props<SectionT>;
-  static defaultProps: DefaultProps = defaultProps;
-
-  /**
-   * Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section)
-   * positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be
-   * covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. `viewOffset` is a
-   * fixed number of pixels to offset the final target position, e.g. to compensate for sticky
-   * headers.
-   *
-   * Note: cannot scroll to locations outside the render window without specifying the
-   * `getItemLayout` prop.
-   */
-  scrollToLocation(params: {
-    animated?: ?boolean,
-    itemIndex: number,
-    sectionIndex: number,
-    viewOffset?: number,
-    viewPosition?: number,
-  }) {
-    this._wrapperListRef.scrollToLocation(params);
-  }
-
-  /**
-   * Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
-   * if `waitForInteractions` is true and the user has not scrolled. This is typically called by
-   * taps on items or by navigation actions.
-   */
-  recordInteraction() {
-    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
-    listRef && listRef.recordInteraction();
-  }
-
-  /**
-   * Provides a handle to the underlying scroll responder.
-   */
-  getScrollResponder() {
-    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
-    if (listRef) {
-      return listRef.getScrollResponder();
-    }
-  }
-
-  getScrollableNode() {
-    const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
-    if (listRef) {
-      return listRef.getScrollableNode();
-    }
-  }
-
-  render() {
-    const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
-    return <List {...this.props} ref={this._captureRef} />;
-  }
-
-  _wrapperListRef: MetroListView | VirtualizedSectionList<any>;
-  _captureRef = (ref) => { this._wrapperListRef = ref; };
-}
-
-module.exports = SectionList;