@rjsf/core
Version:
A simple React component capable of building HTML forms out of a JSON schema.
28 lines (27 loc) • 1.99 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { getWidget, getUiOptions, optionsList, hasWidget, } from '@rjsf/utils';
/** The `StringField` component is used to render a schema field that represents a string type
*
* @param props - The `FieldProps` for this template
*/
function StringField(props) {
const { schema, name, uiSchema, fieldPathId, formData, required, disabled = false, readonly = false, autofocus = false, onChange, onBlur, onFocus, registry, rawErrors, hideError, title, } = props;
const { title: schemaTitle, format } = schema;
const { widgets, schemaUtils, globalUiOptions } = registry;
const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
let defaultWidget = enumOptions ? 'select' : 'text';
if (format && hasWidget(schema, format, widgets)) {
defaultWidget = format;
}
const { widget = defaultWidget, placeholder = '', title: uiTitle, ...options } = getUiOptions(uiSchema);
const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
const label = uiTitle ?? title ?? schemaTitle ?? name;
const Widget = getWidget(schema, widget, widgets);
const onWidgetChange = useCallback((value, errorSchema, id) => {
// String field change passes an empty path array to the parent field which adds the appropriate path
return onChange(value, fieldPathId.path, errorSchema, id);
}, [onChange, fieldPathId]);
return (_jsx(Widget, { options: { ...options, enumOptions }, schema: schema, uiSchema: uiSchema, id: fieldPathId.$id, name: name, label: label, hideLabel: !displayLabel, hideError: hideError, value: formData, onChange: onWidgetChange, onBlur: onBlur, onFocus: onFocus, required: required, disabled: disabled, readonly: readonly, autofocus: autofocus, registry: registry, placeholder: placeholder, rawErrors: rawErrors, htmlName: fieldPathId.name }));
}
export default StringField;