Extract TransactionForm

bouzuya · Mar 24, 2023 · 25dd537 · 25dd537
1 parent d8f68e0
commit 25dd537
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 19 deletions.
diff --git a/components/EditTransactionDialog.tsx b/components/EditTransactionDialog.tsx
@@ -1,4 +1,5 @@
-import { Button, Dialog, TextInput } from "react-native-paper";
+import { Button, Dialog } from "react-native-paper";
+import { TransactionForm } from "./TransactionForm";
 
 type Props = {
   amount: string;
@@ -29,24 +30,13 @@ export function EditTransactionDialog({
     <Dialog visible={visible}>
       <Dialog.Title>{id === null ? "Add" : "Edit"} Transaction</Dialog.Title>
       <Dialog.Content>
-        <TextInput
-          label="Date"
-          mode="outlined"
-          onChangeText={onChangeDate}
-          value={date}
-        />
-        <TextInput
-          keyboardType="numeric"
-          label="Amount"
-          mode="outlined"
-          onChangeText={onChangeAmount}
-          value={amount}
-        />
-        <TextInput
-          label="Comment"
-          mode="outlined"
-          onChangeText={onChangeComment}
-          value={comment}
+        <TransactionForm
+          amount={amount}
+          comment={comment}
+          date={date}
+          onChangeAmount={onChangeAmount}
+          onChangeComment={onChangeComment}
+          onChangeDate={onChangeDate}
         />
       </Dialog.Content>
       <Dialog.Actions>

diff --git a/components/TransactionForm.tsx b/components/TransactionForm.tsx
@@ -0,0 +1,44 @@
+import { TextInput } from "react-native-paper";
+import { View } from "react-native";
+
+type Props = {
+  amount: string;
+  comment: string;
+  date: string;
+  onChangeAmount: (text: string) => void;
+  onChangeComment: (text: string) => void;
+  onChangeDate: (text: string) => void;
+};
+
+export function TransactionForm({
+  amount,
+  comment,
+  date,
+  onChangeAmount,
+  onChangeComment,
+  onChangeDate,
+}: Props): JSX.Element {
+  return (
+    <View>
+      <TextInput
+        label="Date"
+        mode="outlined"
+        onChangeText={onChangeDate}
+        value={date}
+      />
+      <TextInput
+        keyboardType="numeric"
+        label="Amount"
+        mode="outlined"
+        onChangeText={onChangeAmount}
+        value={amount}
+      />
+      <TextInput
+        label="Comment"
+        mode="outlined"
+        onChangeText={onChangeComment}
+        value={comment}
+      />
+    </View>
+  );
+}