37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import { FormPublishData } from '@components/Publish/_types'
|
|
import classNames from 'classnames/bind'
|
|
import { ErrorMessage, Field, useFormikContext } from 'formik'
|
|
import { getObjectPropertyByPath } from '@utils/index'
|
|
import InputKeyValue, { KeyValueInputProps } from '../KeyValueInput'
|
|
import styles from './OptionsInput.module.css'
|
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
export default function OptionsInput(props: KeyValueInputProps): ReactElement {
|
|
const { errors, touched } = useFormikContext<FormPublishData>()
|
|
|
|
const hasError = (): boolean =>
|
|
[errors, touched].every(
|
|
(object) => !!getObjectPropertyByPath(object, props.name)
|
|
)
|
|
|
|
return (
|
|
<div className={cx({ container: true, hasError: hasError() })}>
|
|
<Field
|
|
{...props}
|
|
component={InputKeyValue}
|
|
uniqueKeys
|
|
keyPlaceholder="value"
|
|
valuePlaceholder="label"
|
|
/>
|
|
|
|
{hasError() && (
|
|
<div className={styles.error}>
|
|
<ErrorMessage name={props.name} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|