2022-03-13 15:29:10 +01:00
|
|
|
import React, { useRef, useEffect } from 'react';
|
|
|
|
import {useFormik} from 'formik';
|
|
|
|
import * as Yup from 'yup';
|
|
|
|
import Modal from 'components/Modal';
|
|
|
|
import actions from 'providers/Store/actions'
|
|
|
|
import { useStore } from 'providers/Store';
|
|
|
|
|
2022-03-13 18:31:16 +01:00
|
|
|
const NewFolder = ({collectionUid, handleCancel, handleClose}) => {
|
2022-03-13 15:29:10 +01:00
|
|
|
const [store, storeDispatch] = useStore();
|
|
|
|
const inputRef = useRef();
|
|
|
|
const formik = useFormik({
|
|
|
|
enableReinitialize: true,
|
|
|
|
initialValues: {
|
|
|
|
folderName: ''
|
|
|
|
},
|
|
|
|
validationSchema: Yup.object({
|
|
|
|
folderName: Yup.string()
|
|
|
|
.min(1, 'must be atleast 1 characters')
|
|
|
|
.max(50, 'must be 50 characters or less')
|
|
|
|
.required('name is required')
|
|
|
|
}),
|
|
|
|
onSubmit: (values) => {
|
|
|
|
storeDispatch({
|
2022-03-13 22:13:36 +01:00
|
|
|
type: actions.SIDEBAR_COLLECTION_NEW_FOLDER,
|
2022-03-13 15:29:10 +01:00
|
|
|
collectionUid: collectionUid,
|
|
|
|
folderName: values.folderName
|
|
|
|
});
|
|
|
|
handleClose();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if(inputRef && inputRef.current) {
|
|
|
|
inputRef.current.focus();
|
|
|
|
}
|
|
|
|
}, [inputRef]);
|
|
|
|
|
|
|
|
const onSubmit = () => formik.handleSubmit();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Modal
|
|
|
|
size="sm"
|
2022-03-13 18:31:16 +01:00
|
|
|
title='New Folder'
|
|
|
|
confirmText='Create'
|
2022-03-13 15:29:10 +01:00
|
|
|
handleConfirm={onSubmit}
|
|
|
|
handleCancel={handleCancel}
|
|
|
|
>
|
|
|
|
<form className="grafnode-form" onSubmit={formik.handleSubmit}>
|
|
|
|
<div>
|
|
|
|
<label htmlFor="folderName" className="block font-semibold">Folder Name</label>
|
|
|
|
<input
|
|
|
|
id="collection-name" type="text" name="folderName"
|
|
|
|
ref={inputRef}
|
|
|
|
className="block textbox mt-2 w-full"
|
|
|
|
onChange={formik.handleChange}
|
|
|
|
value={formik.values.folderName || ''}
|
|
|
|
/>
|
|
|
|
{formik.touched.folderName && formik.errors.folderName ? (
|
|
|
|
<div className="text-red-500">{formik.errors.folderName}</div>
|
|
|
|
) : null}
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-03-13 18:31:16 +01:00
|
|
|
export default NewFolder;
|