mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
04ae39e603 |
@@ -357,7 +357,7 @@ class HostAgent::Impl final {
|
||||
|
||||
/**
|
||||
* Send a simple Log.entryAdded notification with the given
|
||||
* \param text. You must ensure that the frontend has enabled Log
|
||||
* \param text You must ensure that the frontend has enabled Log
|
||||
* notifications (using Log.enable) prior to calling this function. In Chrome
|
||||
* DevTools, the message will appear in the Console tab along with regular
|
||||
* console messages. The difference between Log.entryAdded and
|
||||
|
||||
@@ -147,7 +147,7 @@ class CSSSyntaxParser {
|
||||
*
|
||||
* https://www.w3.org/TR/css-syntax-3/#consume-component-value
|
||||
*
|
||||
* @param <ReturnT> caller-specified return type of visitors. This type will
|
||||
* @tparam ReturnT caller-specified return type of visitors. This type will
|
||||
* be set to its default constructed state if consuming a component value with
|
||||
* no matching visitors, or syntax error
|
||||
* @param visitors A unique list of CSSComponentValueVisitor to be called on a
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
import SectionListBaseExample from './SectionListBaseExample';
|
||||
import * as React from 'react';
|
||||
import {useRef, useState} from 'react';
|
||||
import {useRef} from 'react';
|
||||
import {StyleSheet, Text, View} from 'react-native';
|
||||
|
||||
const Separator =
|
||||
@@ -34,43 +34,22 @@ const Separator =
|
||||
};
|
||||
|
||||
export function SectionList_withSeparators(): React.Node {
|
||||
const [isInverted, setInverted] = useState(false);
|
||||
|
||||
const exampleProps = {
|
||||
inverted: isInverted,
|
||||
ItemSeparatorComponent: Separator('lightgreen', 'green', false),
|
||||
SectionSeparatorComponent: Separator('lightblue', 'blue', true),
|
||||
};
|
||||
const ref = useRef<any>(null);
|
||||
|
||||
function onTest() {
|
||||
setInverted(!isInverted);
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionListBaseExample
|
||||
ref={ref}
|
||||
exampleProps={exampleProps}
|
||||
itemStyle={styles.item}
|
||||
onTest={onTest}
|
||||
testOutput={`Inverted: ${isInverted.toString()}`}
|
||||
testLabel={isInverted ? 'Toggle false' : 'Toggle true'}
|
||||
/>
|
||||
);
|
||||
return <SectionListBaseExample ref={ref} exampleProps={exampleProps} />;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
separator: {
|
||||
height: 20,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 12,
|
||||
},
|
||||
separatorText: {
|
||||
fontSize: 10,
|
||||
},
|
||||
item: {
|
||||
marginVertical: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
type ViewStyle,
|
||||
} from 'react-native';
|
||||
|
||||
const DATA = [
|
||||
@@ -40,7 +39,7 @@ const DATA = [
|
||||
|
||||
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
|
||||
* LTI update could not be added via codemod */
|
||||
const Item = ({item, separators, style}) => {
|
||||
const Item = ({item, section, separators}) => {
|
||||
return (
|
||||
<Pressable
|
||||
onPressIn={() => {
|
||||
@@ -55,7 +54,6 @@ const Item = ({item, separators, style}) => {
|
||||
}}
|
||||
style={({pressed}) => [
|
||||
styles.item,
|
||||
style,
|
||||
{
|
||||
backgroundColor: pressed ? 'red' : 'pink',
|
||||
},
|
||||
@@ -73,7 +71,6 @@ type Props = $ReadOnly<{
|
||||
testLabel?: ?string,
|
||||
testOutput?: ?string,
|
||||
children?: ?React.Node,
|
||||
itemStyle?: ViewStyle,
|
||||
}>;
|
||||
|
||||
const SectionListBaseExample: component(
|
||||
@@ -112,9 +109,7 @@ const SectionListBaseExample: component(
|
||||
sections={DATA}
|
||||
keyExtractor={(item, index) => item + index}
|
||||
style={styles.list}
|
||||
renderItem={({item, separators}) => (
|
||||
<Item style={props.itemStyle} item={item} separators={separators} />
|
||||
)}
|
||||
renderItem={Item}
|
||||
/* $FlowFixMe[prop-missing] Error revealed after improved builtin React
|
||||
* utility types */
|
||||
renderSectionHeader={({section: {title}}) => (
|
||||
|
||||
@@ -378,12 +378,8 @@ class VirtualizedSectionList<
|
||||
}
|
||||
} else {
|
||||
const renderItem = info.section.renderItem || this.props.renderItem;
|
||||
const displayIndex =
|
||||
!!this.props.inverted && info.section.data.length
|
||||
? info.section.data.length - 1 - infoIndex
|
||||
: infoIndex;
|
||||
const SeparatorComponent = this._getSeparatorComponent(
|
||||
displayIndex,
|
||||
index,
|
||||
info,
|
||||
listItemCount,
|
||||
);
|
||||
@@ -392,9 +388,7 @@ class VirtualizedSectionList<
|
||||
<ItemWithSeparator
|
||||
SeparatorComponent={SeparatorComponent}
|
||||
LeadingSeparatorComponent={
|
||||
displayIndex === 0
|
||||
? this.props.SectionSeparatorComponent
|
||||
: undefined
|
||||
infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
|
||||
}
|
||||
cellKey={info.key}
|
||||
index={infoIndex}
|
||||
@@ -466,7 +460,7 @@ class VirtualizedSectionList<
|
||||
const {SectionSeparatorComponent} = this.props;
|
||||
const isLastItemInList = index === listItemCount - 1;
|
||||
const isLastItemInSection =
|
||||
index === this.props.getItemCount(info.section.data) - 1;
|
||||
info.index === this.props.getItemCount(info.section.data) - 1;
|
||||
if (SectionSeparatorComponent && isLastItemInSection) {
|
||||
return SectionSeparatorComponent;
|
||||
}
|
||||
|
||||
@@ -94,7 +94,6 @@ describe('VirtualizedSectionList', () => {
|
||||
component = ReactTestRenderer.create(
|
||||
<VirtualizedSectionList
|
||||
ItemSeparatorComponent={() => <separator />}
|
||||
SectionSeparatorComponent={() => <sectionSeparator />}
|
||||
ListEmptyComponent={() => <empty />}
|
||||
ListFooterComponent={() => <footer />}
|
||||
ListHeaderComponent={() => <header />}
|
||||
|
||||
+1
-3
@@ -863,7 +863,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<sectionSeparator />
|
||||
<separator />
|
||||
<item
|
||||
value="0"
|
||||
/>
|
||||
@@ -951,11 +951,9 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<separator />
|
||||
<item
|
||||
value="4"
|
||||
/>
|
||||
<sectionSeparator />
|
||||
</View>
|
||||
<View
|
||||
onFocusCapture={[Function]}
|
||||
|
||||
Reference in New Issue
Block a user