@rjsf/react-bootstrap
Version:
React Bootstrap theme, fields and widgets for react-jsonschema-form, powered by react-bootstrap
863 lines (853 loc) • 31.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@rjsf/utils'), require('react-bootstrap/Button'), require('@react-icons/all-files/bs/BsPlus'), require('react/jsx-runtime'), require('react-bootstrap/Row'), require('react-bootstrap/Col'), require('react-bootstrap/Container'), require('react'), require('react-bootstrap/Form'), require('react-bootstrap/Card'), require('react-bootstrap/ListGroup'), require('@react-icons/all-files/io/IoIosCopy'), require('@react-icons/all-files/io/IoIosRemove'), require('@react-icons/all-files/ai/AiOutlineArrowUp'), require('@react-icons/all-files/ai/AiOutlineArrowDown'), require('@react-icons/all-files/io/IoMdClose'), require('react-bootstrap/FormRange'), require('react-bootstrap/FormSelect'), require('react-bootstrap/FormControl'), require('react-bootstrap/InputGroup')) :
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@rjsf/utils', 'react-bootstrap/Button', '@react-icons/all-files/bs/BsPlus', 'react/jsx-runtime', 'react-bootstrap/Row', 'react-bootstrap/Col', 'react-bootstrap/Container', 'react', 'react-bootstrap/Form', 'react-bootstrap/Card', 'react-bootstrap/ListGroup', '@react-icons/all-files/io/IoIosCopy', '@react-icons/all-files/io/IoIosRemove', '@react-icons/all-files/ai/AiOutlineArrowUp', '@react-icons/all-files/ai/AiOutlineArrowDown', '@react-icons/all-files/io/IoMdClose', 'react-bootstrap/FormRange', 'react-bootstrap/FormSelect', 'react-bootstrap/FormControl', 'react-bootstrap/InputGroup'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/react-bootstrap"] = {}, global.core, global.utils, global.Button, global.BsPlus, global.jsxRuntime, global.Row2, global.Col2, global.Container, global.react, global.Form3, global.Card, global.ListGroup, global.IoIosCopy, global.IoIosRemove, global.AiOutlineArrowUp, global.AiOutlineArrowDown, global.IoMdClose, global.FormRange, global.FormSelect, global.FormControl, global.InputGroup));
})(this, (function (exports, core, utils, Button, BsPlus, jsxRuntime, Row2, Col2, Container, react, Form3, Card, ListGroup, IoIosCopy, IoIosRemove, AiOutlineArrowUp, AiOutlineArrowDown, IoMdClose, FormRange, FormSelect, FormControl, InputGroup) { 'use strict';
// src/Form/Form.tsx
function AddButton({
uiSchema,
registry,
...props
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsx(
Button,
{
title: translateString(utils.TranslatableString.AddItemButton),
...props,
style: { width: "100%" },
className: `ml-1 ${props.className}`,
children: /* @__PURE__ */ jsxRuntime.jsx(BsPlus.BsPlus, {})
}
);
}
function ArrayFieldItemTemplate(props) {
const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, uiSchema, registry } = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldItemButtonsTemplate = utils.getTemplate(
"ArrayFieldItemButtonsTemplate",
registry,
uiOptions
);
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold"
};
const padding = hasDescription ? "pb-1" : "pt-4 mt-2";
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(Row2, { className: "mb-2 d-flex align-items-center", children: [
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: "8", md: "9", lg: "10", children }),
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: "4", md: "3", lg: "2", className: displayLabel ? padding : "py-4", children: hasToolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "d-flex flex-row", children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) }) })
] }) });
}
function ArrayFieldTemplate(props) {
const {
canAdd,
disabled,
fieldPathId,
uiSchema,
items,
optionalDataControl,
onAddClick,
readonly,
registry,
required,
schema,
title
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = utils.getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = utils.getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Row2, { className: "p-0 m-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Col2, { className: "p-0 m-0", children: [
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldTitleTemplate,
{
fieldPathId,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
),
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldDescriptionTemplate,
{
fieldPathId,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsxs(Container, { fluid: true, className: "p-0 m-0", children: [
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
items,
canAdd && /* @__PURE__ */ jsxRuntime.jsx(Container, { className: "", children: /* @__PURE__ */ jsxRuntime.jsxs(Row2, { className: "mt-2", children: [
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: 9, md: 10, lg: 11 }),
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: 3, md: 2, lg: 1, className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
id: utils.buttonId(fieldPathId, "add"),
className: "rjsf-array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
) })
] }) })
] }, `array-item-list-${fieldPathId.$id}`)
] }) }) });
}
function BaseInputTemplate({
id,
htmlName,
placeholder,
required,
readonly,
disabled,
type,
value,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
rawErrors = [],
children,
extraProps,
registry
}) {
const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
const inputProps = {
...extraProps,
...utils.getInputProps(schema, type, options)
};
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 _onClear = react.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
onChange(options.emptyValue ?? "");
},
[onChange, options.emptyValue]
);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
Form3.Control,
{
id,
name: htmlName || id,
placeholder,
autoFocus: autofocus,
required,
disabled,
readOnly: readonly,
className: rawErrors.length > 0 ? "is-invalid" : "",
list: schema.examples ? utils.examplesId(id) : void 0,
...inputProps,
value: value || value === 0 ? value : "",
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
),
options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsxRuntime.jsx(ClearButton2, { registry, onClick: _onClear }),
children,
/* @__PURE__ */ jsxRuntime.jsx(core.SchemaExamples, { id, schema })
] });
}
function DescriptionField({ id, description, registry, uiSchema }) {
if (!description) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) }) });
}
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsxs(Card, { border: "danger", className: "mb-4", children: [
/* @__PURE__ */ jsxRuntime.jsx(Card.Header, { className: "alert-danger", children: translateString(utils.TranslatableString.ErrorsLabel) }),
/* @__PURE__ */ jsxRuntime.jsx(Card.Body, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(ListGroup, { children: errors.map((error, i) => {
return /* @__PURE__ */ jsxRuntime.jsx(ListGroup.Item, { className: "border-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: error.stack }) }, i);
}) }) })
] });
}
function IconButton(props) {
const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsxRuntime.jsx(Button, { ...otherProps, variant: props.variant || "light", size: "sm", children: icon });
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(IoIosCopy.IoIosCopy, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(AiOutlineArrowDown.AiOutlineArrowDown, {}) });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(AiOutlineArrowUp.AiOutlineArrowUp, {}) });
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.RemoveButton),
variant: "danger",
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(IoIosRemove.IoIosRemove, {})
}
);
}
function ClearButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.ClearButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(IoMdClose.IoMdClose, {}) });
}
function FieldErrorTemplate(props) {
const { errors = [], fieldPathId } = props;
if (errors.length === 0) {
return null;
}
const id = utils.errorId(fieldPathId);
return /* @__PURE__ */ jsxRuntime.jsx(ListGroup, { as: "ul", id, children: errors.map((error, i) => {
return /* @__PURE__ */ jsxRuntime.jsx(ListGroup.Item, { as: "li", className: "border-0 m-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsx("small", { className: "m-0 text-danger", children: error }) }, i);
}) });
}
function FieldHelpTemplate(props) {
const { fieldPathId, help, uiSchema, registry, hasErrors } = props;
if (!help) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(Form3.Text, { id: utils.helpId(fieldPathId), className: hasErrors ? "text-danger" : "text-muted", children: /* @__PURE__ */ jsxRuntime.jsx(core.RichHelp, { help, registry, uiSchema }) });
}
function FieldTemplate({
id,
children,
displayLabel,
rawErrors = [],
errors,
help,
description,
rawDescription,
classNames,
style,
disabled,
label,
hidden,
onKeyRename,
onKeyRenameBlur,
onRemoveProperty,
readonly,
required,
schema,
uiSchema,
registry
}) {
const uiOptions = utils.getUiOptions(uiSchema);
const WrapIfAdditionalTemplate2 = utils.getTemplate(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children });
}
const isCheckbox = uiOptions.widget === "checkbox";
return /* @__PURE__ */ jsxRuntime.jsx(
WrapIfAdditionalTemplate2,
{
classNames,
style,
disabled,
id,
label,
displayLabel,
rawDescription,
onKeyRename,
onKeyRenameBlur,
onRemoveProperty,
readonly,
required,
schema,
uiSchema,
registry,
children: /* @__PURE__ */ jsxRuntime.jsxs(Form3.Group, { children: [
displayLabel && !isCheckbox && /* @__PURE__ */ jsxRuntime.jsxs(Form3.Label, { htmlFor: id, className: rawErrors.length > 0 ? "text-danger" : "", children: [
label,
required ? "*" : null
] }),
children,
displayLabel && rawDescription && !isCheckbox && /* @__PURE__ */ jsxRuntime.jsx(Form3.Text, { className: rawErrors.length > 0 ? "text-danger" : "text-muted", children: description }),
errors,
help
] })
}
);
}
function GridTemplate(props) {
const { children, column, ...rest } = props;
if (column) {
return /* @__PURE__ */ jsxRuntime.jsx(Col2, { ...rest, children });
}
return /* @__PURE__ */ jsxRuntime.jsx(Row2, { ...rest, children });
}
function MultiSchemaFieldTemplate({ selector, optionSchemaField }) {
return /* @__PURE__ */ jsxRuntime.jsxs(Card, { style: { marginBottom: "1rem" }, children: [
/* @__PURE__ */ jsxRuntime.jsx(Card.Body, { children: selector }),
/* @__PURE__ */ jsxRuntime.jsx(Card.Body, { children: optionSchemaField })
] });
}
function ObjectFieldTemplate({
description,
title,
properties,
required,
uiSchema,
fieldPathId,
schema,
formData,
optionalDataControl,
onAddProperty,
disabled,
readonly,
registry
}) {
const uiOptions = utils.getUiOptions(uiSchema);
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
title && /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(fieldPathId),
title,
required,
schema,
uiSchema,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
),
description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(fieldPathId),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsxs(Container, { fluid: true, className: "p-0", children: [
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
properties.map((element, index) => /* @__PURE__ */ jsxRuntime.jsx(Row2, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Col2, { xs: 12, children: [
" ",
element.content
] }) }, index)),
utils.canExpand(schema, uiSchema, formData) ? /* @__PURE__ */ jsxRuntime.jsx(Row2, { children: /* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: { offset: 11, span: 1 }, className: "py-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
id: utils.buttonId(fieldPathId, "add"),
onClick: onAddProperty,
disabled: disabled || readonly,
className: "rjsf-object-property-expand",
uiSchema,
registry
}
) }) }) : null
] })
] });
}
function OptionalDataControlsTemplate(props) {
const { id, registry, label, onAddClick, onRemoveClick } = props;
if (onAddClick) {
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
id,
registry,
className: "rjsf-add-optional-data",
icon: /* @__PURE__ */ jsxRuntime.jsx(BsPlus.BsPlus, {}),
onClick: onAddClick,
title: label,
size: "sm",
variant: "secondary"
}
);
} else if (onRemoveClick) {
return /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton,
{
id,
registry,
className: "rjsf-remove-optional-data",
onClick: onRemoveClick,
title: label,
size: "sm",
variant: "secondary"
}
);
}
return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
}
function SubmitButton(props) {
const { submitText, norender, props: submitButtonProps } = utils.getSubmitButtonOptions(props.uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
}
function TitleField({
id,
title,
uiSchema,
optionalDataControl
}) {
const uiOptions = utils.getUiOptions(uiSchema);
let heading = /* @__PURE__ */ jsxRuntime.jsx("h5", { children: uiOptions.title || title });
if (optionalDataControl) {
heading = /* @__PURE__ */ jsxRuntime.jsx(Container, { fluid: true, className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(Row2, { children: [
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: "11", children: heading }),
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: "1", style: { marginLeft: "-5px" }, children: optionalDataControl })
] }) });
}
return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: "my-1", children: [
heading,
/* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-0 bg-secondary mt-0", style: { height: "1px" } })
] });
}
function WrapIfAdditionalTemplate({
classNames,
style,
children,
disabled,
id,
label,
displayLabel,
onRemoveProperty,
onKeyRenameBlur,
rawDescription,
readonly,
required,
schema,
uiSchema,
registry
}) {
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 descPadding = rawDescription ? 1 : 0;
const descMargin = rawDescription ? -24 : 0;
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
}
const keyId = `${id}-key`;
const margin = displayLabel ? 12 + descMargin : 0;
const padding = displayLabel ? 4 + descPadding : 1;
return /* @__PURE__ */ jsxRuntime.jsxs(Row2, { className: classNames, style, children: [
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: 5, children: /* @__PURE__ */ jsxRuntime.jsxs(Form3.Group, { children: [
displayLabel && /* @__PURE__ */ jsxRuntime.jsx(Form3.Label, { htmlFor: keyId, children: keyLabel }),
/* @__PURE__ */ jsxRuntime.jsx(
Form3.Control,
{
required,
defaultValue: label,
disabled: disabled || readonly,
id: keyId,
name: keyId,
onBlur: !readonly ? onKeyRenameBlur : void 0,
type: "text"
}
)
] }) }),
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: 6, children }),
/* @__PURE__ */ jsxRuntime.jsx(Col2, { xs: 1, className: `py-${padding} d-grid gap-2`, style: { marginTop: `${margin}px`, maxHeight: `2.5rem` }, children: /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
id: utils.buttonId(id, "remove"),
className: "rjsf-object-property-remove w-100",
disabled: disabled || readonly,
onClick: onRemoveProperty,
uiSchema,
registry
}
) })
] }, keyId);
}
// src/Templates/Templates.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton,
ClearButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldHelpTemplate,
FieldTemplate,
GridTemplate,
MultiSchemaFieldTemplate,
ObjectFieldTemplate,
OptionalDataControlsTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
function CheckboxWidget(props) {
const {
id,
htmlName,
value,
disabled,
readonly,
label,
hideLabel,
schema,
autofocus,
options,
onChange,
onBlur,
onFocus,
registry,
uiSchema
} = props;
const required = utils.schemaRequiresTrueValue(schema);
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
options
);
const _onChange = ({ target: { checked } }) => onChange(checked);
const _onBlur = ({ target }) => onBlur(id, target && target.checked);
const _onFocus = ({ target }) => onFocus(id, target && target.checked);
const description = options.description || schema.description;
return /* @__PURE__ */ jsxRuntime.jsxs(Form3.Group, { className: disabled || readonly ? "disabled" : "", "aria-describedby": utils.ariaDescribedByIds(id), children: [
!hideLabel && description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Form3.Check,
{
id,
name: htmlName || id,
label: utils.labelValue(label, hideLabel || !label),
checked: typeof value === "undefined" ? false : value,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: _onChange,
type: "checkbox",
onBlur: _onBlur,
onFocus: _onFocus
}
)
] });
}
function CheckboxesWidget({
id,
htmlName,
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 }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
return /* @__PURE__ */ jsxRuntime.jsx(Form3.Group, { 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;
return /* @__PURE__ */ jsxRuntime.jsx(
Form3.Check,
{
inline,
required,
checked,
className: "bg-transparent border-0",
type: "checkbox",
id: utils.optionId(id, index),
name: htmlName || id,
label: option.label,
autoFocus: autofocus && index === 0,
onChange: _onChange(index),
onBlur: _onBlur,
onFocus: _onFocus,
disabled: disabled || itemDisabled || readonly,
"aria-describedby": utils.ariaDescribedByIds(id)
},
option.value
);
}) });
}
function RadioWidget({
id,
htmlName,
options,
value,
required,
disabled,
readonly,
onChange,
onBlur,
onFocus
}) {
const { enumOptions, enumDisabled, emptyValue } = options;
const _onChange = ({ target: { value: value2 } }) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
const inline = Boolean(options && options.inline);
return /* @__PURE__ */ jsxRuntime.jsx(Form3.Group, { className: "mb-0", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const checked = utils.enumOptionsIsSelected(option.value, value);
const radio = /* @__PURE__ */ jsxRuntime.jsx(
Form3.Check,
{
inline,
label: option.label,
id: utils.optionId(id, index),
name: htmlName || id,
type: "radio",
disabled: disabled || itemDisabled || readonly,
checked,
required,
value: String(index),
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
},
index
);
return radio;
}) });
}
function RangeWidget(props) {
const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
const _onChange = ({ target: { value: value2 } }) => onChange(value2);
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
const rangeProps = {
value,
id,
name: id,
disabled,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
...utils.rangeSpec(schema)
};
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(FormRange, { ...rangeProps }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "range-view", children: value })
] });
}
function SelectWidget({
schema,
id,
htmlName,
options,
required,
disabled,
readonly,
value,
multiple,
autofocus,
onChange,
onBlur,
onFocus,
placeholder,
rawErrors = []
}) {
const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
const emptyValue = multiple ? [] : "";
function getValue(event, multiple2) {
if (multiple2) {
return [].slice.call(event.target.options).filter((o) => o.selected).map((o) => o.value);
} else {
return event.target.value;
}
}
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
const showPlaceholderOption = !multiple && schema.default === void 0;
return /* @__PURE__ */ jsxRuntime.jsxs(
FormSelect,
{
id,
name: htmlName || id,
value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
required,
multiple,
disabled: disabled || readonly,
autoFocus: autofocus,
className: rawErrors.length > 0 ? "is-invalid" : "",
onBlur: onBlur && ((event) => {
const newValue = getValue(event, multiple);
onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue));
}),
onFocus: onFocus && ((event) => {
const newValue = getValue(event, multiple);
onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue));
}),
onChange: (event) => {
const newValue = getValue(event, multiple);
onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyValue));
},
"aria-describedby": utils.ariaDescribedByIds(id),
children: [
showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
enumOptions.map(({ value: value2, label }, i) => {
const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) != -1;
return /* @__PURE__ */ jsxRuntime.jsx("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
})
]
}
);
}
function TextareaWidget({
id,
htmlName,
placeholder,
value,
required,
disabled,
autofocus,
readonly,
onBlur,
onFocus,
onChange,
options
}) {
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);
return /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(
FormControl,
{
id,
name: htmlName || id,
as: "textarea",
placeholder,
disabled,
readOnly: readonly,
value,
required,
autoFocus: autofocus,
rows: options.rows || 5,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
}
) });
}
// 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/Form/Form.tsx
function generateForm() {
return core.withTheme(generateTheme());
}
var Form_default = generateForm();
// src/index.ts
var index_default = Form_default;
exports.Form = Form_default;
exports.Templates = Templates_default;
exports.Theme = Theme_default;
exports.Widgets = Widgets_default;
exports.default = index_default;
exports.generateForm = generateForm;
exports.generateTemplates = generateTemplates;
exports.generateTheme = generateTheme;
exports.generateWidgets = generateWidgets;
Object.defineProperty(exports, '__esModule', { value: true });
}));