111 lines
2.5 KiB
JavaScript
111 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import FormErrors from '../formErrors';
|
|
import { FastField } from 'formik';
|
|
|
|
export const InputFormItemNotFast = (props) => {
|
|
const {
|
|
name,
|
|
form,
|
|
hint,
|
|
size,
|
|
password,
|
|
placeholder,
|
|
autoFocus,
|
|
autoComplete,
|
|
inputProps,
|
|
errorMessage,
|
|
required,
|
|
} = props;
|
|
const schemaField = props.schema ? props.schema[name] : undefined;
|
|
const label = schemaField ? schemaField.label : '';
|
|
|
|
const sizeLabelClassName =
|
|
{
|
|
small: 'col-form-label-sm',
|
|
large: 'col-form-label-lg',
|
|
}[size] || '';
|
|
|
|
const sizeInputClassName =
|
|
{
|
|
small: 'form-control-sm',
|
|
large: 'form-control-lg',
|
|
}[size] || '';
|
|
|
|
return (
|
|
<div className="form-group">
|
|
{!!label && (
|
|
<label
|
|
className={`col-form-label ${
|
|
required ? 'required' : null
|
|
} ${sizeLabelClassName}`}
|
|
htmlFor={name}
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
<input
|
|
id={name}
|
|
type={password ? 'password' : 'text'}
|
|
onChange={(event) => {
|
|
form.setFieldValue(name, event.target.value);
|
|
form.setFieldTouched(name);
|
|
}}
|
|
value={(form.values && form.values[name]) || ''}
|
|
placeholder={placeholder || undefined}
|
|
autoFocus={autoFocus || undefined}
|
|
autoComplete={autoComplete || undefined}
|
|
className={`form-control ${sizeInputClassName} ${FormErrors.validateStatus(
|
|
form,
|
|
name,
|
|
errorMessage,
|
|
)}`}
|
|
{...inputProps}
|
|
/>
|
|
<div className="invalid-feedback">
|
|
{FormErrors.displayableError(
|
|
form,
|
|
name,
|
|
errorMessage,
|
|
)}
|
|
</div>
|
|
{!!hint && (
|
|
<small className="form-text text-muted">
|
|
{hint}
|
|
</small>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
InputFormItemNotFast.defaultProps = {
|
|
required: false,
|
|
};
|
|
|
|
InputFormItemNotFast.propTypes = {
|
|
form: PropTypes.object.isRequired,
|
|
name: PropTypes.string.isRequired,
|
|
required: PropTypes.bool,
|
|
type: PropTypes.string,
|
|
hint: PropTypes.string,
|
|
autoFocus: PropTypes.bool,
|
|
size: PropTypes.string,
|
|
prefix: PropTypes.string,
|
|
placeholder: PropTypes.string,
|
|
errorMessage: PropTypes.string,
|
|
inputProps: PropTypes.object,
|
|
};
|
|
|
|
const InputFormItem = (props) => (
|
|
<FastField name={props.name}>
|
|
{({ form }) => (
|
|
<InputFormItemNotFast
|
|
{...props}
|
|
form={form}
|
|
/>
|
|
)}
|
|
</FastField>
|
|
);
|
|
|
|
export default InputFormItem;
|