@astarte-platform/react-bootstrap
Version:
React Bootstrap theme, fields and widgets for react-jsonschema-form, powered by react-bootstrap, this is a package from a fork of official project
940 lines (912 loc) • 34.8 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Form: () => Form_default,
Templates: () => Templates_default,
Theme: () => Theme_default,
Widgets: () => Widgets_default,
default: () => src_default,
generateForm: () => generateForm,
generateTemplates: () => generateTemplates,
generateTheme: () => generateTheme,
generateWidgets: () => generateWidgets
});
module.exports = __toCommonJS(src_exports);
// src/Form/Form.tsx
var import_core = require("@rjsf/core");
// src/AddButton/AddButton.tsx
var import_utils = require("@rjsf/utils");
var import_Button = __toESM(require("react-bootstrap/Button"));
var import_BsPlus = require("@react-icons/all-files/bs/BsPlus");
var import_jsx_runtime = require("react/jsx-runtime");
function AddButton({
uiSchema,
registry,
...props
}) {
const { translateString } = registry;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_Button.default,
{
...props,
style: { width: "100%" },
className: `ml-1 ${props.className}`,
title: translateString(import_utils.TranslatableString.AddItemButton),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BsPlus.BsPlus, {})
}
);
}
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
var import_Row = __toESM(require("react-bootstrap/Row"));
var import_Col = __toESM(require("react-bootstrap/Col"));
var import_jsx_runtime2 = require("react/jsx-runtime");
function ArrayFieldItemTemplate(props) {
const {
children,
disabled,
hasToolbar,
hasCopy,
hasMoveDown,
hasMoveUp,
hasRemove,
index,
onCopyIndexClick,
onDropIndexClick,
onReorderClick,
readonly,
registry,
uiSchema
} = props;
const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: "bold"
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Row.default, { className: "mb-2 d-flex align-items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Col.default, { xs: "9", lg: "9", children }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Col.default, { xs: "3", lg: "3", className: "py-4", children: hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-row", children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
MoveUpButton2,
{
className: "array-item-move-up",
style: btnStyle,
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
) }),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
MoveDownButton2,
{
style: btnStyle,
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
) }),
hasCopy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
CopyButton2,
{
style: btnStyle,
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
) }),
hasRemove && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
RemoveButton2,
{
style: btnStyle,
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
) })
] }) })
] }) });
}
// src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
var import_Row2 = __toESM(require("react-bootstrap/Row"));
var import_Col2 = __toESM(require("react-bootstrap/Col"));
var import_Container = __toESM(require("react-bootstrap/Container"));
var import_utils2 = require("@rjsf/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
function ArrayFieldTemplate(props) {
const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
const uiOptions = (0, import_utils2.getUiOptions)(uiSchema);
const ArrayFieldDescriptionTemplate = (0, import_utils2.getTemplate)(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = (0, import_utils2.getTemplate)(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = (0, import_utils2.getTemplate)(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Row2.default, { className: "p-0 m-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Col2.default, { className: "p-0 m-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ArrayFieldTitleTemplate,
{
idSchema,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
ArrayFieldDescriptionTemplate,
{
idSchema,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Container.default, { fluid: true, className: "p-0 m-0", children: [
items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)),
canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Container.default, { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_Row2.default, { className: "mt-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Col2.default, { xs: 9 }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Col2.default, { xs: 3, className: "py-4 col-lg-3 col-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
AddButton2,
{
className: "array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
) })
] }) })
] }, `array-item-list-${idSchema.$id}`)
] }) }) });
}
// src/BaseInputTemplate/BaseInputTemplate.tsx
var import_Form = __toESM(require("react-bootstrap/Form"));
var import_utils3 = require("@rjsf/utils");
var import_jsx_runtime4 = require("react/jsx-runtime");
function BaseInputTemplate({
id,
placeholder,
required,
readonly,
disabled,
type,
value,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
rawErrors = [],
children,
extraProps
}) {
const inputProps = {
...extraProps,
...(0, import_utils3.getInputProps)(schema, type, options)
};
const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_Form.default.Control,
{
id,
name: id,
placeholder,
autoFocus: autofocus,
required,
disabled,
readOnly: readonly,
className: rawErrors.length > 0 ? "is-invalid" : "",
list: schema.examples ? (0, import_utils3.examplesId)(id) : void 0,
...inputProps,
value: value || value === 0 ? value : "",
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": (0, import_utils3.ariaDescribedByIds)(id, !!schema.examples)
}
),
children,
Array.isArray(schema.examples) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("datalist", { id: (0, import_utils3.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: example }, example);
}) }) : null
] });
}
// src/DescriptionField/DescriptionField.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
function DescriptionField({ id, description }) {
if (description) {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { id, className: "mb-3", children: description }) });
}
return null;
}
// src/ErrorList/ErrorList.tsx
var import_Card = __toESM(require("react-bootstrap/Card"));
var import_ListGroup = __toESM(require("react-bootstrap/ListGroup"));
var import_utils4 = require("@rjsf/utils");
var import_jsx_runtime6 = require("react/jsx-runtime");
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_Card.default, { border: "danger", className: "mb-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Card.default.Header, { className: "alert-danger", children: translateString(import_utils4.TranslatableString.ErrorsLabel) }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Card.default.Body, { className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListGroup.default, { children: errors.map((error, i) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListGroup.default.Item, { className: "border-0", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: error.stack }) }, i);
}) }) })
] });
}
// src/IconButton/IconButton.tsx
var import_utils5 = require("@rjsf/utils");
var import_Button2 = __toESM(require("react-bootstrap/Button"));
var import_IoIosCopy = require("@react-icons/all-files/io/IoIosCopy");
var import_IoIosRemove = require("@react-icons/all-files/io/IoIosRemove");
var import_AiOutlineArrowUp = require("@react-icons/all-files/ai/AiOutlineArrowUp");
var import_AiOutlineArrowDown = require("@react-icons/all-files/ai/AiOutlineArrowDown");
var import_jsx_runtime7 = require("react/jsx-runtime");
function IconButton(props) {
const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Button2.default, { ...otherProps, variant: props.variant || "light", size: "sm", children: icon });
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton, { title: translateString(import_utils5.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IoIosCopy.IoIosCopy, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton, { title: translateString(import_utils5.TranslatableString.MoveDownButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AiOutlineArrowDown.AiOutlineArrowDown, {}) });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton, { title: translateString(import_utils5.TranslatableString.MoveUpButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AiOutlineArrowUp.AiOutlineArrowUp, {}) });
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
IconButton,
{
title: translateString(import_utils5.TranslatableString.RemoveButton),
...props,
variant: "danger",
icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_IoIosRemove.IoIosRemove, {})
}
);
}
// src/FieldErrorTemplate/FieldErrorTemplate.tsx
var import_utils6 = require("@rjsf/utils");
var import_ListGroup2 = __toESM(require("react-bootstrap/ListGroup"));
var import_jsx_runtime8 = require("react/jsx-runtime");
function FieldErrorTemplate(props) {
const { errors = [], idSchema } = props;
if (errors.length === 0) {
return null;
}
const id = (0, import_utils6.errorId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ListGroup2.default, { as: "ul", id, children: errors.map((error, i) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ListGroup2.default.Item, { as: "li", className: "border-0 m-0 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { className: "m-0 text-danger", children: error }) }, i);
}) });
}
// src/FieldHelpTemplate/FieldHelpTemplate.tsx
var import_utils7 = require("@rjsf/utils");
var import_Form2 = __toESM(require("react-bootstrap/Form"));
var import_jsx_runtime9 = require("react/jsx-runtime");
function FieldHelpTemplate(props) {
const { idSchema, help, hasErrors } = props;
if (!help) {
return null;
}
const id = (0, import_utils7.helpId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Form2.default.Text, { className: hasErrors ? "text-danger" : "text-muted", id, children: help });
}
// src/FieldTemplate/FieldTemplate.tsx
var import_utils8 = require("@rjsf/utils");
var import_Form3 = __toESM(require("react-bootstrap/Form"));
var import_jsx_runtime10 = require("react/jsx-runtime");
function FieldTemplate({
id,
children,
displayLabel,
rawErrors = [],
errors,
help,
description,
rawDescription,
classNames,
style,
disabled,
label,
hidden,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry
}) {
const uiOptions = (0, import_utils8.getUiOptions)(uiSchema);
const WrapIfAdditionalTemplate2 = (0, import_utils8.getTemplate)(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hidden", children });
}
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
WrapIfAdditionalTemplate2,
{
classNames,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry,
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_Form3.default.Group, { children: [
displayLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_Form3.default.Label, { htmlFor: id, className: rawErrors.length > 0 ? "text-danger" : "", children: [
label,
required ? "*" : null
] }),
children,
displayLabel && rawDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Form3.default.Text, { className: rawErrors.length > 0 ? "text-danger" : "text-muted", children: description }),
errors,
help
] })
}
);
}
// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
var import_Row3 = __toESM(require("react-bootstrap/Row"));
var import_Col3 = __toESM(require("react-bootstrap/Col"));
var import_Container2 = __toESM(require("react-bootstrap/Container"));
var import_utils9 = require("@rjsf/utils");
var import_jsx_runtime11 = require("react/jsx-runtime");
function ObjectFieldTemplate({
description,
title,
properties,
required,
uiSchema,
idSchema,
schema,
formData,
onAddClick,
disabled,
readonly,
registry
}) {
const uiOptions = (0, import_utils9.getUiOptions)(uiSchema);
const TitleFieldTemplate = (0, import_utils9.getTemplate)("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = (0, import_utils9.getTemplate)(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
TitleFieldTemplate,
{
id: (0, import_utils9.titleId)(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_utils9.descriptionId)(idSchema),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Container2.default, { fluid: true, className: "p-0", children: [
properties.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Row3.default, { style: { marginBottom: "10px" }, className: element.hidden ? "d-none" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Col3.default, { xs: 12, children: [
" ",
element.content
] }) }, index)),
(0, import_utils9.canExpand)(schema, uiSchema, formData) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Row3.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Col3.default, { xs: { offset: 9, span: 3 }, className: "py-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
AddButton2,
{
onClick: onAddClick(schema),
disabled: disabled || readonly,
className: "object-property-expand",
uiSchema,
registry
}
) }) }) : null
] })
] });
}
// src/SubmitButton/SubmitButton.tsx
var import_Button3 = __toESM(require("react-bootstrap/Button"));
var import_utils10 = require("@rjsf/utils");
var import_jsx_runtime12 = require("react/jsx-runtime");
function SubmitButton(props) {
const { submitText, norender, props: submitButtonProps } = (0, import_utils10.getSubmitButtonOptions)(props.uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Button3.default, { variant: "primary", type: "submit", ...submitButtonProps, children: submitText }) });
}
// src/TitleField/TitleField.tsx
var import_utils11 = require("@rjsf/utils");
var import_jsx_runtime13 = require("react/jsx-runtime");
function TitleField({
id,
title,
uiSchema
}) {
const uiOptions = (0, import_utils11.getUiOptions)(uiSchema);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { id, className: "my-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h5", { children: uiOptions.title || title }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", { className: "border-0 bg-secondary", style: { height: "1px" } })
] });
}
// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
var import_utils12 = require("@rjsf/utils");
var import_Row4 = __toESM(require("react-bootstrap/Row"));
var import_Col4 = __toESM(require("react-bootstrap/Col"));
var import_Form4 = __toESM(require("react-bootstrap/Form"));
var import_jsx_runtime14 = require("react/jsx-runtime");
function WrapIfAdditionalTemplate({
classNames,
style,
children,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry
}) {
const { templates, translateString } = registry;
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(import_utils12.TranslatableString.KeyLabel, [label]);
const additional = import_utils12.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target.value);
const keyId = `${id}-key`;
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Row4.default, { className: classNames, style, children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Col4.default, { xs: 5, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Form4.default.Group, { children: [
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Form4.default.Label, { htmlFor: keyId, children: keyLabel }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
import_Form4.default.Control,
{
required,
defaultValue: label,
disabled: disabled || readonly,
id: keyId,
name: keyId,
onBlur: !readonly ? handleBlur : void 0,
type: "text"
}
)
] }) }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Col4.default, { xs: 5, children }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Col4.default, { xs: 2, className: "py-4 d-grid gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
RemoveButton2,
{
className: "w-100",
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema,
registry
}
) })
] }, keyId);
}
// 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();
// src/CheckboxWidget/CheckboxWidget.tsx
var import_utils13 = require("@rjsf/utils");
var import_Form5 = __toESM(require("react-bootstrap/Form"));
var import_jsx_runtime15 = require("react/jsx-runtime");
function CheckboxWidget(props) {
const {
id,
value,
disabled,
readonly,
label,
hideLabel,
schema,
autofocus,
options,
onChange,
onBlur,
onFocus,
registry,
uiSchema
} = props;
const required = (0, import_utils13.schemaRequiresTrueValue)(schema);
const DescriptionFieldTemplate = (0, import_utils13.getTemplate)(
"DescriptionFieldTemplate",
registry,
options
);
const _onChange = ({ target: { checked } }) => onChange(checked);
const _onBlur = ({ target: { checked } }) => onBlur(id, checked);
const _onFocus = ({ target: { checked } }) => onFocus(id, checked);
const description = options.description || schema.description;
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
import_Form5.default.Group,
{
className: `checkbox ${disabled || readonly ? "disabled" : ""}`,
"aria-describedby": (0, import_utils13.ariaDescribedByIds)(id),
children: [
!hideLabel && !!description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_utils13.descriptionId)(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_Form5.default.Check,
{
id,
name: id,
label: (0, import_utils13.labelValue)(label, hideLabel || !label),
checked: typeof value === "undefined" ? false : value,
required,
disabled: disabled || readonly,
autoFocus: autofocus,
onChange: _onChange,
type: "checkbox",
onBlur: _onBlur,
onFocus: _onFocus
}
)
]
}
);
}
// src/CheckboxesWidget/CheckboxesWidget.tsx
var import_Form6 = __toESM(require("react-bootstrap/Form"));
var import_utils14 = require("@rjsf/utils");
var import_jsx_runtime16 = require("react/jsx-runtime");
function CheckboxesWidget({ 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((0, import_utils14.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
} else {
onChange((0, import_utils14.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
}
};
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, (0, import_utils14.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, (0, import_utils14.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Form6.default.Group, { children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = (0, import_utils14.enumOptionsIsSelected)(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_Form6.default.Check,
{
inline,
required,
checked,
className: "bg-transparent border-0",
type: "checkbox",
id: (0, import_utils14.optionId)(id, index),
name: id,
label: option.label,
autoFocus: autofocus && index === 0,
onChange: _onChange(index),
onBlur: _onBlur,
onFocus: _onFocus,
disabled: disabled || itemDisabled || readonly,
"aria-describedby": (0, import_utils14.ariaDescribedByIds)(id)
},
option.value
);
}) });
}
// src/RadioWidget/RadioWidget.tsx
var import_Form7 = __toESM(require("react-bootstrap/Form"));
var import_utils15 = require("@rjsf/utils");
var import_jsx_runtime17 = require("react/jsx-runtime");
function RadioWidget({
id,
options,
value,
required,
disabled,
readonly,
onChange,
onBlur,
onFocus
}) {
const { enumOptions, enumDisabled, emptyValue } = options;
const _onChange = ({ target: { value: value2 } }) => onChange((0, import_utils15.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, (0, import_utils15.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, (0, import_utils15.enumOptionsValueForIndex)(value2, enumOptions, emptyValue));
const inline = Boolean(options && options.inline);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Form7.default.Group, { className: "mb-0", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const checked = (0, import_utils15.enumOptionsIsSelected)(option.value, value);
const radio = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_Form7.default.Check,
{
inline,
label: option.label,
id: (0, import_utils15.optionId)(id, index),
name: id,
type: "radio",
disabled: disabled || itemDisabled || readonly,
checked,
required,
value: String(index),
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": (0, import_utils15.ariaDescribedByIds)(id)
},
index
);
return radio;
}) });
}
// src/RangeWidget/RangeWidget.tsx
var import_utils16 = require("@rjsf/utils");
var import_FormRange = __toESM(require("react-bootstrap/FormRange"));
var import_jsx_runtime18 = require("react/jsx-runtime");
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,
...(0, import_utils16.rangeSpec)(schema)
};
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_FormRange.default, { ...rangeProps }),
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "range-view", children: value })
] });
}
// src/SelectWidget/SelectWidget.tsx
var import_FormSelect = __toESM(require("react-bootstrap/FormSelect"));
var import_utils17 = require("@rjsf/utils");
var import_jsx_runtime19 = require("react/jsx-runtime");
function SelectWidget({
schema,
id,
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 = (0, import_utils17.enumOptionsIndexForValue)(value, enumOptions, multiple);
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
import_FormSelect.default,
{
id,
name: 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, (0, import_utils17.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyValue));
}),
onFocus: onFocus && ((event) => {
const newValue = getValue(event, multiple);
onFocus(id, (0, import_utils17.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyValue));
}),
onChange: (event) => {
const newValue = getValue(event, multiple);
onChange((0, import_utils17.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyValue));
},
"aria-describedby": (0, import_utils17.ariaDescribedByIds)(id),
children: [
!multiple && schema.default === void 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { value: "", children: placeholder }),
enumOptions.map(({ value: value2, label }, i) => {
const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) != -1;
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("option", { id: label, value: String(i), disabled: disabled2, children: label }, i);
})
]
}
);
}
// src/TextareaWidget/TextareaWidget.tsx
var import_utils18 = require("@rjsf/utils");
var import_FormControl = __toESM(require("react-bootstrap/FormControl"));
var import_InputGroup = __toESM(require("react-bootstrap/InputGroup"));
var import_jsx_runtime20 = require("react/jsx-runtime");
function TextareaWidget({
id,
placeholder,
value,
required,
disabled,
autofocus,
readonly,
onBlur,
onFocus,
onChange,
options
}) {
const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = ({ target: { value: value2 } }) => onBlur(id, value2);
const _onFocus = ({ target: { value: value2 } }) => onFocus(id, value2);
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_InputGroup.default, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_FormControl.default,
{
id,
name: id,
as: "textarea",
placeholder,
disabled,
readOnly: readonly,
value,
required,
autoFocus: autofocus,
rows: options.rows || 5,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": (0, import_utils18.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 (0, import_core.withTheme)(generateTheme());
}
var Form_default = generateForm();
// src/index.ts
var src_default = Form_default;
//# sourceMappingURL=index.js.map