UNPKG

@rjsf/semantic-ui

Version:

Semantic UI theme, fields and widgets for react-jsonschema-form

28 lines 2.24 kB
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import { Form } from 'semantic-ui-react'; import { getSemanticProps } from '../util.js'; import { ariaDescribedByIds, examplesId, getInputProps, labelValue, } from '@rjsf/utils'; /** 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, placeholder, label, hideLabel, value, required, readonly, disabled, onChange, onChangeOverride, onBlur, onFocus, autofocus, options, schema, uiSchema, formContext, type, rawErrors = [], } = props; const inputProps = getInputProps(schema, type, options); const semanticProps = getSemanticProps({ uiSchema, formContext, options, }); const _onChange = ({ target: { value } }) => onChange(value === '' ? options.emptyValue : value); const _onBlur = () => onBlur && onBlur(id, value); const _onFocus = () => onFocus && onFocus(id, value); return (_jsxs(_Fragment, { children: [_jsx(Form.Input, { id: id, name: id, placeholder: placeholder, ...inputProps, label: labelValue(label || undefined, hideLabel, false), required: required, autoFocus: autofocus, disabled: disabled || readonly, list: schema.examples ? examplesId(id) : undefined, ...semanticProps, value: value || value === 0 ? value : '', error: rawErrors.length > 0, onChange: onChangeOverride || _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id, !!schema.examples) }, id), Array.isArray(schema.examples) && (_jsx("datalist", { id: examplesId(id), children: schema.examples .concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []) .map((example) => { return _jsx("option", { value: example }, example); }) }))] })); } //# sourceMappingURL=BaseInputTemplate.js.map