@rjsf/material-ui
Version:
Material UI 4 theme, fields and widgets for react-jsonschema-form
856 lines (846 loc) • 31.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@material-ui/icons/Add'), require('@material-ui/core/IconButton'), require('@rjsf/utils'), require('react/jsx-runtime'), require('@material-ui/core/Box'), require('@material-ui/core/Grid'), require('@material-ui/core/Paper'), require('@material-ui/core/TextField'), require('@material-ui/core/Typography'), require('@material-ui/icons/Error'), require('@material-ui/core/List'), require('@material-ui/core/ListItem'), require('@material-ui/core/ListItemIcon'), require('@material-ui/core/ListItemText'), require('@material-ui/icons/ArrowUpward'), require('@material-ui/icons/ArrowDownward'), require('@material-ui/icons/FileCopy'), require('@material-ui/icons/Remove'), require('@material-ui/core/FormHelperText'), require('@material-ui/core/FormControl'), require('@material-ui/core/Button'), require('@material-ui/core/Divider'), require('@material-ui/core/Checkbox'), require('@material-ui/core/FormControlLabel'), require('@material-ui/core/FormGroup'), require('@material-ui/core/FormLabel'), require('@material-ui/core/Radio'), require('@material-ui/core/RadioGroup'), require('@material-ui/core/Slider'), require('@material-ui/core/MenuItem')) :
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@material-ui/icons/Add', '@material-ui/core/IconButton', '@rjsf/utils', 'react/jsx-runtime', '@material-ui/core/Box', '@material-ui/core/Grid', '@material-ui/core/Paper', '@material-ui/core/TextField', '@material-ui/core/Typography', '@material-ui/icons/Error', '@material-ui/core/List', '@material-ui/core/ListItem', '@material-ui/core/ListItemIcon', '@material-ui/core/ListItemText', '@material-ui/icons/ArrowUpward', '@material-ui/icons/ArrowDownward', '@material-ui/icons/FileCopy', '@material-ui/icons/Remove', '@material-ui/core/FormHelperText', '@material-ui/core/FormControl', '@material-ui/core/Button', '@material-ui/core/Divider', '@material-ui/core/Checkbox', '@material-ui/core/FormControlLabel', '@material-ui/core/FormGroup', '@material-ui/core/FormLabel', '@material-ui/core/Radio', '@material-ui/core/RadioGroup', '@material-ui/core/Slider', '@material-ui/core/MenuItem'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/material-ui"] = {}, global.core, global.AddIcon, global.IconButton, global.utils, global.jsxRuntime, global.Box, global.Grid3, global.Paper, global.TextField, global.Typography, global.ErrorIcon, global.List, global.ListItem, global.ListItemIcon, global.ListItemText, global.ArrowUpwardIcon, global.ArrowDownwardIcon, global.CopyIcon, global.RemoveIcon, global.FormHelperText, global.FormControl, global.Button, global.Divider, global.Checkbox, global.FormControlLabel, global.FormGroup, global.FormLabel, global.Radio, global.RadioGroup, global.Slider, global.MenuItem));
})(this, (function (exports, core, AddIcon, IconButton, utils, jsxRuntime, Box, Grid3, Paper, TextField, Typography, ErrorIcon, List, ListItem, ListItemIcon, ListItemText, ArrowUpwardIcon, ArrowDownwardIcon, CopyIcon, RemoveIcon, FormHelperText, FormControl, Button, Divider, Checkbox, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup, Slider, MenuItem) { 'use strict';
// src/MuiForm/MuiForm.tsx
function AddButton({
uiSchema,
registry,
...props
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.AddItemButton), ...props, color: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {}) });
}
function ArrayFieldItemTemplate(props) {
const {
children,
disabled,
hasToolbar,
hasCopy,
hasMoveDown,
hasMoveUp,
hasRemove,
index,
onCopyIndexClick,
onDropIndexClick,
onReorderClick,
readonly,
uiSchema,
registry
} = props;
const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold",
minWidth: 0
};
return /* @__PURE__ */ jsxRuntime.jsxs(Grid3, { container: true, alignItems: "center", children: [
/* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, xs: true, style: { overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { p: 2, children }) }) }) }),
hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs(Grid3, { item: true, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveUpButton2,
{
style: btnStyle,
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveDownButton2,
{
style: btnStyle,
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
CopyButton2,
{
style: btnStyle,
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
style: btnStyle,
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
)
] })
] });
}
function ArrayFieldTemplate(props) {
const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = utils.getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = utils.getTemplate(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = utils.getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { p: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldTitleTemplate,
{
idSchema,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldDescriptionTemplate,
{
idSchema,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)),
canAdd && /* @__PURE__ */ jsxRuntime.jsx(Grid3, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
className: "array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
) }) }) })
] }) });
}
var TYPES_THAT_SHRINK_LABEL = ["date", "datetime-local", "file", "time"];
function BaseInputTemplate(props) {
const {
id,
name,
// remove this from textFieldProps
placeholder,
required,
readonly,
disabled,
type,
label,
hideLabel,
hideError,
value,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
uiSchema,
rawErrors = [],
formContext,
registry,
InputLabelProps,
...textFieldProps
} = props;
const inputProps = utils.getInputProps(schema, type, options);
const { step, min, max, ...rest } = inputProps;
const otherProps = {
inputProps: {
step,
min,
max,
...schema.examples ? { list: utils.examplesId(id) } : void 0
},
...rest
};
const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = ({ target }) => onBlur(id, target && target.value);
const _onFocus = ({ target }) => onFocus(id, target && target.value);
const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? {
...InputLabelProps,
shrink: true
} : InputLabelProps;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
TextField,
{
id,
name: id,
placeholder,
label: utils.labelValue(label || void 0, hideLabel, false),
autoFocus: autofocus,
required,
disabled: disabled || readonly,
...otherProps,
value: value || value === 0 ? value : "",
error: rawErrors.length > 0,
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
InputLabelProps: DisplayInputLabelProps,
...textFieldProps,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
),
Array.isArray(schema.examples) && /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: utils.examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, example);
}) })
] });
}
function DescriptionField(props) {
const { id, description } = props;
if (description) {
return /* @__PURE__ */ jsxRuntime.jsx(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, children: description });
}
return null;
}
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { mb: 2, p: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: translateString(utils.TranslatableString.ErrorsLabel) }),
/* @__PURE__ */ jsxRuntime.jsx(List, { dense: true, children: errors.map((error, i) => {
return /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { children: [
/* @__PURE__ */ jsxRuntime.jsx(ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { color: "error" }) }),
/* @__PURE__ */ jsxRuntime.jsx(ListItemText, { primary: error.stack })
] }, i);
}) })
] }) });
}
function MuiIconButton(props) {
const { icon, color, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...otherProps, size: "small", color, children: icon });
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
MuiIconButton,
{
title: translateString(utils.TranslatableString.CopyButton),
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { fontSize: "small" })
}
);
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
MuiIconButton,
{
title: translateString(utils.TranslatableString.MoveDownButton),
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowDownwardIcon, { fontSize: "small" })
}
);
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
MuiIconButton,
{
title: translateString(utils.TranslatableString.MoveUpButton),
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpwardIcon, { fontSize: "small" })
}
);
}
function RemoveButton(props) {
const { iconType, ...otherProps } = props;
const {
registry: { translateString }
} = otherProps;
return /* @__PURE__ */ jsxRuntime.jsx(
MuiIconButton,
{
title: translateString(utils.TranslatableString.RemoveButton),
...otherProps,
color: "secondary",
icon: /* @__PURE__ */ jsxRuntime.jsx(RemoveIcon, { fontSize: iconType === "default" ? "medium" : "small" })
}
);
}
function FieldErrorTemplate(props) {
const { errors = [], idSchema } = props;
if (errors.length === 0) {
return null;
}
const id = utils.errorId(idSchema);
return /* @__PURE__ */ jsxRuntime.jsx(List, { dense: true, disablePadding: true, children: errors.map((error, i) => {
return /* @__PURE__ */ jsxRuntime.jsx(ListItem, { disableGutters: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormHelperText, { id, children: error }) }, i);
}) });
}
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
if (!help) {
return null;
}
const id = utils.helpId(idSchema);
return /* @__PURE__ */ jsxRuntime.jsx(FormHelperText, { id, children: help });
}
function FieldTemplate(props) {
const {
id,
children,
classNames,
style,
disabled,
displayLabel,
hidden,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
rawErrors = [],
errors,
help,
description,
rawDescription,
schema,
uiSchema,
registry
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const WrapIfAdditionalTemplate2 = utils.getTemplate(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "none" }, children });
}
return /* @__PURE__ */ jsxRuntime.jsx(
WrapIfAdditionalTemplate2,
{
classNames,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry,
children: /* @__PURE__ */ jsxRuntime.jsxs(FormControl, { fullWidth: true, error: rawErrors.length ? true : false, required, children: [
children,
displayLabel && rawDescription ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "textSecondary", children: description }) : null,
errors,
help
] })
}
);
}
function ObjectFieldTemplate(props) {
const {
description,
title,
properties,
required,
disabled,
readonly,
uiSchema,
idSchema,
schema,
formData,
onAddClick,
registry
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
title && /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsxs(Grid3, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
properties.map(
(element, index) => (
// Remove the <Grid> if the inner element is hidden as the <Grid>
// itself would otherwise still take up space.
element.hidden ? element.content : /* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, xs: 12, style: { marginBottom: "10px" }, children: element.content }, index)
)
),
utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(Grid3, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
className: "object-property-expand",
onClick: onAddClick(schema),
disabled: disabled || readonly,
uiSchema,
registry
}
) }) })
] })
] });
}
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
}
function TitleField({
id,
title
}) {
return /* @__PURE__ */ jsxRuntime.jsxs(Box, { id, mb: 1, mt: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", children: title }),
/* @__PURE__ */ jsxRuntime.jsx(Divider, {})
] });
}
function WrapIfAdditionalTemplate(props) {
const {
children,
classNames,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry
} = props;
const { templates, translateString } = registry;
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold"
};
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target.value);
return /* @__PURE__ */ jsxRuntime.jsxs(Grid3, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
/* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, xs: true, children: /* @__PURE__ */ jsxRuntime.jsx(
TextField,
{
fullWidth: true,
required,
label: keyLabel,
defaultValue: label,
disabled: disabled || readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? handleBlur : void 0,
type: "text"
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, xs: true, children }),
/* @__PURE__ */ jsxRuntime.jsx(Grid3, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
iconType: "default",
style: btnStyle,
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema,
registry
}
) })
] }, `${id}-key`);
}
// src/Templates/Templates.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldHelpTemplate,
FieldTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
function CheckboxWidget(props) {
const {
schema,
id,
value,
disabled,
readonly,
label = "",
hideLabel,
autofocus,
onChange,
onBlur,
onFocus,
registry,
options,
uiSchema
} = props;
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
options
);
const required = utils.schemaRequiresTrueValue(schema);
const _onChange = (_, checked) => onChange(checked);
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
const description = options.description ?? schema.description;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!hideLabel && !!description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(
FormControlLabel,
{
control: /* @__PURE__ */ jsxRuntime.jsx(
Checkbox,
{
id,
name: id,
checked: typeof value === "undefined" ? false : Boolean(value),
required,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
}
),
label: utils.labelValue(label, hideLabel, false)
}
)
] });
}
function CheckboxesWidget({
label,
hideLabel,
id,
disabled,
options,
value,
autofocus,
readonly,
required,
onChange,
onBlur,
onFocus
}) {
const { enumOptions, enumDisabled, inline, emptyValue } = options;
const checkboxesValues = Array.isArray(value) ? value : [value];
const _onChange = (index) => ({ target: { checked } }) => {
if (checked) {
onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
} else {
onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
}
};
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
utils.labelValue(
/* @__PURE__ */ jsxRuntime.jsx(FormLabel, { required, htmlFor: id, children: label || void 0 }),
hideLabel
),
/* @__PURE__ */ jsxRuntime.jsx(FormGroup, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const checkbox = /* @__PURE__ */ jsxRuntime.jsx(
Checkbox,
{
id: utils.optionId(id, index),
name: id,
checked,
disabled: disabled || itemDisabled || readonly,
autoFocus: autofocus && index === 0,
onChange: _onChange(index),
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
return /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, { control: checkbox, label: option.label }, index);
}) })
] });
}
function RadioWidget({
id,
options,
value,
required,
disabled,
readonly,
label,
hideLabel,
onChange,
onBlur,
onFocus
}) {
const { enumOptions, enumDisabled, emptyValue } = options;
const _onChange = (_, value2) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
const row = options ? options.inline : false;
const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? null;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
utils.labelValue(
/* @__PURE__ */ jsxRuntime.jsx(FormLabel, { required, htmlFor: id, children: label || void 0 }),
hideLabel
),
/* @__PURE__ */ jsxRuntime.jsx(
RadioGroup,
{
id,
name: id,
value: selectedIndex,
row,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const radio = /* @__PURE__ */ jsxRuntime.jsx(
FormControlLabel,
{
control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { name: id, id: utils.optionId(id, index), color: "primary" }),
label: option.label,
value: String(index),
disabled: disabled || itemDisabled || readonly
},
index
);
return radio;
})
}
)
] });
}
function RangeWidget(props) {
const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
const sliderProps = { value, label, id, name: id, ...utils.rangeSpec(schema) };
const _onChange = (_, value2) => {
onChange(value2 ?? options.emptyValue);
};
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
utils.labelValue(
/* @__PURE__ */ jsxRuntime.jsx(FormLabel, { required, htmlFor: id, children: label || void 0 }),
hideLabel
),
/* @__PURE__ */ jsxRuntime.jsx(
Slider,
{
disabled: disabled || readonly,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
valueLabelDisplay: "auto",
...sliderProps,
"aria-describedby": utils.ariaDescribedByIds(id)
}
)
] });
}
function SelectWidget({
schema,
id,
name,
// remove this from textFieldProps
options,
label,
hideLabel,
required,
disabled,
readonly,
placeholder,
value,
multiple,
autofocus,
onChange,
onBlur,
onFocus,
rawErrors = [],
registry,
uiSchema,
hideError,
formContext,
...textFieldProps
}) {
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
multiple = typeof multiple === "undefined" ? false : !!multiple;
const emptyValue = multiple ? [] : "";
const isEmpty = typeof value === "undefined" || multiple && value.length < 1 || !multiple && value === emptyValue;
const _onChange = ({ target: { value: value2 } }) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, optEmptyVal));
const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
const showPlaceholderOption = !multiple && schema.default === void 0;
return /* @__PURE__ */ jsxRuntime.jsxs(
TextField,
{
id,
name: id,
label: utils.labelValue(label, hideLabel || !label, false),
value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
placeholder,
error: rawErrors.length > 0,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
...textFieldProps,
select: true,
InputLabelProps: {
...textFieldProps.InputLabelProps,
shrink: !isEmpty
},
SelectProps: {
...textFieldProps.SelectProps,
multiple
},
"aria-describedby": utils.ariaDescribedByIds(id),
children: [
showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { value: "", children: placeholder }),
Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { value: String(i), disabled: disabled2, children: label2 }, i);
})
]
}
);
}
function TextareaWidget(props) {
const { options, registry } = props;
const BaseInputTemplate2 = utils.getTemplate("BaseInputTemplate", registry, options);
let rows = 5;
if (typeof options.rows === "string" || typeof options.rows === "number") {
rows = options.rows;
}
return /* @__PURE__ */ jsxRuntime.jsx(BaseInputTemplate2, { ...props, multiline: true, rows });
}
// src/Widgets/Widgets.ts
function generateWidgets() {
return {
CheckboxWidget,
CheckboxesWidget,
RadioWidget,
RangeWidget,
SelectWidget,
TextareaWidget
};
}
var Widgets_default = generateWidgets();
// src/Theme/Theme.tsx
function generateTheme() {
return {
templates: generateTemplates(),
widgets: generateWidgets()
};
}
var Theme_default = generateTheme();
// src/MuiForm/MuiForm.tsx
function generateForm() {
return core.withTheme(generateTheme());
}
var MuiForm_default = generateForm();
// src/index.ts
var src_default = MuiForm_default;
exports.Form = MuiForm_default;
exports.Templates = Templates_default;
exports.Theme = Theme_default;
exports.Widgets = Widgets_default;
exports.default = src_default;
exports.generateForm = generateForm;
exports.generateTemplates = generateTemplates;
exports.generateTheme = generateTheme;
exports.generateWidgets = generateWidgets;
Object.defineProperty(exports, '__esModule', { value: true });
}));