45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import React from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { bucketScheam } from "./DirectorySchema";
|
|
|
|
const BucketForm = ({ onSubmit, selectedBucket, onCancel, isSubmitting }) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(bucketScheam),
|
|
defaultValues: {
|
|
name: selectedBucket?.name || "",
|
|
description: selectedBucket?.description || "",
|
|
},
|
|
});
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
|
|
<div className="mb-3">
|
|
<label htmlFor="bucketName" className="form-label">Bucket Name</label>
|
|
<input id="bucketName" className="form-control form-control-sm" {...register("name")} />
|
|
{errors.name && <small className="danger-text">{errors.name.message}</small>}
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor="bucketDescription" className="form-label">Bucket Description</label>
|
|
<textarea id="bucketDescription" className="form-control form-control-sm" rows="3" {...register("description")} />
|
|
{errors.description && <small className="danger-text">{errors.description.message}</small>}
|
|
</div>
|
|
|
|
<div className="mt-4 d-flex justify-content-center gap-3">
|
|
<button type="button" onClick={onCancel} className="btn btn-sm btn-secondary" disabled={isSubmitting}>Cancel</button>
|
|
<button type="submit" className="btn btn-sm btn-primary" disabled={isSubmitting}>
|
|
{isSubmitting ? "Please wait..." : "Submit"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default BucketForm;
|