This repository has been archived by the owner on Jun 15, 2022. It is now read-only.
/
SideMenuSection.js
92 lines (82 loc) · 2.6 KB
/
SideMenuSection.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Component, Fragment } from 'react';
import { ScrollView, View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import StyleKit from "@Style/StyleKit"
import SideMenuCell from "@SideMenu/SideMenuCell"
import ThemedComponent from "@Components/ThemedComponent";
export default class SideMenuSection extends ThemedComponent {
static BuildOption({text, subtext, textClass, key, iconDesc, dimmed, selected, onSelect, onLongPress}) {
return { text, subtext, textClass, key, iconDesc, dimmed, selected, onSelect, onLongPress };
}
constructor(props) {
super(props);
this.state = {collapsed: props.collapsed};
}
toggleCollapse = () => {
this.setState((prevState) => {
return {collapsed: !prevState.collapsed};
})
}
render() {
let options = this.props.options || [];
let collapsedLabel = options.length > 0 ? options.length + " Options" : "Hidden";
return (
<View style={this.styles.root}>
<TouchableOpacity
style={[this.styles.header, this.state.collapsed ? this.styles.collapsedHeader : null]}
underlayColor={StyleKit.variable("stylekitBorderColor")}
onPress={this.toggleCollapse}
>
<Fragment>
<Text style={this.styles.title}>{this.props.title}</Text>
{this.state.collapsed &&
<Text style={this.styles.collapsedLabel}>{collapsedLabel}</Text>
}
</Fragment>
</TouchableOpacity>
{!this.state.collapsed &&
<Fragment>
{options.map((option) => {
return <SideMenuCell
text={option.text}
textClass={option.textClass}
subtext={option.subtext}
key={option.text + option.subtext + option.key}
iconDesc={option.iconDesc}
dimmed={option.dimmed}
selected={option.selected}
onSelect={option.onSelect}
onLongPress={option.onLongPress}
/>
})}
{this.props.children}
</Fragment>
}
</View>
)
}
loadStyles() {
this.styles = {
root: {
paddingBottom: 6
},
header: {
height: 22
},
collapsedHeader: {
height: 50
},
title: {
color: StyleKit.variables.stylekitInfoColor,
fontSize: 13,
fontWeight: "700"
},
collapsedLabel: {
fontSize: 12,
opacity: 0.7,
marginTop: 3,
color: StyleKit.variables.stylekitContrastForegroundColor
}
}
}
}