Separated colored renderer for stocks in Inventory.tsx

This commit is contained in:
Keannu Christian Bernasol 2023-03-06 00:38:20 +08:00
parent b62a160f88
commit 54c416ad74
3 changed files with 74 additions and 68 deletions

View file

@ -0,0 +1,8 @@
export default function IsNumber(number: string) {
const re = /^[0-9\b]+$/;
if (re.test(number)) {
return true;
} else {
return false;
}
}

View file

@ -0,0 +1,63 @@
import { TableCell } from "@mui/material";
import { useState } from "react";
import styles from "../../../styles";
import IsNumber from "../IsNumber/IsNumber";
export default function StockRenderer(in_stock: number) {
const [stock, setStock] = useState(in_stock);
if (stock >= 0 && stock <= 3) {
return (
<TableCell>
<input
style={{
...styles.text_red,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
} else if (stock >= 4 && stock < 9) {
return (
<TableCell>
<input
style={{
...styles.text_orange,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
} else {
return (
<TableCell>
<input
style={{
...styles.text_green,
...{ border: "none", background: "none" },
...styles.text_S,
}}
value={stock}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (IsNumber(e.target.value)) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
}
}