diff --git a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js index 6eb9eb4c2dc..df68a5209f4 100644 --- a/packages/rn-tester/js/examples/SectionList/SectionListExamples.js +++ b/packages/rn-tester/js/examples/SectionList/SectionListExamples.js @@ -46,8 +46,16 @@ const VIEWABILITY_CONFIG = { const Item = ({item, section, separators}) => { return ( { + separators.highlight(); + }} + onPress={() => { + separators.updateProps('trailing', {hasBeenHighlighted: true}); + separators.updateProps('leading', {hasBeenHighlighted: true}); + }} + onPressOut={() => { + separators.unhighlight(); + }} style={({pressed}) => [ styles.item, { @@ -60,7 +68,18 @@ const Item = ({item, section, separators}) => { ); }; -const Separator = (defaultColor, highlightColor, text) => ({highlighted}) => { +const Separator = (defaultColor, highlightColor, isSectionSeparator) => ({ + leadingItem, + trailingItem, + highlighted, + hasBeenHighlighted, +}) => { + const text = `${ + isSectionSeparator ? 'Section ' : '' + }separator for leading ${leadingItem} and trailing ${trailingItem} has ${ + !hasBeenHighlighted ? 'not ' : '' + }been pressed`; + return ( >(); - const onTest = null; - return ( - + ); } @@ -232,7 +240,6 @@ export function SectionList_onViewableItemsChanged(): React.Node { return ( ); @@ -242,7 +249,7 @@ type Props = { exampleProps: $Shape>, onTest?: ?() => void, testLabel?: ?string, - testOutput: ?string, + testOutput?: ?string, }; const SectionListExampleWithForwardedRef = React.forwardRef( @@ -252,18 +259,20 @@ const SectionListExampleWithForwardedRef = React.forwardRef( ): React.Node { return ( - - - {props.testOutput} - - {props.onTest != null ? ( -