56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
|
import { atom, Atom, useAtom } from "jotai";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { ListGroup } from "react-bootstrap";
|
||
|
|
import Person, { IPerson } from "./Person";
|
||
|
|
|
||
|
|
export interface Props {
|
||
|
|
splitBetweenAtom: Atom<Atom<IPerson>[]>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SplitBetween({ splitBetweenAtom }: Props) {
|
||
|
|
const [splitBetween, setSplitBetween] = useAtom(splitBetweenAtom);
|
||
|
|
const [input, setInput] = useState("");
|
||
|
|
const [editing, setEditing] = useState(false);
|
||
|
|
|
||
|
|
const startEditing = (_) => {
|
||
|
|
setInput("");
|
||
|
|
setEditing(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const addPerson = (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setSplitBetween([...splitBetween, atom({ name: input })]);
|
||
|
|
setEditing(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
Split between ({splitBetween.length}):
|
||
|
|
<ListGroup horizontal>
|
||
|
|
{splitBetween.map((a, i) => (
|
||
|
|
<Person
|
||
|
|
personAtom={a}
|
||
|
|
key={`split-${i}`}
|
||
|
|
splitBetweenAtom={splitBetweenAtom}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
<ListGroup.Item onClick={startEditing}>
|
||
|
|
{editing ? (
|
||
|
|
<form onSubmit={addPerson}>
|
||
|
|
<input
|
||
|
|
autoFocus={true}
|
||
|
|
type="text"
|
||
|
|
value={input}
|
||
|
|
onBlur={(_) => setEditing(false)}
|
||
|
|
onInput={(e) => setInput(e.target.value)}
|
||
|
|
/>
|
||
|
|
</form>
|
||
|
|
) : (
|
||
|
|
"[+]"
|
||
|
|
)}
|
||
|
|
</ListGroup.Item>
|
||
|
|
</ListGroup>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|