Add bottom sheet for Subjects.

This commit is contained in:
Ceda EI 2020-04-14 21:30:53 +05:30
parent 3f75396bc4
commit 4e01fa5dd4
3 changed files with 61 additions and 2 deletions

View File

@ -8,6 +8,7 @@ import {
Dialog, Dialog,
FAB, FAB,
Portal, Portal,
Modal,
} from "react-native-paper"; } from "react-native-paper";
import { import {
@ -16,6 +17,8 @@ import {
} from "react-native"; } from "react-native";
import { format } from "date-fns"; import { format } from "date-fns";
import BottomSheet from "reanimated-bottom-sheet";
function sortTimes(t1, t2) { function sortTimes(t1, t2) {
if (t1.getHours() > t2.getHours()) if (t1.getHours() > t2.getHours())
return 1; return 1;
@ -30,6 +33,32 @@ function sortTimes(t1, t2) {
function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) { function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
const [ dialog, setDialog ] = useState({ show: false, id: null }); const [ dialog, setDialog ] = useState({ show: false, id: null });
const [ currentBottomSheet, setCurrentBottomSheet ] = useState(null);
this.bs = React.createRef();
const openBottomSheet = () => {this.bs.current.snapTo(0);this.bs.current.snapTo(0);};
const closeBottomSheet = () => {this.bs.current.snapTo(2);this.bs.current.snapTo(2);};
function CardContents() {
if (!currentBottomSheet) {
return <></>;
}
const subject = subjects.find(i => i.id === currentBottomSheet.sub_id);
return (
<Card>
<Card.Title title={subject.name} />
<Card.Content style={style.bottomNavigation}>
<Button mode="contained">Change Subject</Button>
<Button mode="contained">Change Start Time</Button>
<Button mode="contained">Change End Time</Button>
<Button mode="contained" onPress={() => {
closeBottomSheet();
setDialog({ show: true, id: currentBottomSheet.name });
}}>Remove</Button>
</Card.Content>
</Card>
);
}
return (<Portal.Host><ScrollView> return (<Portal.Host><ScrollView>
{timetable.map((day, dayIdx) => ( {timetable.map((day, dayIdx) => (
<Card <Card
@ -71,7 +100,10 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
return ( return (
<DataTable.Row <DataTable.Row
key={idx} key={idx}
onPress={() => setDialog({ show: true, id: cls.id })} onPress={() => {
setCurrentBottomSheet(cls);
openBottomSheet();
}}
> >
<DataTable.Cell <DataTable.Cell
style={{ flexGrow: 2 }} style={{ flexGrow: 2 }}
@ -118,7 +150,8 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
</Dialog.Actions> </Dialog.Actions>
</Dialog> </Dialog>
<FAB <FAB
loarge visible={currentBottomSheet == null}
large
icon="plus" icon="plus"
onPress={() => navigation.navigate("New Entry")} onPress={() => navigation.navigate("New Entry")}
style={{ style={{
@ -128,6 +161,21 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
bottom: 0, bottom: 0,
}} }}
/> />
<Modal
visible={currentBottomSheet != null}
onDismiss={closeBottomSheet}
dismissable={false}
>
</Modal>
<BottomSheet
ref={this.bs}
snapPoints={[300, 150, 0]}
initialSnap={1}
renderContent={CardContents}
enabledInnerScrolling={false}
onCloseStart={() => setCurrentBottomSheet(null)}
onCloseEnd={() => {}}
/>
</Portal> </Portal>
</ScrollView></Portal.Host>); </ScrollView></Portal.Host>);
} }
@ -154,6 +202,11 @@ const style = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between" justifyContent: "space-between"
}, },
bottomNavigation: {
height: 250,
flexDirection: "column",
justifyContent: "space-evenly",
},
}); });
export default HomeScreen; export default HomeScreen;

View File

@ -30,6 +30,7 @@
"react-native-uuid": "^1.4.9", "react-native-uuid": "^1.4.9",
"react-native-vector-icons": "^6.6.0", "react-native-vector-icons": "^6.6.0",
"react-redux": "^7.2.0", "react-redux": "^7.2.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.19",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8", "redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0" "redux-persist": "^6.0.0"

View File

@ -5420,6 +5420,11 @@ realpath-native@^1.1.0:
dependencies: dependencies:
util.promisify "^1.0.0" util.promisify "^1.0.0"
reanimated-bottom-sheet@^1.0.0-alpha.19:
version "1.0.0-alpha.19"
resolved "https://registry.npmjs.org/reanimated-bottom-sheet/-/reanimated-bottom-sheet-1.0.0-alpha.19.tgz#94ea79e7b2896b8f489547415d15d15c99ac44ba"
integrity sha512-Q0sGUHYdr5h2n/AY7pKQty35zcUAxxYM1nCl+luSQAyqiY6a5Kf8IBQRsOVvs60sDzqXxtbwxHgM5mkwaiQC4Q==
redux-devtools-extension@^2.13.8: redux-devtools-extension@^2.13.8:
version "2.13.8" version "2.13.8"
resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1" resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"