mirror of https://gitlab.com/ceda_ei/sonzai.git
Add ScrollView and Portal.Host to Subjects. Add margin to last card.
Move FAB inside Portal
This commit is contained in:
parent
bbf55e1c7e
commit
dee71bec11
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue