-
Notifications
You must be signed in to change notification settings - Fork 3.7k
fix content alignment & improvemance #85306
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
NJ-2020
wants to merge
13
commits into
Expensify:main
Choose a base branch
from
NJ-2020:fix/regression-37447-1
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
13 commits
Select commit
Hold shift + click to select a range
6b2ebd6
fix content alignment & improvemance
NJ-2020 881bd22
fix check error
NJ-2020 495d176
fix: native bug & improvemance
NJ-2020 bb06be6
fix
NJ-2020 aaf5bcc
fix: prettier
NJ-2020 e6e8657
Merge branch 'Expensify:main' into fix/regression-37447-1
NJ-2020 0628684
fix: platform consistency
NJ-2020 c1acd81
fix prettier
NJ-2020 573213a
fix: eslint
NJ-2020 3305b14
Merge branch 'main' into fix/regression-37447-1
NJ-2020 b7316a8
re-implement #82507
NJ-2020 3bc0fc3
fix crash bug
NJ-2020 23ef347
Merge branch 'Expensify:main' into fix/regression-37447-1
NJ-2020 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
197 changes: 197 additions & 0 deletions
197
patches/react-native-web/react-native-web+0.21.2+013+fix-selection-bug.patch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| diff --git a/node_modules/react-native-web/dist/exports/ScrollView/index.js b/node_modules/react-native-web/dist/exports/ScrollView/index.js | ||
| index c4f9b5b..cc5076e 100644 | ||
| --- a/node_modules/react-native-web/dist/exports/ScrollView/index.js | ||
| +++ b/node_modules/react-native-web/dist/exports/ScrollView/index.js | ||
| @@ -558,8 +558,9 @@ class ScrollView extends React.Component { | ||
| var children = hasStickyHeaderIndices || pagingEnabled ? React.Children.map(this.props.children, (child, i) => { | ||
| var isSticky = hasStickyHeaderIndices && stickyHeaderIndices.indexOf(i) > -1; | ||
| if (child != null && (isSticky || pagingEnabled)) { | ||
| + var stickyItemIndex = (this.props.children.length - 1) - i + 10; | ||
| return /*#__PURE__*/React.createElement(View, { | ||
| - style: [isSticky && styles.stickyHeader, pagingEnabled && styles.pagingEnabledChild] | ||
| + style: [isSticky && styles.stickyHeader, pagingEnabled && styles.pagingEnabledChild, isSticky && {zIndex: stickyItemIndex}] | ||
| }, child); | ||
| } else { | ||
| return child; | ||
| @@ -636,7 +637,6 @@ var styles = StyleSheet.create({ | ||
| stickyHeader: { | ||
| position: 'sticky', | ||
| top: 0, | ||
| - zIndex: 10 | ||
| }, | ||
| pagingEnabledHorizontal: { | ||
| scrollSnapType: 'x mandatory' | ||
| diff --git a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js | ||
| index 42c4984..0124746 100644 | ||
| --- a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js | ||
| +++ b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js | ||
| @@ -108,6 +108,15 @@ function windowSizeOrDefault(windowSize) { | ||
| * | ||
| */ | ||
| class VirtualizedList extends StateSafePureComponent { | ||
| + // reverse push order logic when props.inverted = true | ||
| + pushOrUnshift(input, item) { | ||
| + if (this.props.inverted) { | ||
| + input.unshift(item); | ||
| + } else { | ||
| + input.push(item); | ||
| + } | ||
| + } | ||
| + | ||
| // scrollToEnd may be janky without getItemLayout prop | ||
| scrollToEnd(params) { | ||
| var animated = params ? params.animated : true; | ||
| @@ -343,6 +352,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| }; | ||
| this._defaultRenderScrollComponent = props => { | ||
| var onRefresh = props.onRefresh; | ||
| + var inversionStyle = this.props.inverted ? this.props.horizontal ? styles.rowReverse : styles.columnReverse : null; | ||
| if (this._isNestedWithSameOrientation()) { | ||
| // $FlowFixMe[prop-missing] - Typing ReactNativeComponent revealed errors | ||
| return /*#__PURE__*/React.createElement(View, props); | ||
| @@ -354,6 +364,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| // $FlowFixMe[prop-missing] Invalid prop usage | ||
| // $FlowFixMe[incompatible-use] | ||
| React.createElement(ScrollView, _extends({}, props, { | ||
| + contentContainerStyle: StyleSheet.compose(inversionStyle, this.props.contentContainerStyle), | ||
| refreshControl: props.refreshControl == null ? /*#__PURE__*/React.createElement(RefreshControl | ||
| // $FlowFixMe[incompatible-type] | ||
| , { | ||
| @@ -366,7 +377,9 @@ class VirtualizedList extends StateSafePureComponent { | ||
| } else { | ||
| // $FlowFixMe[prop-missing] Invalid prop usage | ||
| // $FlowFixMe[incompatible-use] | ||
| - return /*#__PURE__*/React.createElement(ScrollView, props); | ||
| + return /*#__PURE__*/React.createElement(ScrollView, _extends({}, props, { | ||
| + contentContainerStyle: StyleSheet.compose(inversionStyle, this.props.contentContainerStyle) | ||
| + })); | ||
| } | ||
| }; | ||
| this._onCellLayout = (e, cellKey, index) => { | ||
| @@ -568,6 +581,17 @@ class VirtualizedList extends StateSafePureComponent { | ||
| this._updateViewableItems(this.props, this.state.cellsAroundViewport); | ||
| this.setState((state, props) => { | ||
| var cellsAroundViewport = this._adjustCellsAroundViewport(props, state.cellsAroundViewport, state.pendingScrollUpdateCount); | ||
| + | ||
| + // revert the state if calculations are off | ||
| + // this would only happen on the inverted flatlist (probably a bug with overscroll-behavior) | ||
| + // when scrolled from bottom all the way up until onEndReached is triggered | ||
| + if (cellsAroundViewport.first === cellsAroundViewport.last) { | ||
| + var constrainedPrev = VirtualizedList._constrainToItemCount(state.cellsAroundViewport, props); | ||
| + if (constrainedPrev.last > constrainedPrev.first) { | ||
| + cellsAroundViewport = constrainedPrev; | ||
| + } | ||
| + } | ||
| + | ||
| var renderMask = VirtualizedList._createRenderMask(props, cellsAroundViewport, this._getNonViewportRenderRegions(props)); | ||
| if (cellsAroundViewport.first === state.cellsAroundViewport.first && cellsAroundViewport.last === state.cellsAroundViewport.last && renderMask.equals(state.renderMask)) { | ||
| return null; | ||
| @@ -679,7 +703,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| onViewableItemsChanged = _this$props3.onViewableItemsChanged, | ||
| viewabilityConfig = _this$props3.viewabilityConfig; | ||
| if (onViewableItemsChanged) { | ||
| - this._viewabilityTuples.push({ | ||
| + this.pushOrUnshift(this._viewabilityTuples, { | ||
| viewabilityHelper: new ViewabilityHelper(viewabilityConfig), | ||
| onViewableItemsChanged: onViewableItemsChanged | ||
| }); | ||
| @@ -991,15 +1015,15 @@ class VirtualizedList extends StateSafePureComponent { | ||
| var end = getItemCount(data) - 1; | ||
| var prevCellKey; | ||
| last = Math.min(end, last); | ||
| - var _loop = function _loop() { | ||
| + var _loop = () => { | ||
| var item = getItem(data, ii); | ||
| var key = VirtualizedList._keyExtractor(item, ii, _this.props); | ||
| _this._indicesToKeys.set(ii, key); | ||
| if (stickyIndicesFromProps.has(ii + stickyOffset)) { | ||
| - stickyHeaderIndices.push(cells.length); | ||
| + this.pushOrUnshift(stickyHeaderIndices, cells.length); | ||
| } | ||
| var shouldListenForLayout = getItemLayout == null || debug || _this._fillRateHelper.enabled(); | ||
| - cells.push(/*#__PURE__*/React.createElement(CellRenderer, _extends({ | ||
| + this.pushOrUnshift(cells, /*#__PURE__*/React.createElement(CellRenderer, _extends({ | ||
| CellRendererComponent: CellRendererComponent, | ||
| ItemSeparatorComponent: ii < end ? ItemSeparatorComponent : undefined, | ||
| ListItemComponent: ListItemComponent, | ||
| @@ -1074,14 +1098,14 @@ class VirtualizedList extends StateSafePureComponent { | ||
| // 1. Add cell for ListHeaderComponent | ||
| if (ListHeaderComponent) { | ||
| if (stickyIndicesFromProps.has(0)) { | ||
| - stickyHeaderIndices.push(0); | ||
| + this.pushOrUnshift(stickyHeaderIndices, 0); | ||
| } | ||
| var _element = /*#__PURE__*/React.isValidElement(ListHeaderComponent) ? ListHeaderComponent : | ||
| /*#__PURE__*/ | ||
| // $FlowFixMe[not-a-component] | ||
| // $FlowFixMe[incompatible-type-arg] | ||
| React.createElement(ListHeaderComponent, null); | ||
| - cells.push(/*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, { | ||
| + this.pushOrUnshift(cells, /*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, { | ||
| cellKey: this._getCellKey() + '-header', | ||
| key: "$header" | ||
| }, /*#__PURE__*/React.createElement(View | ||
| @@ -1105,7 +1129,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| // $FlowFixMe[not-a-component] | ||
| // $FlowFixMe[incompatible-type-arg] | ||
| React.createElement(ListEmptyComponent, null); | ||
| - cells.push(/*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, { | ||
| + this.pushOrUnshift(cells, /*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, { | ||
| cellKey: this._getCellKey() + '-empty', | ||
| key: "$empty" | ||
| }, /*#__PURE__*/React.cloneElement(_element2, { | ||
| @@ -1145,7 +1169,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| var firstMetrics = this.__getFrameMetricsApprox(section.first, this.props); | ||
| var lastMetrics = this.__getFrameMetricsApprox(last, this.props); | ||
| var spacerSize = lastMetrics.offset + lastMetrics.length - firstMetrics.offset; | ||
| - cells.push(/*#__PURE__*/React.createElement(View, { | ||
| + this.pushOrUnshift(cells, /*#__PURE__*/React.createElement(View, { | ||
| key: "$spacer-" + section.first, | ||
| style: { | ||
| [spacerKey]: spacerSize | ||
| @@ -1168,7 +1192,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| // $FlowFixMe[not-a-component] | ||
| // $FlowFixMe[incompatible-type-arg] | ||
| React.createElement(ListFooterComponent, null); | ||
| - cells.push(/*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, { | ||
| + this.pushOrUnshift(cells, /*#__PURE__*/React.createElement(VirtualizedListCellContextProvider, { | ||
| cellKey: this._getFooterCellKey(), | ||
| key: "$footer" | ||
| }, /*#__PURE__*/React.createElement(View, { | ||
| @@ -1179,6 +1203,14 @@ class VirtualizedList extends StateSafePureComponent { | ||
| _element3))); | ||
| } | ||
|
|
||
| + if (this.props.inverted && stickyHeaderIndices.length > 0) { | ||
| + var totalCells = cells.length; | ||
| + stickyHeaderIndices = stickyHeaderIndices.map(function(recordedIndex) { | ||
| + return totalCells - 1 - recordedIndex; | ||
| + }); | ||
| + } | ||
| + | ||
| + | ||
| // 4. Render the ScrollView | ||
| var scrollProps = _objectSpread(_objectSpread({}, this.props), {}, { | ||
| onContentSizeChange: this._onContentSizeChange, | ||
| @@ -1353,7 +1385,7 @@ class VirtualizedList extends StateSafePureComponent { | ||
| * 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); | ||
| + this.pushOrUnshift(framesInLayout, frame); | ||
| } | ||
| } | ||
| var windowTop = this.__getFrameMetricsApprox(this.state.cellsAroundViewport.first, this.props).offset; | ||
| @@ -1526,6 +1558,12 @@ var styles = StyleSheet.create({ | ||
| horizontallyInverted: { | ||
| transform: 'scaleX(-1)' | ||
| }, | ||
| + rowReverse: { | ||
| + flexDirection: 'row-reverse', | ||
| + }, | ||
| + columnReverse: { | ||
| + flexDirection: 'column-reverse', | ||
| + }, | ||
| debug: { | ||
| flex: 1 | ||
| }, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React from 'react'; | ||
| import FlatList from '@components/FlatList/FlatList'; | ||
| import useFlatListScrollKey from '@components/FlatList/hooks/useFlatListScrollKey'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import CellRendererComponent from './CellRendererComponent'; | ||
| import shouldRemoveClippedSubviews from './shouldRemoveClippedSubviews'; | ||
| import type {InvertedFlatListProps} from './types'; | ||
|
|
||
| // Adapted from https://github.com/facebook/react-native/blob/29a0d7c3b201318a873db0d1b62923f4ce720049/packages/virtualized-lists/Lists/VirtualizeUtils.js#L237 | ||
| function defaultKeyExtractor<T>(item: T | {key: string} | {id: string}, index: number): string { | ||
| if (item != null) { | ||
| if (typeof item === 'object' && 'key' in item) { | ||
| return item.key; | ||
| } | ||
| if (typeof item === 'object' && 'id' in item) { | ||
| return item.id; | ||
| } | ||
| } | ||
| return String(index); | ||
| } | ||
|
|
||
| function InvertedFlatList<T>({ | ||
| ref, | ||
| shouldEnableAutoScrollToTopThreshold, | ||
| shouldFocusToTopOnMount = false, | ||
| initialScrollKey, | ||
| data, | ||
| onStartReached, | ||
| renderItem, | ||
| keyExtractor = defaultKeyExtractor, | ||
| ...restProps | ||
| }: InvertedFlatListProps<T>) { | ||
| const {displayedData, maintainVisibleContentPosition, handleStartReached, handleRenderItem, listRef} = useFlatListScrollKey<T>({ | ||
| data, | ||
| keyExtractor, | ||
| initialScrollKey, | ||
| inverted: true, | ||
| onStartReached, | ||
| shouldEnableAutoScrollToTopThreshold, | ||
| renderItem, | ||
| ref, | ||
| }); | ||
| const styles = useThemeStyles(); | ||
|
|
||
| return ( | ||
| <FlatList<T> | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...restProps} | ||
| ref={listRef} | ||
| maintainVisibleContentPosition={maintainVisibleContentPosition} | ||
| inverted | ||
| data={displayedData} | ||
| renderItem={handleRenderItem} | ||
| keyExtractor={keyExtractor} | ||
| onStartReached={handleStartReached} | ||
| CellRendererComponent={CellRendererComponent} | ||
| removeClippedSubviews={shouldRemoveClippedSubviews} | ||
| contentContainerStyle={[restProps.contentContainerStyle, shouldFocusToTopOnMount ? styles.justifyContentEnd : undefined]} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default InvertedFlatList; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❌ CONSISTENCY-1 (docs)
The PR introduces
getPlatform()andisWebinsidePureReportActionItemto determine theaccessibilityRole. This is a platform-specific check within a heavily rendered component. While the original code already hadPlatform.OS !== CONST.PLATFORM.WEB, replacing it withgetPlatform()(a function call on every render) is strictly worse than the static constantPlatform.OSfor a component rendered per report action.If keeping the platform check inline, prefer the original
Platform.OSwhich is a static constant with zero per-render cost:Alternatively, extract the platform-specific
accessibilityRolelogic into a platform-specific file or constant.Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.