2024-08-26 19:35:37 +00:00
|
|
|
import MDEditor from '@uiw/react-md-editor'
|
2024-07-24 10:13:28 +00:00
|
|
|
import React from 'react'
|
2024-08-26 19:35:37 +00:00
|
|
|
import rehypeSanitize from 'rehype-sanitize'
|
2024-07-24 10:13:28 +00:00
|
|
|
import '../styles/styles.css'
|
2024-07-21 16:30:03 +00:00
|
|
|
|
2024-07-12 09:22:31 +00:00
|
|
|
interface InputFieldProps {
|
|
|
|
label: string
|
|
|
|
description?: string
|
2024-07-21 16:30:03 +00:00
|
|
|
type?: 'text' | 'textarea' | 'richtext'
|
2024-07-12 09:22:31 +00:00
|
|
|
placeholder: string
|
|
|
|
name: string
|
|
|
|
inputMode?: 'url'
|
2024-07-21 16:30:03 +00:00
|
|
|
value: string
|
2024-07-24 10:13:28 +00:00
|
|
|
error?: string
|
2024-07-21 16:30:03 +00:00
|
|
|
onChange: (name: string, value: string) => void
|
2024-07-12 09:22:31 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 16:30:03 +00:00
|
|
|
export const InputField = React.memo(
|
|
|
|
({
|
|
|
|
label,
|
|
|
|
description,
|
|
|
|
type = 'text',
|
|
|
|
placeholder,
|
|
|
|
name,
|
|
|
|
inputMode,
|
|
|
|
value,
|
2024-07-24 10:13:28 +00:00
|
|
|
error,
|
2024-07-21 16:30:03 +00:00
|
|
|
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' ? (
|
2024-08-26 19:35:37 +00:00
|
|
|
<MDEditor
|
2024-07-21 16:30:03 +00:00
|
|
|
value={value}
|
2024-08-26 19:35:37 +00:00
|
|
|
onChange={(content) => onChange(name, content || '')}
|
|
|
|
previewOptions={{
|
|
|
|
rehypePlugins: [[rehypeSanitize]]
|
|
|
|
}}
|
|
|
|
preview='edit'
|
2024-07-21 16:30:03 +00:00
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<input
|
|
|
|
type={type}
|
|
|
|
className='inputMain'
|
|
|
|
placeholder={placeholder}
|
|
|
|
name={name}
|
|
|
|
inputMode={inputMode}
|
|
|
|
value={value}
|
|
|
|
onChange={handleChange}
|
|
|
|
/>
|
|
|
|
)}
|
2024-07-24 10:13:28 +00:00
|
|
|
{error && <InputError message={error} />}
|
2024-07-21 16:30:03 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2024-07-12 09:22:31 +00:00
|
|
|
)
|
|
|
|
|
2024-07-24 10:13:28 +00:00
|
|
|
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>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2024-07-12 09:22:31 +00:00
|
|
|
interface CheckboxFieldProps {
|
|
|
|
label: string
|
|
|
|
name: string
|
2024-07-21 16:30:03 +00:00
|
|
|
isChecked: boolean
|
|
|
|
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
2024-07-12 09:22:31 +00:00
|
|
|
}
|
|
|
|
|
2024-07-21 16:30:03 +00:00
|
|
|
export const CheckboxField = React.memo(
|
|
|
|
({ label, name, isChecked, handleChange }: CheckboxFieldProps) => (
|
|
|
|
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
|
|
|
|
<label className='form-label labelMain'>{label}</label>
|
2024-07-12 09:22:31 +00:00
|
|
|
<input
|
2024-07-21 16:30:03 +00:00
|
|
|
type='checkbox'
|
|
|
|
className='CheckboxMain'
|
|
|
|
name={name}
|
|
|
|
checked={isChecked}
|
|
|
|
onChange={handleChange}
|
2024-07-12 09:22:31 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2024-07-21 16:30:03 +00:00
|
|
|
)
|
2024-07-12 09:22:31 +00:00
|
|
|
)
|