keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separated colored renderer for stocks in Inventory.tsx

Browse source
This commit is contained in:
keannu125 2023-03-06 00:38:20 +08:00
parent b62a160f88
commit 54c416ad74
3 changed files with 74 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/Components/InventoryPage/IsNumber/IsNumber.tsx Normal file
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;
}
}

63
src/Components/InventoryPage/StockRenderer/StockRenderer.tsx Normal file
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>
);
}
}

71
src/routes/Inventory/Inventory.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React from "react";
import styles from "../../styles"; import styles from "../../styles";
import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon"; import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
import { import {
@ -10,74 +10,9 @@ import {
TableRow, TableRow,
} from "@mui/material"; } from "@mui/material";
import { SampleInventoryData } from "../../Components/SampleData/SampleData"; import { SampleInventoryData } from "../../Components/SampleData/SampleData";
import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRenderer";
export default function Inventory() { export default function Inventory() {
function is_number(number: string) {
const re = /^[0-9\b]+$/;
if (re.test(number)) {
return true;
} else {
return false;
}
}
function StockRender(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 (is_number(e.target.value) === true) {
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 (is_number(e.target.value) === true) {
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 (is_number(e.target.value) === true) {
setStock(parseInt(e.target.value));
}
}}
/>
</TableCell>
);
}
}
return ( return (
<div style={{ margin: 32, height: "100%" }}> <div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}> <div style={styles.content_row}>
@ -116,7 +51,7 @@ export default function Inventory() {
<TableCell style={{ ...styles.text_white, ...styles.text_S }}> <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
{row.name} {row.name}
</TableCell> </TableCell>
{StockRender(row.in_stock)} {StockRenderer(row.in_stock)}
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>