@rjsf/mui
Version:
Material UI 7 theme, fields and widgets for react-jsonschema-form
57 lines • 4.39 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import { ariaDescribedByIds, examplesId, getInputProps, labelValue, } from '@rjsf/utils';
import { SchemaExamples } from '@rjsf/core';
import { getMuiProps } from '../util.js';
const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
* It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
* It can be customized/overridden for other themes or individual implementations as needed.
*
* @param props - The `WidgetProps` for this template
*/
export default function BaseInputTemplate(props) {
const { id, name, // remove this from textFieldProps
htmlName, placeholder, required, readonly, disabled, type, label, hideLabel, hideError, value, onChange, onChangeOverride, onBlur, onFocus, autofocus, options, schema, uiSchema, rawErrors = [], errorSchema, registry, InputLabelProps, InputProps, slotProps, ...textFieldProps } = props;
const { ClearButton } = registry.templates.ButtonTemplates;
// Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
const { step, min, max, accept, ...rest } = getInputProps(schema, type, options);
const muiProps = getMuiProps(options);
const { slotProps: muiSlotProps, ...otherMuiProps } = muiProps;
const htmlInputProps = {
...slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput,
...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.htmlInput,
step,
min,
max,
accept,
...(schema.examples ? { list: examplesId(id) } : undefined),
};
const _onChange = ({ target: { value } }) => onChange(value === '' ? options.emptyValue : value);
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type)
? { ...slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel, ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.inputLabel, ...InputLabelProps, shrink: true }
: { ...slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel, ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.inputLabel, ...InputLabelProps };
const _onClear = useCallback((e) => {
var _a;
e.preventDefault();
e.stopPropagation();
onChange((_a = options.emptyValue) !== null && _a !== void 0 ? _a : '');
}, [onChange, options.emptyValue]);
const inputProps = { ...InputProps, ...slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, ...muiSlotProps === null || muiSlotProps === void 0 ? void 0 : muiSlotProps.input };
if (options.allowClearTextInputs && value && !readonly && !disabled) {
const clearAdornment = (_jsx(InputAdornment, { position: 'end', children: _jsx(ClearButton, { registry: registry, onClick: _onClear }) }));
inputProps.endAdornment = !inputProps.endAdornment ? (clearAdornment) : (_jsxs(_Fragment, { children: [inputProps.endAdornment, clearAdornment] }));
}
return (_jsxs(_Fragment, { children: [_jsx(TextField, { id: id, name: htmlName || id, placeholder: placeholder, label: labelValue(label || undefined, hideLabel, undefined), autoFocus: autofocus, required: required, disabled: disabled || readonly, slotProps: {
...slotProps,
...muiSlotProps,
input: inputProps,
htmlInput: htmlInputProps,
inputLabel: DisplayInputLabelProps,
}, ...rest, value: value || value === 0 ? value : '', error: rawErrors.length > 0, onChange: onChangeOverride || _onChange, onBlur: _onBlur, onFocus: _onFocus, ...{ ...otherMuiProps, ...textFieldProps }, "aria-describedby": ariaDescribedByIds(id, !!schema.examples) }), _jsx(SchemaExamples, { id: id, schema: schema })] }));
}
//# sourceMappingURL=BaseInputTemplate.js.map