Replace meta data table with React Native-friendly JSX
This commit is contained in:
parent
c0fb5913f4
commit
fa8e5c7357
|
@ -4,7 +4,8 @@ import {
|
||||||
Dimensions,
|
Dimensions,
|
||||||
Image,
|
Image,
|
||||||
Text,
|
Text,
|
||||||
TouchableOpacity
|
TouchableOpacity,
|
||||||
|
FlatList,
|
||||||
} from "react-native";
|
} from "react-native";
|
||||||
|
|
||||||
import * as Linking from "expo-linking";
|
import * as Linking from "expo-linking";
|
||||||
|
@ -257,25 +258,22 @@ const ProfileDisplayJsx = ({navigation}) => {
|
||||||
<Text style = { styles.note }>
|
<Text style = { styles.note }>
|
||||||
{state.profile.note}
|
{state.profile.note}
|
||||||
</Text>
|
</Text>
|
||||||
<table style = { styles.metaData }>
|
<View style = { styles.fields.container }>
|
||||||
{
|
{
|
||||||
state.profile.fields.map((row, i) =>
|
state.profile.fields.map((field, index) => (
|
||||||
<tr
|
<View
|
||||||
key = { i }
|
style = { styles.fields.row }
|
||||||
style = { styles.row }>
|
key = { index }>
|
||||||
<td style = { styles.rowName } >
|
<View style = { styles.fields.cell.name }>
|
||||||
<Text>{ row.name }</Text>
|
<Text>{ field.name }</Text>
|
||||||
</td>
|
</View>
|
||||||
<td style = { styles.rowValue }>
|
<View style = { styles.fields.cell.value }>
|
||||||
<Text>
|
<HTMLLink link = { field.value }/>
|
||||||
<HTMLLink
|
</View>
|
||||||
link = { row.value } />
|
</View>
|
||||||
</Text>
|
))
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
</table>
|
</View>
|
||||||
{profileButton}
|
{profileButton}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
|
@ -334,23 +332,26 @@ const styles = {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
marginTop: 10,
|
marginTop: 10,
|
||||||
},
|
},
|
||||||
|
fields: {
|
||||||
metaData: {
|
container: { marginTop: 20, },
|
||||||
marginTop: 20
|
|
||||||
},
|
|
||||||
row: {
|
row: {
|
||||||
padding: 10
|
padding: 10,
|
||||||
|
flexDirection: "row",
|
||||||
},
|
},
|
||||||
rowName: {
|
cell: {
|
||||||
|
name: {
|
||||||
width: screen_width / 3,
|
width: screen_width / 3,
|
||||||
textAlign: "center"
|
textAlgin: "center",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
width: (screen_width / 3) * 2,
|
||||||
|
},
|
||||||
|
}
|
||||||
},
|
},
|
||||||
rowValue: { width: (screen_width / 3) * 2 },
|
|
||||||
anchor: {
|
anchor: {
|
||||||
color: "#888",
|
color: "#888",
|
||||||
textDecoration: "underline"
|
textDecorationLine: "underline"
|
||||||
},
|
},
|
||||||
|
|
||||||
button: {
|
button: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: "#888",
|
borderColor: "#888",
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
export function withoutHTML(string) {
|
export function withoutHTML(string) {
|
||||||
return string.replaceAll(/<[^>]*>/ig, "");
|
return string.replace(/<[^>]*>/ig, "");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function pluralize(n, singular, plural) {
|
export function pluralize(n, singular, plural) {
|
||||||
|
|
Loading…
Reference in New Issue