SectionList.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @flow
  8. * @format
  9. */
  10. 'use strict';
  11. const Platform = require('../Utilities/Platform');
  12. const React = require('react');
  13. const VirtualizedSectionList = require('./VirtualizedSectionList');
  14. import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
  15. import type {
  16. SectionBase as _SectionBase,
  17. Props as VirtualizedSectionListProps,
  18. ScrollToLocationParamsType,
  19. } from './VirtualizedSectionList';
  20. type Item = any;
  21. export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
  22. type RequiredProps<SectionT: SectionBase<any>> = {|
  23. /**
  24. * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist.html).
  25. *
  26. * General shape:
  27. *
  28. * sections: $ReadOnlyArray<{
  29. * data: $ReadOnlyArray<SectionItem>,
  30. * renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
  31. * ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
  32. * }>
  33. */
  34. sections: $ReadOnlyArray<SectionT>,
  35. |};
  36. type OptionalProps<SectionT: SectionBase<any>> = {|
  37. /**
  38. * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
  39. */
  40. renderItem?: (info: {
  41. item: Item,
  42. index: number,
  43. section: SectionT,
  44. separators: {
  45. highlight: () => void,
  46. unhighlight: () => void,
  47. updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
  48. ...
  49. },
  50. ...
  51. }) => null | React.Element<any>,
  52. /**
  53. * A marker property for telling the list to re-render (since it implements `PureComponent`). If
  54. * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the
  55. * `data` prop, stick it here and treat it immutably.
  56. */
  57. extraData?: any,
  58. /**
  59. * How many items to render in the initial batch. This should be enough to fill the screen but not
  60. * much more. Note these items will never be unmounted as part of the windowed rendering in order
  61. * to improve perceived performance of scroll-to-top actions.
  62. */
  63. initialNumToRender: number,
  64. /**
  65. * Reverses the direction of scroll. Uses scale transforms of -1.
  66. */
  67. inverted?: ?boolean,
  68. /**
  69. * Used to extract a unique key for a given item at the specified index. Key is used for caching
  70. * and as the react key to track item re-ordering. The default extractor checks item.key, then
  71. * falls back to using the index, like react does. Note that this sets keys for each item, but
  72. * each overall section still needs its own key.
  73. */
  74. keyExtractor: (item: Item, index: number) => string,
  75. /**
  76. * Called once when the scroll position gets within `onEndReachedThreshold` of the rendered
  77. * content.
  78. */
  79. onEndReached?: ?(info: {distanceFromEnd: number, ...}) => void,
  80. /**
  81. * Note: may have bugs (missing content) in some circumstances - use at your own risk.
  82. *
  83. * This may improve scroll performance for large lists.
  84. */
  85. removeClippedSubviews?: boolean,
  86. |};
  87. export type Props<SectionT> = {|
  88. ...$Diff<
  89. VirtualizedSectionListProps<SectionT>,
  90. {
  91. getItem: $PropertyType<VirtualizedSectionListProps<SectionT>, 'getItem'>,
  92. getItemCount: $PropertyType<
  93. VirtualizedSectionListProps<SectionT>,
  94. 'getItemCount',
  95. >,
  96. renderItem: $PropertyType<
  97. VirtualizedSectionListProps<SectionT>,
  98. 'renderItem',
  99. >,
  100. ...
  101. },
  102. >,
  103. ...RequiredProps<SectionT>,
  104. ...OptionalProps<SectionT>,
  105. |};
  106. const defaultProps = {
  107. ...VirtualizedSectionList.defaultProps,
  108. stickySectionHeadersEnabled: Platform.OS === 'ios',
  109. };
  110. type DefaultProps = typeof defaultProps;
  111. /**
  112. * A performant interface for rendering sectioned lists, supporting the most handy features:
  113. *
  114. * - Fully cross-platform.
  115. * - Configurable viewability callbacks.
  116. * - List header support.
  117. * - List footer support.
  118. * - Item separator support.
  119. * - Section header support.
  120. * - Section separator support.
  121. * - Heterogeneous data and item rendering support.
  122. * - Pull to Refresh.
  123. * - Scroll loading.
  124. *
  125. * If you don't need section support and want a simpler interface, use
  126. * [`<FlatList>`](https://reactnative.dev/docs/flatlist.html).
  127. *
  128. * Simple Examples:
  129. *
  130. * <SectionList
  131. * renderItem={({item}) => <ListItem title={item} />}
  132. * renderSectionHeader={({section}) => <Header title={section.title} />}
  133. * sections={[ // homogeneous rendering between sections
  134. * {data: [...], title: ...},
  135. * {data: [...], title: ...},
  136. * {data: [...], title: ...},
  137. * ]}
  138. * />
  139. *
  140. * <SectionList
  141. * sections={[ // heterogeneous rendering between sections
  142. * {data: [...], renderItem: ...},
  143. * {data: [...], renderItem: ...},
  144. * {data: [...], renderItem: ...},
  145. * ]}
  146. * />
  147. *
  148. * This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
  149. * and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
  150. * here, along with the following caveats:
  151. *
  152. * - Internal state is not preserved when content scrolls out of the render window. Make sure all
  153. * your data is captured in the item data or external stores like Flux, Redux, or Relay.
  154. * - This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
  155. * equal. Make sure that everything your `renderItem` function depends on is passed as a prop
  156. * (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
  157. * changes. This includes the `data` prop and parent component state.
  158. * - In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
  159. * offscreen. This means it's possible to scroll faster than the fill rate and momentarily see
  160. * blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
  161. * and we are working on improving it behind the scenes.
  162. * - By default, the list looks for a `key` prop on each item and uses that for the React key.
  163. * Alternatively, you can provide a custom `keyExtractor` prop.
  164. *
  165. */
  166. class SectionList<SectionT: SectionBase<any>> extends React.PureComponent<
  167. Props<SectionT>,
  168. void,
  169. > {
  170. props: Props<SectionT>;
  171. static defaultProps: DefaultProps = defaultProps;
  172. /**
  173. * Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section)
  174. * positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be
  175. * covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. `viewOffset` is a
  176. * fixed number of pixels to offset the final target position, e.g. to compensate for sticky
  177. * headers.
  178. *
  179. * Note: cannot scroll to locations outside the render window without specifying the
  180. * `getItemLayout` prop.
  181. */
  182. scrollToLocation(params: ScrollToLocationParamsType) {
  183. if (this._wrapperListRef != null) {
  184. this._wrapperListRef.scrollToLocation(params);
  185. }
  186. }
  187. /**
  188. * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
  189. * if `waitForInteractions` is true and the user has not scrolled. This is typically called by
  190. * taps on items or by navigation actions.
  191. */
  192. recordInteraction() {
  193. const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
  194. listRef && listRef.recordInteraction();
  195. }
  196. /**
  197. * Displays the scroll indicators momentarily.
  198. *
  199. * @platform ios
  200. */
  201. flashScrollIndicators() {
  202. const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
  203. listRef && listRef.flashScrollIndicators();
  204. }
  205. /**
  206. * Provides a handle to the underlying scroll responder.
  207. */
  208. getScrollResponder(): ?ScrollResponderType {
  209. const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
  210. if (listRef) {
  211. return listRef.getScrollResponder();
  212. }
  213. }
  214. getScrollableNode(): any {
  215. const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
  216. if (listRef) {
  217. return listRef.getScrollableNode();
  218. }
  219. }
  220. setNativeProps(props: Object) {
  221. const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
  222. if (listRef) {
  223. listRef.setNativeProps(props);
  224. }
  225. }
  226. render(): React.Node {
  227. return (
  228. <VirtualizedSectionList
  229. {...this.props}
  230. ref={this._captureRef}
  231. getItemCount={items => items.length}
  232. getItem={(items, index) => items[index]}
  233. />
  234. );
  235. }
  236. _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
  237. _captureRef = ref => {
  238. /* $FlowFixMe(>=0.99.0 site=react_native_fb) This comment suppresses an
  239. * error found when Flow v0.99 was deployed. To see the error, delete this
  240. * comment and run Flow. */
  241. this._wrapperListRef = ref;
  242. };
  243. }
  244. module.exports = SectionList;