forked from rescript-react-native/rescript-react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathRNTesterExampleList.re
More file actions
75 lines (70 loc) · 1.95 KB
/
RNTesterExampleList.re
File metadata and controls
75 lines (70 loc) · 1.95 KB
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
open BsReactNative;
let styles =
StyleSheet.create(
Style.{
"listContainer": style([flex(1.0)]),
"row":
style([
backgroundColor(String("white")),
justifyContent(Center),
paddingHorizontal(Pt(15.)),
paddingVertical(Pt(8.)),
]),
"rowTitleText": style([fontSize(Float(17.)), fontWeight(`_500)]),
"rowDetailText":
style([
fontSize(Float(15.)),
color(String("#888888")),
lineHeight(20.),
]),
"separator":
style([
height(Pt(StyleSheet.hairlineWidth)),
backgroundColor(String("#bbbbbb")),
marginLeft(Pt(15.)),
]),
"separatorHighlighted":
style([
height(Pt(StyleSheet.hairlineWidth)),
backgroundColor(String("rgb(217, 217, 217)")),
]),
},
);
let component = ReasonReact.statelessComponent("RNTesterExampleList");
let renderItem = onPress =>
SectionList.renderItem(({item}) =>
<TouchableHighlight onPress={() => onPress(item)}>
<View style=styles##row>
<Text style=styles##rowTitleText>
{ReasonReact.string(item.ExampleList.title)}
</Text>
<Text style=styles##rowDetailText>
{ReasonReact.string(item.description)}
</Text>
</View>
</TouchableHighlight>
);
let itemSeparatorComponent =
SectionList.separatorComponent(({highlighted}) =>
<View
style={highlighted ? styles##separatorHighlighted : styles##separator}
/>
);
let make = (~components, ~onPress, _children) => {
let sections =
SectionList.sections([|
SectionList.section(~data=components, ~key="components", ()),
|]);
{
...component,
render: _self =>
<View style=styles##listContainer>
<SectionList
sections
renderItem={renderItem(onPress)}
keyExtractor={(item, _) => item.key}
itemSeparatorComponent
/>
</View>,
};
};