Use IconButton instead of Button for Remove. Align to right.

This commit is contained in:
Ceda EI 2020-03-20 19:53:06 +05:30
parent a9820e5e9e
commit 8424e1e750
1 changed files with 13 additions and 7 deletions

View File

@ -1,11 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { import {
Button, IconButton,
Card, Card,
FAB, FAB,
Portal, Portal,
Text Text,
withTheme
} from "react-native-paper"; } from "react-native-paper";
import { import {
@ -15,7 +16,7 @@ import {
import InputDialog from "./InputDialog"; import InputDialog from "./InputDialog";
export default function Subjects({ subjects, addSubject, removeSubject }) { function Subjects({ theme, subjects, addSubject, removeSubject }) {
const [ showDialog, setShowDialog ] = useState(false); const [ showDialog, setShowDialog ] = useState(false);
function onInput(text) { function onInput(text) {
addSubject(text); addSubject(text);
@ -40,10 +41,12 @@ export default function Subjects({ subjects, addSubject, removeSubject }) {
} }
> >
<Card.Title title={subject.name} /> <Card.Title title={subject.name} />
<Card.Actions> <Card.Actions style={{justifyContent: "flex-end"}}>
<Button onPress={() => removeSubject(subject.id)}> <IconButton
Remove onPress={() => removeSubject(subject.id)}
</Button> icon="delete"
color={theme.colors.primary}
/>
</Card.Actions> </Card.Actions>
</Card> </Card>
))} ))}
@ -76,6 +79,7 @@ Subjects.propTypes = {
subjects: PropTypes.array, subjects: PropTypes.array,
addSubject: PropTypes.func, addSubject: PropTypes.func,
removeSubject: PropTypes.func, removeSubject: PropTypes.func,
theme: PropTypes.object,
}; };
const style = StyleSheet.create({ const style = StyleSheet.create({
@ -89,3 +93,5 @@ const style = StyleSheet.create({
textAlign: "center", textAlign: "center",
} }
}); });
export default withTheme(Subjects);