Add ScrollView and Portal.Host to Subjects. Add margin to last card.

Move FAB inside Portal
This commit is contained in:
Ceda EI 2020-03-20 00:13:34 +05:30
parent bbf55e1c7e
commit dee71bec11
1 changed files with 30 additions and 16 deletions

View File

@ -4,10 +4,12 @@ import {
Button, Button,
Card, Card,
FAB, FAB,
Portal,
Text Text
} from "react-native-paper"; } from "react-native-paper";
import { import {
ScrollView,
StyleSheet StyleSheet
} from "react-native"; } from "react-native";
@ -20,13 +22,23 @@ export default function Subjects({ subjects, addSubject, removeSubject }) {
setShowDialog(false); setShowDialog(false);
} }
return ( return (
<> <Portal.Host><ScrollView>
{subjects.length === 0 ? {subjects.length === 0 ?
<Text style={style.text}>No Subjects added. Press + to add a subject.</Text> <Text style={style.text}>
No Subjects added. Press + to add a subject.
</Text>
: null : null
} }
{subjects.map(subject => ( {subjects.map((subject, idx) => (
<Card key={subject.id} style={style.card}> <Card
key={subject.id}
style={
[
style.card,
{marginBottom: idx === subjects.length - 1 ? 12 : 0 }
]
}
>
<Card.Title title={subject.name} /> <Card.Title title={subject.name} />
<Card.Actions> <Card.Actions>
<Button onPress={() => removeSubject(subject.id)}> <Button onPress={() => removeSubject(subject.id)}>
@ -43,18 +55,20 @@ export default function Subjects({ subjects, addSubject, removeSubject }) {
label="Subject Name" label="Subject Name"
onOK={onInput} onOK={onInput}
/> />
<FAB <Portal>
large <FAB
icon="plus" large
onPress={() => setShowDialog(true)} icon="plus"
style={{ onPress={() => setShowDialog(true)}
position: "absolute", style={{
margin: 16, position: "absolute",
right: 0, margin: 16,
bottom: 0, right: 0,
}} bottom: 0,
/> }}
</> />
</Portal>
</ScrollView></Portal.Host>
); );
} }