47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
|
|
export default function ProductForm({ name, price, onNameChange, onPriceChange, onSubmit, busy }) {
|
|
let [form,setForm] = useState({
|
|
name: "",
|
|
value: "",
|
|
})
|
|
let [formBusy,setFormBusy] = useState(false);
|
|
let nameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
name = e.target.value;
|
|
onNameChange(e.target.value);
|
|
}
|
|
let priceChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
price = e.target.value;
|
|
onPriceChange(e.target.value);
|
|
}
|
|
let submit = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault()
|
|
onSubmit();
|
|
}
|
|
formBusy = busy;
|
|
useEffect(() => {
|
|
setFormBusy(busy);
|
|
},[busy]);
|
|
return (
|
|
<form>
|
|
<fieldset disabled={formBusy}>
|
|
<div className="mb-3">
|
|
<label htmlFor="name">Name</label>
|
|
<input className="form-control" id="name" value={name} onChange={nameChanged}></input>
|
|
</div>
|
|
<div className="mb-3">
|
|
<label htmlFor="email">Price</label>
|
|
<input type="number" className="form-control" id="price" value={price} onChange={priceChanged}></input>
|
|
</div>
|
|
<div className="mb-3">
|
|
<button type="submit" className="btn btn-primary" onClick={submit}>
|
|
<FontAwesomeIcon icon={faChevronUp}/> Submit
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
);
|
|
} |