141 lines
3.1 KiB
TypeScript
141 lines
3.1 KiB
TypeScript
import React from 'react'
|
|
import ReactQuill from 'react-quill'
|
|
import 'react-quill/dist/quill.snow.css'
|
|
import '../styles/customQuillStyles.css'
|
|
import '../styles/styles.css'
|
|
|
|
const editorFormats = [
|
|
'header',
|
|
'font',
|
|
'size',
|
|
'bold',
|
|
'italic',
|
|
'underline',
|
|
'strike',
|
|
'blockquote',
|
|
'list',
|
|
'bullet',
|
|
'indent',
|
|
'link'
|
|
]
|
|
|
|
const editorModules = {
|
|
toolbar: [
|
|
[{ header: '1' }, { header: '2' }, { font: [] }],
|
|
[{ size: [] }],
|
|
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
|
[
|
|
{ list: 'ordered' },
|
|
{ list: 'bullet' },
|
|
{ indent: '-1' },
|
|
{ indent: '+1' }
|
|
],
|
|
['link']
|
|
]
|
|
}
|
|
|
|
interface InputFieldProps {
|
|
label: string
|
|
description?: string
|
|
type?: 'text' | 'textarea' | 'richtext'
|
|
placeholder: string
|
|
name: string
|
|
inputMode?: 'url'
|
|
value: string
|
|
error?: string
|
|
onChange: (name: string, value: string) => void
|
|
}
|
|
|
|
export const InputField = React.memo(
|
|
({
|
|
label,
|
|
description,
|
|
type = 'text',
|
|
placeholder,
|
|
name,
|
|
inputMode,
|
|
value,
|
|
error,
|
|
onChange
|
|
}: InputFieldProps) => {
|
|
const handleChange = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
|
) => {
|
|
onChange(name, e.target.value)
|
|
}
|
|
|
|
return (
|
|
<div className='inputLabelWrapperMain'>
|
|
<label className='form-label labelMain'>{label}</label>
|
|
{description && <p className='labelDescriptionMain'>{description}</p>}
|
|
{type === 'textarea' ? (
|
|
<textarea
|
|
className='inputMain'
|
|
placeholder={placeholder}
|
|
name={name}
|
|
value={value}
|
|
onChange={handleChange}
|
|
></textarea>
|
|
) : type === 'richtext' ? (
|
|
<ReactQuill
|
|
className='inputMain'
|
|
formats={editorFormats}
|
|
modules={editorModules}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(content) => onChange(name, content)}
|
|
/>
|
|
) : (
|
|
<input
|
|
type={type}
|
|
className='inputMain'
|
|
placeholder={placeholder}
|
|
name={name}
|
|
inputMode={inputMode}
|
|
value={value}
|
|
onChange={handleChange}
|
|
/>
|
|
)}
|
|
{error && <InputError message={error} />}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
type InputErrorProps = {
|
|
message: string
|
|
}
|
|
|
|
export const InputError = ({ message }: InputErrorProps) => {
|
|
if (!message) return null
|
|
|
|
return (
|
|
<div className='errorMain'>
|
|
<div className='errorMainColor'></div>
|
|
<p className='errorMainText'>{message}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface CheckboxFieldProps {
|
|
label: string
|
|
name: string
|
|
isChecked: boolean
|
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
|
}
|
|
|
|
export const CheckboxField = React.memo(
|
|
({ label, name, isChecked, handleChange }: CheckboxFieldProps) => (
|
|
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
|
|
<label className='form-label labelMain'>{label}</label>
|
|
<input
|
|
type='checkbox'
|
|
className='CheckboxMain'
|
|
name={name}
|
|
checked={isChecked}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
)
|
|
)
|