90 lines
2.1 KiB
TypeScript
90 lines
2.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
type Props = {
|
|
updateIdList: (cids: string[]) => void;
|
|
};
|
|
|
|
export default function IdComponent({ updateIdList }: Props) {
|
|
const [idSet, setIdSet] = useState<Set<string>>(new Set());
|
|
const onValidId = (id: string) => {
|
|
const newSet = new Set(idSet.add(id));
|
|
setIdSet(newSet);
|
|
updateIdList([...newSet]);
|
|
};
|
|
const removeCid = (id: string) => {
|
|
const newSet = new Set([...idSet].filter((x) => x !== id));
|
|
setIdSet(newSet);
|
|
updateIdList([...newSet]);
|
|
};
|
|
return (
|
|
<div className="flex justify-center">
|
|
<div className="flex flex-col gap-2">
|
|
{Array.from(idSet).map((v) => (
|
|
<FixedId cid={v} removeCid={removeCid} key={v} />
|
|
))}
|
|
<SingleIdComponent onValidId={onValidId} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type FixedIdProps = {
|
|
cid: string;
|
|
removeCid: (cid: string) => void;
|
|
};
|
|
|
|
function FixedId({ cid, removeCid }: FixedIdProps) {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<input type="text" className="border-2" disabled value={cid} />
|
|
<button
|
|
className="rounded-md bg-red-300 p-2"
|
|
onClick={() => removeCid(cid)}
|
|
>
|
|
ลบ
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type SingleIdProps = {
|
|
onValidId: (cid: string) => void;
|
|
};
|
|
|
|
function SingleIdComponent({ onValidId }: SingleIdProps) {
|
|
const [isValid, setIsValid] = useState(false);
|
|
const [cid, setCid] = useState("");
|
|
useEffect(() => {
|
|
const isValidId = isValidThaiID(cid);
|
|
setIsValid(isValidId);
|
|
if (isValidId) {
|
|
onValidId(cid);
|
|
|
|
setCid("");
|
|
}
|
|
}, [cid, onValidId]);
|
|
return (
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
className="border-2"
|
|
onChange={(v) => setCid(v.target.value)}
|
|
value={cid}
|
|
/>
|
|
{isValid ? <p>OK</p> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function isValidThaiID(id: string) {
|
|
if (!/^\d{13}$/.test(id)) {
|
|
return false;
|
|
}
|
|
let sum = 0;
|
|
for (let i = 0; i < 12; i++) {
|
|
sum += Number(id[i]) * (13 - i);
|
|
}
|
|
const checkSum = (11 - (sum % 11)) % 10;
|
|
return checkSum === Number(id[12]);
|
|
}
|