|
| 1 | +import React from 'react' |
| 2 | +import { useForm } from 'react-hook-form' |
| 3 | + |
| 4 | +import Button from './Button' |
| 5 | +import FormError from './FormError' |
| 6 | +import MediaPreview from './MediaPreview' |
| 7 | + |
| 8 | +const CommentForm = (props) => { |
| 9 | + const { |
| 10 | + id, |
| 11 | + attachments, |
| 12 | + setAttachments, |
| 13 | + addComment, |
| 14 | + comment, |
| 15 | + setComment, |
| 16 | + cta |
| 17 | + } = props |
| 18 | + |
| 19 | + const { register, errors, handleSubmit } = useForm() |
| 20 | + |
| 21 | + const handleFileChange = async (event) => { |
| 22 | + const newFiles = event.target.files |
| 23 | + const newFilesArray = [] |
| 24 | + for (let i = 0; i < newFiles.length; i++) { |
| 25 | + newFilesArray.push( |
| 26 | + Object.assign(newFiles[i], { |
| 27 | + preview: URL.createObjectURL(newFiles[i]) |
| 28 | + }) |
| 29 | + ) |
| 30 | + } |
| 31 | + setAttachments([...attachments, ...newFilesArray]) |
| 32 | + } |
| 33 | + |
| 34 | + return ( |
| 35 | + <form className='comment-form' onSubmit={handleSubmit(addComment)}> |
| 36 | + <div className='comment-input'> |
| 37 | + <textarea |
| 38 | + rows='5' |
| 39 | + cols='25' |
| 40 | + name='Comments' |
| 41 | + value={comment} |
| 42 | + ref={register({ required: true })} |
| 43 | + onChange={(e) => setComment(e.target.value)} |
| 44 | + ></textarea> |
| 45 | + <div className='file-input'> |
| 46 | + <input |
| 47 | + type='file' |
| 48 | + id={`file-${id}`} |
| 49 | + className='file' |
| 50 | + multiple={true} |
| 51 | + onChange={handleFileChange} |
| 52 | + /> |
| 53 | + <label htmlFor={`file-${id}`} className='file-button-label'> |
| 54 | + <i className='eos-icons'>attachment</i> |
| 55 | + </label> |
| 56 | + </div> |
| 57 | + </div> |
| 58 | + {errors.Comments && <FormError message='Reply cannot be empty' />} |
| 59 | + <MediaPreview attachments={attachments} setAttachments={setAttachments} /> |
| 60 | + <Button className='btn btn-default'>{cta}</Button> |
| 61 | + </form> |
| 62 | + ) |
| 63 | +} |
| 64 | + |
| 65 | +export default CommentForm |
0 commit comments