bruno/renderer/components/Sidebar/CreateCollection/index.js
2022-03-19 01:05:43 +05:30

61 lines
1.6 KiB
JavaScript

import React, { useRef, useEffect } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Modal from 'components/Modal';
const CreateCollection = ({handleConfirm, handleCancel}) => {
const inputRef = useRef();
const formik = useFormik({
enableReinitialize: true,
initialValues: {
collectionName: ''
},
validationSchema: Yup.object({
collectionName: Yup.string()
.min(3, 'must be atleast 3 characters')
.max(50, 'must be 50 characters or less')
.required('name is required')
}),
onSubmit: (values) => {
handleConfirm(values);
}
});
useEffect(() => {
if(inputRef && inputRef.current) {
inputRef.current.focus();
}
}, [inputRef]);
const onSubmit = () => formik.handleSubmit();
return (
<Modal
size="sm"
title='Create Collection'
handleConfirm={onSubmit}
handleCancel={handleCancel}
>
<form className="grafnode-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="collectionName" className="block font-semibold">Name</label>
<input
id="collection-name"
type="text"
name="collectionName"
ref={inputRef}
className="block textbox mt-2 w-full"
onChange={formik.handleChange}
value={formik.values.collectionName || ''}
/>
{formik.touched.collectionName && formik.errors.collectionName ? (
<div className="text-red-500">{formik.errors.collectionName}</div>
) : null}
</div>
</form>
</Modal>
);
};
export default CreateCollection;