wisesplit/components/ReceiptItem.tsx

60 lines
1.5 KiB
TypeScript

import { Atom, useAtom } from "jotai";
import { Badge, Card } from "react-bootstrap";
import { moneyFormatter } from "../lib/formatter";
import { receiptAtom } from "../lib/state";
import EditBox from "./EditBox";
import NumberEditBox from "./NumberEditBox";
import { IPerson } from "./Person";
import SplitBetween from "./SplitBetween";
export interface IReceiptItem {
name: Atom<string>;
price: Atom<number>;
splitBetween: Atom<Atom<IPerson>[]>;
}
function Price({ priceAtom }) {
return (
<NumberEditBox valueAtom={priceAtom} formatter={moneyFormatter.format} />
);
}
export interface Props {
itemAtom: Atom<IReceiptItem>;
}
export default function ReceiptItem({ itemAtom }: Props) {
const [receipt, setReceipt] = useAtom(receiptAtom);
const [item, _] = useAtom(itemAtom);
const removeSelf = (_) => {
setReceipt([...receipt.filter((x) => x != itemAtom)]);
};
return (
<Card>
<Card.Header>
<Card.Title className="d-flex justify-content-between align-items-center">
<h3>
<EditBox valueAtom={item.name} validator={(s) => s} />
</h3>
<span>
<Price priceAtom={item.price} />
<Badge
bg="danger"
pill
onClick={removeSelf}
style={{ cursor: "pointer" }}
>
&times;
</Badge>
</span>
</Card.Title>
</Card.Header>
<Card.Body>
<SplitBetween splitBetweenAtom={item.splitBetween} />
</Card.Body>
</Card>
);
}