-
Notifications
You must be signed in to change notification settings - Fork 24k
/
SectionList-withSeparators.js
60 lines (53 loc) · 1.62 KB
/
SectionList-withSeparators.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/**
* Copyright (c) Meta Platforms, Inc. and 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
*/
import SectionListBaseExample from './SectionListBaseExample';
import {View, Text, StyleSheet} from 'react-native';
import * as React from 'react';
const Separator =
(defaultColor: string, highlightColor: string, isSectionSeparator: boolean) =>
({leadingItem, trailingItem, highlighted, hasBeenHighlighted}: any) => {
const text = `${
isSectionSeparator ? 'Section ' : ''
}separator for leading ${leadingItem} and trailing ${trailingItem} has ${
!hasBeenHighlighted ? 'not ' : ''
}been pressed`;
return (
<View
style={[
styles.separator,
{backgroundColor: highlighted ? highlightColor : defaultColor},
]}>
<Text style={styles.separatorText}>{text}</Text>
</View>
);
};
export function SectionList_withSeparators(): React.Node {
const exampleProps = {
ItemSeparatorComponent: Separator('lightgreen', 'green', false),
SectionSeparatorComponent: Separator('lightblue', 'blue', true),
};
const ref = React.useRef(null);
return <SectionListBaseExample ref={ref} exampleProps={exampleProps} />;
}
const styles = StyleSheet.create({
separator: {
height: 12,
},
separatorText: {
fontSize: 10,
},
});
export default {
title: 'SectionList With Separators',
name: 'SectionList-withSeparators',
render: function (): React.Element<typeof SectionList_withSeparators> {
return <SectionList_withSeparators />;
},
};