/
SettingsPageItemMobile.tsx
77 lines (63 loc) · 2.12 KB
/
SettingsPageItemMobile.tsx
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
import { Caption, FormattedMessage, List, View } from '@bluebase/components';
import { StyleProp, TextStyle, ViewStyle } from 'react-native';
import { Theme, getComponent } from '@bluebase/core';
import React from 'react';
import { SettingsPageItemProps } from '../SettingsPageItem';
export interface SettingsPageItemMobileStyles {
contentStyles: StyleProp<ViewStyle>;
descriptionStyles: StyleProp<TextStyle>;
root: StyleProp<ViewStyle>;
titleStyles: StyleProp<TextStyle>;
}
export interface SettingsPageItemMobileProps extends SettingsPageItemProps {
// isMobile?: boolean;
styles?: Partial<SettingsPageItemMobileStyles>;
}
export class SettingsPageItemMobile extends React.PureComponent<SettingsPageItemMobileProps> {
static defaultProps: Partial<SettingsPageItemMobileProps> = {};
private Component =
this.props.component && typeof this.props.component === 'string'
? getComponent(this.props.component)
: this.props.component;
static defaultStyles = (theme: Theme): SettingsPageItemMobileStyles => ({
contentStyles: {},
descriptionStyles: {
color: theme.palette.text.hint,
paddingHorizontal: theme.spacing.unit * 2,
paddingVertical: theme.spacing.unit * 2,
},
root: {},
titleStyles: {
paddingHorizontal: theme.spacing.unit * 2,
paddingVertical: theme.spacing.unit * 2,
},
})
render() {
const { description, descriptionStyle, title, titleStyle } = this.props;
const ItemComponent = this.Component;
const styles = this.props.styles as SettingsPageItemMobileStyles;
const titleNode = !!title ? (
<FormattedMessage component={List.Subheader} style={[styles.titleStyles, titleStyle]}>
{title}
</FormattedMessage>
) : null;
const descNode = !!description ? (
<FormattedMessage component={Caption} style={[styles.descriptionStyles, descriptionStyle]}>
{description}
</FormattedMessage>
) : null;
const componentNode = !!ItemComponent ? (
<View style={styles.contentStyles}>
<ItemComponent />
</View>
) : null;
return (
<View style={styles.root}>
{titleNode}
{componentNode}
{descNode}
</View>
);
}
}
export default SettingsPageItemMobile;