/
TextCell.tsx
91 lines (84 loc) · 2.04 KB
/
TextCell.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import React, { useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import { Text } from 'react-native-paper';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
export type TextCellProps = {
rowData: any;
colData: any;
};
const iconMap = new Map([
['m', 'check'],
['ï', 'star'],
['R', 'arrow-drop-up'],
['S', 'arrow-drop-down'],
['T', 'arrow-left'],
['U', 'arrow-right'],
['P', 'add'],
['Q', 'remove'],
['è', 'warning'],
['¢', 'clean-hands'],
['©', 'flag'],
['23F4', 'lightbulb'],
['2013', 'stop'],
['&', 'pie-chart'],
['add', 'add'],
['minus-2', 'remove'],
['dot', 'circle'],
]);
const TextCell: React.FC<TextCellProps> = ({ rowData, colData }) => {
const extendedTextStyle = useMemo(() => {
let color;
if (rowData?.indicator?.applySegmentColors) {
color = rowData?.indicator?.color;
} else if (rowData.cellForegroundColor) {
color = rowData.cellForegroundColor;
}
return { color, backgroundColor: rowData.cellBackgroundColor };
}, [rowData]);
const iconStyle = useMemo(() => {
let name;
let color;
if (colData?.representation.type === 'text') {
return;
}
if (rowData?.indicator?.icon) {
name = iconMap.get(rowData.indicator.icon);
color = rowData?.indicator?.color;
}
return { name, color };
}, [rowData, colData]);
return (
<View style={styles.textRow}>
<Text style={[styles.textCol2, extendedTextStyle]}>{rowData.qText}</Text>
{iconStyle?.name ? (
<MaterialIcons
style={[styles.icon]}
name={iconStyle.name}
color={iconStyle.color}
size={16}
/>
) : null}
</View>
);
};
const styles = StyleSheet.create({
textCol2: {
fontWeight: 'bold',
padding: 4,
},
miniChart: {
minHeight: 96,
borderRadius: 4,
borderWidth: 1,
borderColor: '#CCC',
padding: 4,
},
textRow: {
flexDirection: 'row',
alignItems: 'flex-start',
},
icon: {
marginLeft: 8,
},
});
export default TextCell;