import React, { memo } from 'react'; import PropTypes from 'prop-types'; import { Controller } from 'react-hook-form'; import styled from 'styled-components'; import { mobileQuery } from '@/constants/style'; import WYSIWYGEditor from './WYSIWYG'; import FormGroup from '../Common/FormGroup'; import FormGroupLabel from '../Common/FormGroupLabel'; import ErrorText from '../Common/ErrorText'; import Button from '../Common/Button'; import Input from '../Common/Input/Input'; const ButtonGroup = styled.div` display: flex; justify-content: flex-end; `; const SaveBtn = styled(Button)` width: 264px; ${mobileQuery} { width: 100%; } `; const DocumentForm = ({ editorContent, onSubmit, register, control, formErrors, apiError, isSubmitting, }) => ( <form onSubmit={onSubmit}> <FormGroup> <FormGroupLabel>Name</FormGroupLabel> <Input name="name" ref={register} /> {formErrors?.name && <ErrorText message={formErrors.name.message} />} </FormGroup> <FormGroup> <FormGroupLabel>Body</FormGroupLabel> <Controller name="body" control={control} defaultValue="" render={({ onChange }) => ( <WYSIWYGEditor editorContent={editorContent} onChange={onChange} /> )} /> {formErrors?.body && <ErrorText message={formErrors.body.message} />} </FormGroup> {apiError && <ErrorText message={apiError} />} <ButtonGroup> <SaveBtn color="primary" type="submit" disabled={isSubmitting}> {isSubmitting ? 'Please wait' : 'Save'} </SaveBtn> </ButtonGroup> </form> ); DocumentForm.propTypes = { editorContent: PropTypes.string, onSubmit: PropTypes.func.isRequired, register: PropTypes.func.isRequired, control: PropTypes.object.isRequired, formErrors: PropTypes.object, apiError: PropTypes.string, isSubmitting: PropTypes.bool.isRequired, }; export default memo(DocumentForm);