SectionList Separators Example
Summary: Changelog: [General][Added] - Added an example showcasing how separator callbacks work in SectionList for RNTester Reviewed By: nadiia Differential Revision: D26575122 fbshipit-source-id: 46710e2647c84bdf083265ce04ba330bd70eb2a7
This commit is contained in:
Родитель
270060e1d9
Коммит
174372c178
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
import {SectionList_withSeparators} from './SectionListExamples';
|
||||
const React = require('react');
|
||||
|
||||
exports.title = 'SectionList with Separators';
|
||||
exports.testTitle = 'Test custom separator components';
|
||||
exports.category = 'ListView';
|
||||
exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
|
||||
exports.description = 'Tap to see pressed states for separator components.';
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'SectionList with Separators',
|
||||
render: function(): React.Element<typeof SectionList_withSeparators> {
|
||||
return <SectionList_withSeparators />;
|
||||
},
|
||||
},
|
||||
];
|
|
@ -8,7 +8,14 @@
|
|||
* @format
|
||||
*/
|
||||
|
||||
import {Button, SectionList, StyleSheet, Text, View} from 'react-native';
|
||||
import {
|
||||
Pressable,
|
||||
Button,
|
||||
SectionList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import * as React from 'react';
|
||||
|
||||
const DATA = [
|
||||
|
@ -36,11 +43,34 @@ const VIEWABILITY_CONFIG = {
|
|||
waitForInteraction: true,
|
||||
};
|
||||
|
||||
const Item = ({title}) => (
|
||||
<View style={styles.item} testID={title}>
|
||||
<Text style={styles.title}>{title}</Text>
|
||||
</View>
|
||||
);
|
||||
const Item = ({item, section, separators}) => {
|
||||
return (
|
||||
<Pressable
|
||||
onPressIn={separators.highlight}
|
||||
onPressOut={separators.unhighlight}
|
||||
style={({pressed}) => [
|
||||
styles.item,
|
||||
{
|
||||
backgroundColor: pressed ? 'red' : 'pink',
|
||||
},
|
||||
]}
|
||||
testID={item}>
|
||||
<Text style={styles.title}>{item}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
const Separator = (defaultColor, highlightColor, text) => ({highlighted}) => {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.separator,
|
||||
{backgroundColor: highlighted ? highlightColor : defaultColor},
|
||||
]}>
|
||||
<Text style={styles.separtorText}>{text}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export function SectionList_inverted(): React.Node {
|
||||
const [output, setOutput] = React.useState('inverted false');
|
||||
|
@ -163,6 +193,29 @@ export function SectionList_onEndReached(): React.Node {
|
|||
);
|
||||
}
|
||||
|
||||
export function SectionList_withSeparators(): React.Node {
|
||||
const exampleProps = {
|
||||
ItemSeparatorComponent: Separator('lightgreen', 'green', 'Item Separator'),
|
||||
SectionSeparatorComponent: Separator(
|
||||
'lightblue',
|
||||
'blue',
|
||||
'Section Separator',
|
||||
),
|
||||
};
|
||||
const ref = React.createRef<?React.ElementRef<typeof SectionList>>();
|
||||
|
||||
const onTest = null;
|
||||
|
||||
return (
|
||||
<SectionListExampleWithForwardedRef
|
||||
ref={ref}
|
||||
exampleProps={exampleProps}
|
||||
testOutput="Tap for press state of section and item separators"
|
||||
onTest={onTest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SectionList_onViewableItemsChanged(): React.Node {
|
||||
const [output, setOutput] = React.useState('');
|
||||
const exampleProps = {
|
||||
|
@ -216,7 +269,7 @@ const SectionListExampleWithForwardedRef = React.forwardRef(
|
|||
testID="section_list"
|
||||
sections={DATA}
|
||||
keyExtractor={(item, index) => item + index}
|
||||
renderItem={({item}) => <Item title={item} />}
|
||||
renderItem={Item}
|
||||
renderSectionHeader={({section: {title}}) => (
|
||||
<Text style={styles.header}>{title}</Text>
|
||||
)}
|
||||
|
@ -265,4 +318,10 @@ const styles = StyleSheet.create({
|
|||
output: {
|
||||
fontSize: 12,
|
||||
},
|
||||
separator: {
|
||||
height: 12,
|
||||
},
|
||||
separtorText: {
|
||||
fontSize: 10,
|
||||
},
|
||||
});
|
||||
|
|
|
@ -85,7 +85,7 @@ const ComponentExamples: Array<RNTesterExample> = [
|
|||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionList_inverted',
|
||||
key: 'SectionList-inverted',
|
||||
module: require('../examples/SectionList/SectionList-inverted'),
|
||||
category: 'ListView',
|
||||
},
|
||||
|
@ -95,10 +95,15 @@ const ComponentExamples: Array<RNTesterExample> = [
|
|||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionList_stickyHeadersEnabled',
|
||||
key: 'SectionList-stickyHeadersEnabled',
|
||||
module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'),
|
||||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionList-withSeparators',
|
||||
module: require('../examples/SectionList/SectionList-withSeparators'),
|
||||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionListExample',
|
||||
category: 'ListView',
|
||||
|
|
|
@ -109,10 +109,15 @@ const ComponentExamples: Array<RNTesterExample> = [
|
|||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionList_stickyHeadersEnabled',
|
||||
key: 'SectionList-stickyHeadersEnabled',
|
||||
module: require('../examples/SectionList/SectionList-stickyHeadersEnabled'),
|
||||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionList-withSeparators',
|
||||
module: require('../examples/SectionList/SectionList-withSeparators'),
|
||||
category: 'ListView',
|
||||
},
|
||||
{
|
||||
key: 'SectionList-onEndReached',
|
||||
module: require('../examples/SectionList/SectionList-onEndReached'),
|
||||
|
|
Загрузка…
Ссылка в новой задаче