ceda_ei
/
sonzai
mirror of https://gitlab.com/ceda_ei/sonzai.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/timetable/HomeScreen.js
View File

@ -8,6 +8,7 @@ import {
Dialog,
FAB,
Portal,
Modal,
} from "react-native-paper";
import {
@ -16,6 +17,8 @@ import {
} from "react-native";
import { format } from "date-fns";
import BottomSheet from "reanimated-bottom-sheet";
function sortTimes(t1, t2) {
if (t1.getHours() > t2.getHours())
return 1;
@ -30,6 +33,32 @@ function sortTimes(t1, t2) {
function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
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>
{timetable.map((day, dayIdx) => (
<Card
@ -71,7 +100,10 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
return (
<DataTable.Row
key={idx}
onPress={() => setDialog({ show: true, id: cls.id })}
onPress={() => {
setCurrentBottomSheet(cls);
openBottomSheet();
}}
>
<DataTable.Cell
style={{ flexGrow: 2 }}
@ -118,7 +150,8 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
</Dialog.Actions>
</Dialog>
<FAB
loarge
visible={currentBottomSheet == null}
large
icon="plus"
onPress={() => navigation.navigate("New Entry")}
style={{
@ -128,6 +161,21 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
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>
</ScrollView></Portal.Host>);
}
@ -154,6 +202,11 @@ const style = StyleSheet.create({
flexDirection: "row",
justifyContent: "space-between"
},
bottomNavigation: {
height: 250,
flexDirection: "column",
justifyContent: "space-evenly",
},
});
export default HomeScreen;

1
package.json
View File

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

5
yarn.lock
View File

@ -5420,6 +5420,11 @@ realpath-native@^1.1.0:
dependencies:
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:
version "2.13.8"
resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"