@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
23 lines • 1.49 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Input } from 'antd';
import { ariaDescribedByIds, } from '@rjsf/utils';
const INPUT_STYLE = {
width: '100%',
};
/** The `TextareaWidget` is a widget for rendering input fields as textarea.
*
* @param props - The `WidgetProps` for this component
*/
export default function TextareaWidget({ disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, value, }) {
const { readonlyAsDisabled = true } = formContext;
const handleChange = ({ target }) => onChange(target.value === '' ? options.emptyValue : target.value);
const handleBlur = ({ target }) => onBlur(id, target && target.value);
const handleFocus = ({ target }) => onFocus(id, target && target.value);
// Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
// they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
const extraProps = {
type: 'textarea',
};
return (_jsx(Input.TextArea, { disabled: disabled || (readonlyAsDisabled && readonly), id: id, name: id, onBlur: !readonly ? handleBlur : undefined, onChange: !readonly ? handleChange : undefined, onFocus: !readonly ? handleFocus : undefined, placeholder: placeholder, rows: options.rows || 4, style: INPUT_STYLE, value: value, ...extraProps, "aria-describedby": ariaDescribedByIds(id) }));
}
//# sourceMappingURL=index.js.map