Skip to content

Commit

Permalink
Pass invertStickyHeaders to ScrollView
Browse files Browse the repository at this point in the history 
Summary:
invertStickyHeaders was being set to "this.props.inverted" -- it should just inherit from the props of VirtualizedList instead, per discussion in facebook#18471

Fixes facebook#18471

Pass "invertStickyHeaders: false" to a SectionList (or FlatList), and expect that your sticky headers stick to the bottom of the ScrollView, instead of the top.

none

[ANDROID] [BUGFIX] [SectionList] - invertStickyHeaders can now be set from SectionList or FlatList.
Closes facebook#18524

Differential Revision: D7386163

Pulled By: hramos

fbshipit-source-id: 3b66dfca280e657303f69f98c5a8bc0df033f9f7
  • Loading branch information
@dannycochran @jacobp100
dannycochran authored and jacobp100 committed Apr 27, 2018
1 parent 53814d3 commit 2f0bf9c
Showing 1 changed file with 34 additions and 53 deletions.
87 changes: 34 additions & 53 deletions Libraries/Lists/VirtualizedList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @providesModule VirtualizedList
* @flow
* @format
*/
Expand Down Expand Up @@ -172,12 +173,6 @@ type OptionalProps = {
* @platform android
*/
progressViewOffset?: number,
/**
* A custom refresh control element. When set, it overrides the default
* <RefreshControl> component built internally. The onRefresh and refreshing
* props are also ignored. Only works for vertical VirtualizedList.
*/
refreshControl?: ?React.Element<any>,
/**
* Set this true while waiting for new data from a refresh.
*/
Expand Down Expand Up @@ -217,7 +212,6 @@ type OptionalProps = {
export type Props = RequiredProps & OptionalProps;

let _usedIndexForKey = false;
let _keylessItemComponentName: string = '';

type Frame = {
offset: number,
Expand Down Expand Up @@ -431,9 +425,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
return item.key;
}
_usedIndexForKey = true;
if (item.type && item.type.displayName) {
_keylessItemComponentName = item.type.displayName;
}
return String(index);
},
maxToRenderPerBatch: 10,
Expand Down Expand Up @@ -757,6 +748,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
cellKey={this._getCellKey() + '-header'}
key="$header">
<View onLayout={this._onLayoutHeader} style={inversionStyle}>
{/*
Flow doesn't know this is a React.Element and not a React.Component
$FlowFixMe https://fburl.com/b9xmtm09
*/}
{element}
</View>
</VirtualizedCellWrapper>,
Expand All @@ -765,7 +760,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const itemCount = this.props.getItemCount(data);
if (itemCount > 0) {
_usedIndexForKey = false;
_keylessItemComponentName = '';
const spacerKey = !horizontal ? 'height' : 'width';
const lastInitialIndex = this.props.initialScrollIndex
? -1
Expand Down Expand Up @@ -835,7 +829,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
console.warn(
'VirtualizedList: missing keys for items, make sure to specify a key property on each ' +
'item or provide a custom keyExtractor.',
_keylessItemComponentName,
);
this._hasWarned.keys = true;
}
Expand All @@ -857,25 +850,23 @@ class VirtualizedList extends React.PureComponent<Props, State> {
);
}
} else if (ListEmptyComponent) {
const element: React.Element<any> = ((React.isValidElement(
ListEmptyComponent,
) ? (
const element = React.isValidElement(ListEmptyComponent) ? (
ListEmptyComponent
) : (
// $FlowFixMe
<ListEmptyComponent />
)): any);
);
cells.push(
React.cloneElement(element, {
key: '$empty',
onLayout: event => {
this._onLayoutEmpty(event);
if (element.props.onLayout) {
element.props.onLayout(event);
}
},
style: [element.props.style, inversionStyle],
}),
<View
key="$empty"
onLayout={this._onLayoutEmpty}
style={inversionStyle}>
{/*
Flow doesn't know this is a React.Element and not a React.Component
$FlowFixMe https://fburl.com/b9xmtm09
*/}
{element}
</View>,
);
}
if (ListFooterComponent) {
Expand All @@ -890,6 +881,10 @@ class VirtualizedList extends React.PureComponent<Props, State> {
cellKey={this._getCellKey() + '-footer'}
key="$footer">
<View onLayout={this._onLayoutFooter} style={inversionStyle}>
{/*
Flow doesn't know this is a React.Element and not a React.Component
$FlowFixMe https://fburl.com/b9xmtm09
*/}
{element}
</View>
</VirtualizedCellWrapper>,
Expand All @@ -904,16 +899,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
onScrollEndDrag: this._onScrollEndDrag,
onMomentumScrollEnd: this._onMomentumScrollEnd,
scrollEventThrottle: this.props.scrollEventThrottle, // TODO: Android support
invertStickyHeaders:
this.props.invertStickyHeaders !== undefined
? this.props.invertStickyHeaders
: this.props.inverted,
invertStickyHeaders: this.props.invertStickyHeaders !== undefined
? this.props.invertStickyHeaders
: this.props.inverted,
stickyHeaderIndices,
};
if (inversionStyle) {
/* $FlowFixMe(>=0.70.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.70 was deployed. To see the error delete
* this comment and run Flow. */
scrollProps.style = [inversionStyle, this.props.style];
}

Expand Down Expand Up @@ -1005,10 +996,9 @@ class VirtualizedList extends React.PureComponent<Props, State> {
}

_defaultRenderScrollComponent = props => {
const onRefresh = props.onRefresh;
if (this._isNestedWithSameOrientation()) {
return <View {...props} />;
} else if (onRefresh) {
} else if (props.onRefresh) {
invariant(
typeof props.refreshing === 'boolean',
'`refreshing` prop must be set as a boolean in order to use `onRefresh`, but got `' +
Expand All @@ -1019,15 +1009,14 @@ class VirtualizedList extends React.PureComponent<Props, State> {
<ScrollView
{...props}
refreshControl={
props.refreshControl == null ? (
<RefreshControl
refreshing={props.refreshing}
onRefresh={onRefresh}
progressViewOffset={props.progressViewOffset}
/>
) : (
props.refreshControl
)
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
* comment suppresses an error when upgrading Flow's support for
* React. To see the error delete this comment and run Flow. */
<RefreshControl
refreshing={props.refreshing}
onRefresh={props.onRefresh}
progressViewOffset={props.progressViewOffset}
/>
}
/>
);
Expand Down Expand Up @@ -1133,9 +1122,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
const itemCount = this.props.getItemCount(this.props.data);
for (let ii = 0; ii < itemCount; ii++) {
const frame = this._getFrameMetricsApprox(ii);
/* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.68 was deployed. To see the error delete this
* comment and run Flow. */
if (frame.inLayout) {
framesInLayout.push(frame);
}
Expand Down Expand Up @@ -1660,9 +1646,6 @@ class CellRenderer extends React.Component<
separators: this._separators,
});
const onLayout =
/* $FlowFixMe(>=0.68.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.68 was deployed. To see the error delete this
* comment and run Flow. */
getItemLayout && !parentProps.debug && !fillRateHelper.enabled()
? undefined
: this.props.onLayout;
Expand All @@ -1675,9 +1658,7 @@ class CellRenderer extends React.Component<
? horizontal
? [{flexDirection: 'row-reverse'}, inversionStyle]
: [{flexDirection: 'column-reverse'}, inversionStyle]
: horizontal
? [{flexDirection: 'row'}, inversionStyle]
: inversionStyle;
: horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
if (!CellRendererComponent) {
return (
<View style={cellStyle} onLayout={onLayout}>
Expand Down

0 comments on commit 2f0bf9c

Please sign in to comment.