@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
1,324 lines (1,296 loc) • 47 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: () => Form3,
Templates: () => templates_default,
Theme: () => Theme,
Widgets: () => widgets_default,
default: () => src_default,
generateForm: () => generateForm,
generateTemplates: () => generateTemplates,
generateTheme: () => generateTheme,
generateWidgets: () => generateWidgets
});
module.exports = __toCommonJS(src_exports);
var import_core = require("@rjsf/core");
// src/templates/ArrayFieldItemTemplate/index.tsx
var import_antd = require("antd");
var import_jsx_runtime = require("react/jsx-runtime");
var BTN_GRP_STYLE = {
width: "100%"
};
var BTN_STYLE = {
width: "calc(100% / 4)"
};
function ArrayFieldItemTemplate(props) {
const {
children,
disabled,
hasCopy,
hasMoveDown,
hasMoveUp,
hasRemove,
hasToolbar,
index,
onCopyIndexClick,
onDropIndexClick,
onReorderClick,
readonly,
registry,
uiSchema
} = props;
const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
const { rowGutter = 24, toolbarAlign = "top" } = registry.formContext;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Row, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Col, { flex: "1", children }),
hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Col, { flex: "192px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_antd.Button.Group, { style: BTN_GRP_STYLE, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
MoveUpButton2,
{
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
style: BTN_STYLE,
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
MoveDownButton2,
{
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
style: BTN_STYLE,
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CopyButton2,
{
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
style: BTN_STYLE,
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
RemoveButton2,
{
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
style: BTN_STYLE,
uiSchema,
registry
}
)
] }) })
] }, `array-item-${index}`);
}
// src/templates/ArrayFieldTemplate/index.tsx
var import_utils = require("@rjsf/utils");
var import_classnames = __toESM(require("classnames"));
var import_antd2 = require("antd");
var import_react = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var DESCRIPTION_COL_STYLE = {
paddingBottom: "8px"
};
function ArrayFieldTemplate(props) {
const {
canAdd,
className,
disabled,
formContext,
idSchema,
items,
onAddClick,
readonly,
registry,
required,
schema,
title,
uiSchema
} = props;
const uiOptions = (0, import_utils.getUiOptions)(uiSchema);
const ArrayFieldDescriptionTemplate = (0, import_utils.getTemplate)(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = (0, import_utils.getTemplate)(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = (0, import_utils.getTemplate)(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const { labelAlign = "right", rowGutter = 24 } = formContext;
const { getPrefixCls } = (0, import_react.useContext)(import_antd2.ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = (0, import_classnames.default)(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("fieldset", { className, id: idSchema.$id, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd2.Row, { gutter: rowGutter, children: [
(uiOptions.title || title) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { className: labelColClassName, span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ArrayFieldTitleTemplate,
{
idSchema,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry
}
) }),
(uiOptions.description || schema.description) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { span: 24, style: DESCRIPTION_COL_STYLE, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
ArrayFieldDescriptionTemplate,
{
description: uiOptions.description || schema.description,
idSchema,
schema,
uiSchema,
registry
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { className: "row array-item-list", span: 24, children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
canAdd && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Row, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { flex: "192px", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
AddButton2,
{
className: "array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry
}
) }) }) })
] }) });
}
// src/templates/BaseInputTemplate/index.tsx
var import_antd3 = require("antd");
var import_utils2 = require("@rjsf/utils");
var import_jsx_runtime3 = require("react/jsx-runtime");
var INPUT_STYLE = {
width: "100%"
};
function BaseInputTemplate(props) {
const {
disabled,
formContext,
id,
onBlur,
onChange,
onChangeOverride,
onFocus,
options,
placeholder,
readonly,
schema,
value,
type
} = props;
const inputProps = (0, import_utils2.getInputProps)(schema, type, options, false);
const { readonlyAsDisabled = true } = formContext;
const handleNumberChange = (nextValue) => onChange(nextValue);
const handleTextChange = onChangeOverride ? onChangeOverride : ({ target }) => onChange(target.value === "" ? options.emptyValue : target.value);
const handleBlur = ({ target }) => onBlur(id, target && target.value);
const handleFocus = ({ target }) => onFocus(id, target && target.value);
const input = inputProps.type === "number" || inputProps.type === "integer" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_antd3.InputNumber,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleNumberChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
style: INPUT_STYLE,
list: schema.examples ? (0, import_utils2.examplesId)(id) : void 0,
...inputProps,
value,
"aria-describedby": (0, import_utils2.ariaDescribedByIds)(id, !!schema.examples)
}
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_antd3.Input,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleTextChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
style: INPUT_STYLE,
list: schema.examples ? (0, import_utils2.examplesId)(id) : void 0,
...inputProps,
value,
"aria-describedby": (0, import_utils2.ariaDescribedByIds)(id, !!schema.examples)
}
);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
input,
Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("datalist", { id: (0, import_utils2.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: example }, example);
}) })
] });
}
// src/templates/DescriptionField/index.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function DescriptionField(props) {
const { id, description } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id, children: description });
}
// src/templates/ErrorList/index.tsx
var import_antd4 = require("antd");
var import_ExclamationCircleOutlined = __toESM(require("@ant-design/icons/ExclamationCircleOutlined"));
var import_utils3 = require("@rjsf/utils");
var import_jsx_runtime5 = require("react/jsx-runtime");
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
const renderErrors = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_antd4.List, { className: "list-group", size: "small", children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_antd4.List.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd4.Space, { children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ExclamationCircleOutlined.default, {}),
error.stack
] }) }, index)) });
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_antd4.Alert,
{
className: "panel panel-danger errors",
description: renderErrors(),
message: translateString(import_utils3.TranslatableString.ErrorsLabel),
type: "error"
}
);
}
// src/templates/IconButton/index.tsx
var import_antd5 = require("antd");
var import_ArrowDownOutlined = __toESM(require("@ant-design/icons/ArrowDownOutlined"));
var import_ArrowUpOutlined = __toESM(require("@ant-design/icons/ArrowUpOutlined"));
var import_CopyOutlined = __toESM(require("@ant-design/icons/CopyOutlined"));
var import_DeleteOutlined = __toESM(require("@ant-design/icons/DeleteOutlined"));
var import_PlusCircleOutlined = __toESM(require("@ant-design/icons/PlusCircleOutlined"));
var import_utils4 = require("@rjsf/utils");
var import_jsx_runtime6 = require("react/jsx-runtime");
function IconButton(props) {
const { iconType = "default", icon, onClick, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_antd5.Button,
{
onClick,
type: iconType,
icon,
...otherProps
}
);
}
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
IconButton,
{
title: translateString(import_utils4.TranslatableString.AddItemButton),
...props,
block: true,
iconType: "primary",
icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_PlusCircleOutlined.default, {})
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { title: translateString(import_utils4.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CopyOutlined.default, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { title: translateString(import_utils4.TranslatableString.MoveDownButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ArrowDownOutlined.default, {}) });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { title: translateString(import_utils4.TranslatableString.MoveUpButton), ...props, icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ArrowUpOutlined.default, {}) });
}
function RemoveButton(props) {
const options = (0, import_utils4.getUiOptions)(props.uiSchema);
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
IconButton,
{
title: translateString(import_utils4.TranslatableString.RemoveButton),
...props,
danger: true,
block: !!options.block,
iconType: "primary",
icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_DeleteOutlined.default, {})
}
);
}
// src/templates/FieldErrorTemplate/index.tsx
var import_utils5 = require("@rjsf/utils");
var import_jsx_runtime7 = require("react/jsx-runtime");
function FieldErrorTemplate(props) {
const { errors = [], idSchema } = props;
if (errors.length === 0) {
return null;
}
const id = (0, import_utils5.errorId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id, children: errors.map((error) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: error }, `field-${id}-error-${error}`)) });
}
// src/templates/FieldTemplate/index.tsx
var import_antd6 = require("antd");
var import_utils6 = require("@rjsf/utils");
var import_jsx_runtime8 = require("react/jsx-runtime");
var VERTICAL_LABEL_COL = { span: 24 };
var VERTICAL_WRAPPER_COL = { span: 24 };
function FieldTemplate(props) {
const {
children,
classNames: classNames4,
style,
description,
disabled,
displayLabel,
errors,
formContext,
help,
hidden,
id,
label,
onDropPropertyClick,
onKeyChange,
rawErrors,
rawDescription,
rawHelp,
readonly,
registry,
required,
schema,
uiSchema
} = props;
const {
colon,
labelCol = VERTICAL_LABEL_COL,
wrapperCol = VERTICAL_WRAPPER_COL,
wrapperStyle,
descriptionLocation = "below"
} = formContext;
const uiOptions = (0, import_utils6.getUiOptions)(uiSchema);
const WrapIfAdditionalTemplate2 = (0, import_utils6.getTemplate)(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "field-hidden", children });
}
const descriptionNode = rawDescription ? description : void 0;
const descriptionProps = {};
switch (descriptionLocation) {
case "tooltip":
descriptionProps.tooltip = descriptionNode;
break;
case "below":
default:
descriptionProps.extra = descriptionNode;
break;
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
WrapIfAdditionalTemplate2,
{
classNames: classNames4,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry,
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_antd6.Form.Item,
{
colon,
hasFeedback: schema.type !== "array" && schema.type !== "object",
help: !!rawHelp && help || (rawErrors?.length ? errors : void 0),
htmlFor: id,
label: displayLabel && label,
labelCol,
required,
style: wrapperStyle,
validateStatus: rawErrors?.length ? "error" : void 0,
wrapperCol,
...descriptionProps,
children
}
)
}
);
}
// src/templates/ObjectFieldTemplate/index.tsx
var import_classnames2 = __toESM(require("classnames"));
var import_isObject = __toESM(require("lodash/isObject"));
var import_isNumber = __toESM(require("lodash/isNumber"));
var import_isString = __toESM(require("lodash/isString"));
var import_utils7 = require("@rjsf/utils");
var import_antd7 = require("antd");
var import_react2 = require("react");
var import_jsx_runtime9 = require("react/jsx-runtime");
var DESCRIPTION_COL_STYLE2 = {
paddingBottom: "8px"
};
function ObjectFieldTemplate(props) {
const {
description,
disabled,
formContext,
formData,
idSchema,
onAddClick,
properties,
readonly,
required,
registry,
schema,
title,
uiSchema
} = props;
const uiOptions = (0, import_utils7.getUiOptions)(uiSchema);
const TitleFieldTemplate = (0, import_utils7.getTemplate)("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = (0, import_utils7.getTemplate)(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const { colSpan = 24, labelAlign = "right", rowGutter = 24 } = formContext;
const findSchema = (element) => element.content.props.schema;
const findSchemaType = (element) => findSchema(element).type;
const findUiSchema = (element) => element.content.props.uiSchema;
const findUiSchemaField = (element) => (0, import_utils7.getUiOptions)(findUiSchema(element)).field;
const findUiSchemaWidget = (element) => (0, import_utils7.getUiOptions)(findUiSchema(element)).widget;
const calculateColSpan = (element) => {
const type = findSchemaType(element);
const field = findUiSchemaField(element);
const widget = findUiSchemaWidget(element);
const defaultColSpan = properties.length < 2 || // Single or no field in object.
type === "object" || type === "array" || widget === "textarea" ? 24 : 12;
if ((0, import_isObject.default)(colSpan)) {
const colSpanObj = colSpan;
if ((0, import_isString.default)(widget)) {
return colSpanObj[widget];
}
if ((0, import_isString.default)(field)) {
return colSpanObj[field];
}
if ((0, import_isString.default)(type)) {
return colSpanObj[type];
}
}
if ((0, import_isNumber.default)(colSpan)) {
return colSpan;
}
return defaultColSpan;
};
const { getPrefixCls } = (0, import_react2.useContext)(import_antd7.ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = (0, import_classnames2.default)(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("fieldset", { id: idSchema.$id, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_antd7.Row, { gutter: rowGutter, children: [
title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd7.Col, { className: labelColClassName, span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
TitleFieldTemplate,
{
id: (0, import_utils7.titleId)(idSchema),
title,
required,
schema,
uiSchema,
registry
}
) }),
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd7.Col, { span: 24, style: DESCRIPTION_COL_STYLE2, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_utils7.descriptionId)(idSchema),
description,
schema,
uiSchema,
registry
}
) }),
properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd7.Col, { span: calculateColSpan(element), children: element.content }, element.name))
] }),
(0, import_utils7.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd7.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd7.Row, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd7.Col, { flex: "192px", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
AddButton2,
{
className: "object-property-expand",
disabled: disabled || readonly,
onClick: onAddClick(schema),
uiSchema,
registry
}
) }) }) })
] });
}
// src/templates/SubmitButton/index.tsx
var import_antd8 = require("antd");
var import_utils8 = require("@rjsf/utils");
var import_jsx_runtime10 = require("react/jsx-runtime");
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps } = (0, import_utils8.getSubmitButtonOptions)(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd8.Button, { type: "submit", ...submitButtonProps, htmlType: "submit", children: submitText });
}
// src/templates/TitleField/index.tsx
var import_classnames3 = __toESM(require("classnames"));
var import_antd9 = require("antd");
var import_react3 = require("react");
var import_jsx_runtime11 = require("react/jsx-runtime");
function TitleField({
id,
required,
registry,
title
}) {
const { formContext } = registry;
const { colon = true } = formContext;
let labelChildren = title;
if (colon && typeof title === "string" && title.trim() !== "") {
labelChildren = title.replace(/[：:]\s*$/, "");
}
const handleLabelClick = () => {
if (!id) {
return;
}
const control = document.querySelector(`[id="${id}"]`);
if (control && control.focus) {
control.focus();
}
};
const { getPrefixCls } = (0, import_react3.useContext)(import_antd9.ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClassName = (0, import_classnames3.default)({
[`${prefixCls}-item-required`]: required,
[`${prefixCls}-item-no-colon`]: !colon
});
return title ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"label",
{
className: labelClassName,
htmlFor: id,
onClick: handleLabelClick,
title: typeof title === "string" ? title : "",
children: labelChildren
}
) : null;
}
// src/templates/WrapIfAdditionalTemplate/index.tsx
var import_antd10 = require("antd");
var import_utils9 = require("@rjsf/utils");
var import_jsx_runtime12 = require("react/jsx-runtime");
var VERTICAL_LABEL_COL2 = { span: 24 };
var VERTICAL_WRAPPER_COL2 = { span: 24 };
var INPUT_STYLE2 = {
width: "100%"
};
function WrapIfAdditionalTemplate(props) {
const {
children,
classNames: classNames4,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
registry,
schema,
uiSchema
} = props;
const {
colon,
labelCol = VERTICAL_LABEL_COL2,
readonlyAsDisabled = true,
rowGutter = 24,
toolbarAlign = "top",
wrapperCol = VERTICAL_WRAPPER_COL2,
wrapperStyle
} = registry.formContext;
const { templates, translateString } = registry;
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(import_utils9.TranslatableString.KeyLabel, [label]);
const additional = import_utils9.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classNames4, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target && target.value);
const uiOptions = uiSchema ? uiSchema[import_utils9.UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[import_utils9.UI_OPTIONS_KEY]: { ...uiOptions, block: true }
};
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classNames4, style, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_antd10.Row, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_antd10.Col, { className: "form-additional", flex: "1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_antd10.Form.Item,
{
colon,
className: "form-group",
hasFeedback: true,
htmlFor: `${id}-key`,
label: keyLabel,
labelCol,
required,
style: wrapperStyle,
wrapperCol,
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_antd10.Input,
{
className: "form-control",
defaultValue: label,
disabled: disabled || readonlyAsDisabled && readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? handleBlur : void 0,
style: INPUT_STYLE2,
type: "text"
}
)
}
) }) }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_antd10.Col, { className: "form-additional", flex: "1", children }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_antd10.Col, { flex: "192px", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
RemoveButton2,
{
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema: buttonUiOptions,
registry
}
) })
] }) });
}
// src/templates/index.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var templates_default = generateTemplates();
// src/widgets/AltDateWidget/index.tsx
var import_react4 = require("react");
var import_antd11 = require("antd");
var import_utils10 = require("@rjsf/utils");
var import_jsx_runtime13 = require("react/jsx-runtime");
var readyForChange = (state) => {
return Object.values(state).every((value) => value !== -1);
};
function AltDateWidget(props) {
const {
autofocus,
disabled,
formContext,
id,
onBlur,
onChange,
onFocus,
options,
readonly,
registry,
showTime,
value
} = props;
const { translateString, widgets } = registry;
const { SelectWidget: SelectWidget2 } = widgets;
const { rowGutter = 24 } = formContext;
const [state, setState] = (0, import_react4.useState)((0, import_utils10.parseDateString)(value, showTime));
(0, import_react4.useEffect)(() => {
setState((0, import_utils10.parseDateString)(value, showTime));
}, [showTime, value]);
const handleChange = (property, nextValue) => {
const nextState = {
...state,
[property]: typeof nextValue === "undefined" ? -1 : nextValue
};
if (readyForChange(nextState)) {
onChange((0, import_utils10.toDateString)(nextState, showTime));
} else {
setState(nextState);
}
};
const handleNow = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
const nextState = (0, import_utils10.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), showTime);
onChange((0, import_utils10.toDateString)(nextState, showTime));
};
const handleClear = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
onChange(void 0);
};
const renderDateElement = (elemProps) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
SelectWidget2,
{
autofocus: elemProps.autofocus,
className: "form-control",
disabled: elemProps.disabled,
id: elemProps.id,
name: elemProps.name,
onBlur: elemProps.onBlur,
onChange: (elemValue) => elemProps.select(elemProps.type, elemValue),
onFocus: elemProps.onFocus,
options: {
enumOptions: (0, import_utils10.dateRangeOptions)(elemProps.range[0], elemProps.range[1])
},
placeholder: elemProps.type,
readonly: elemProps.readonly,
schema: { type: "integer" },
value: elemProps.value,
registry,
label: "",
"aria-describedby": (0, import_utils10.ariaDescribedByIds)(id)
}
);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_antd11.Row, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
(0, import_utils10.getDateElementProps)(
state,
showTime,
options.yearsRange,
options.format
).map((elemProps, i) => {
const elemId = id + "_" + elemProps.type;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_antd11.Col, { flex: "88px", children: renderDateElement({
...elemProps,
autofocus: autofocus && i === 0,
disabled,
id: elemId,
name: id,
onBlur,
onFocus,
readonly,
registry,
select: handleChange,
// NOTE: antd components accept -1 rather than issue a warning
// like material-ui, so we need to convert -1 to undefined here.
value: elemProps.value || -1 < 0 ? void 0 : elemProps.value
}) }, elemId);
}),
!options.hideNowButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_antd11.Col, { flex: "88px", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_antd11.Button, { block: true, className: "btn-now", onClick: handleNow, type: "primary", children: translateString(import_utils10.TranslatableString.NowLabel) }) }),
!options.hideClearButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_antd11.Col, { flex: "88px", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_antd11.Button, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(import_utils10.TranslatableString.ClearLabel) }) })
] });
}
AltDateWidget.defaultProps = {
autofocus: false,
disabled: false,
options: {
yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
},
readonly: false,
showTime: false
};
// src/widgets/AltDateTimeWidget/index.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
function AltDateTimeWidget(props) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AltDateWidget2, { showTime: true, ...props });
}
AltDateTimeWidget.defaultProps = {
...AltDateWidget.defaultProps,
showTime: true
};
// src/widgets/CheckboxesWidget/index.tsx
var import_antd12 = require("antd");
var import_utils11 = require("@rjsf/utils");
var import_jsx_runtime15 = require("react/jsx-runtime");
function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, value }) {
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, inline, emptyValue } = options;
const handleChange = (nextValue) => onChange((0, import_utils11.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
const handleBlur = ({ target }) => onBlur(id, (0, import_utils11.enumOptionsValueForIndex)(target.value, enumOptions, emptyValue));
const handleFocus = ({ target }) => onFocus(id, (0, import_utils11.enumOptionsValueForIndex)(target.value, enumOptions, emptyValue));
const extraProps = {
id,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0
};
const selectedIndexes = (0, import_utils11.enumOptionsIndexForValue)(value, enumOptions, true);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_antd12.Checkbox.Group,
{
disabled: disabled || readonlyAsDisabled && readonly,
name: id,
onChange: !readonly ? handleChange : void 0,
value: selectedIndexes,
...extraProps,
"aria-describedby": (0, import_utils11.ariaDescribedByIds)(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_antd12.Checkbox,
{
id: (0, import_utils11.optionId)(id, i),
name: id,
autoFocus: i === 0 ? autofocus : false,
disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
value: String(i),
children: option.label
}
),
!inline && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("br", {})
] }, i))
}
) }) : null;
}
// src/widgets/CheckboxWidget/index.tsx
var import_antd13 = require("antd");
var import_utils12 = require("@rjsf/utils");
var import_jsx_runtime16 = require("react/jsx-runtime");
function CheckboxWidget(props) {
const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
const { readonlyAsDisabled = true } = formContext;
const handleChange = ({ target }) => onChange(target.checked);
const handleBlur = ({ target }) => onBlur(id, target && target.checked);
const handleFocus = ({ target }) => onFocus(id, target && target.checked);
const extraProps = {
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0
};
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_antd13.Checkbox,
{
autoFocus: autofocus,
checked: typeof value === "undefined" ? false : value,
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onChange: !readonly ? handleChange : void 0,
...extraProps,
"aria-describedby": (0, import_utils12.ariaDescribedByIds)(id),
children: (0, import_utils12.labelValue)(label, hideLabel, "")
}
);
}
// src/widgets/DateTimeWidget/index.tsx
var import_dayjs = __toESM(require("dayjs"));
var import_utils13 = require("@rjsf/utils");
var import_antd14 = require("antd");
var import_jsx_runtime17 = require("react/jsx-runtime");
var DATE_PICKER_STYLE = {
width: "100%"
};
function DateTimeWidget(props) {
const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
const { readonlyAsDisabled = true } = formContext;
const handleChange = (nextValue) => onChange(nextValue && nextValue.toISOString());
const handleBlur = () => onBlur(id, value);
const handleFocus = () => onFocus(id, value);
const getPopupContainer = (node) => node.parentNode;
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_antd14.DatePicker,
{
disabled: disabled || readonlyAsDisabled && readonly,
getPopupContainer,
id,
name: id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
showTime: true,
style: DATE_PICKER_STYLE,
value: value && (0, import_dayjs.default)(value),
"aria-describedby": (0, import_utils13.ariaDescribedByIds)(id)
}
);
}
// src/widgets/DateWidget/index.tsx
var import_dayjs2 = __toESM(require("dayjs"));
var import_utils14 = require("@rjsf/utils");
var import_antd15 = require("antd");
var import_jsx_runtime18 = require("react/jsx-runtime");
var DATE_PICKER_STYLE2 = {
width: "100%"
};
function DateWidget(props) {
const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
const { readonlyAsDisabled = true } = formContext;
const handleChange = (nextValue) => onChange(nextValue && nextValue.format("YYYY-MM-DD"));
const handleBlur = () => onBlur(id, value);
const handleFocus = () => onFocus(id, value);
const getPopupContainer = (node) => node.parentNode;
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_antd15.DatePicker,
{
disabled: disabled || readonlyAsDisabled && readonly,
getPopupContainer,
id,
name: id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
showTime: false,
style: DATE_PICKER_STYLE2,
value: value && (0, import_dayjs2.default)(value),
"aria-describedby": (0, import_utils14.ariaDescribedByIds)(id)
}
);
}
// src/widgets/PasswordWidget/index.tsx
var import_antd16 = require("antd");
var import_utils15 = require("@rjsf/utils");
var import_jsx_runtime19 = require("react/jsx-runtime");
function PasswordWidget(props) {
const { disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
const { readonlyAsDisabled = true } = formContext;
const emptyValue = options.emptyValue || "";
const handleChange = ({ target }) => onChange(target.value === "" ? emptyValue : target.value);
const handleBlur = ({ target }) => onBlur(id, target.value);
const handleFocus = ({ target }) => onFocus(id, target.value);
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_antd16.Input.Password,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
value: value || "",
"aria-describedby": (0, import_utils15.ariaDescribedByIds)(id)
}
);
}
// src/widgets/RadioWidget/index.tsx
var import_antd17 = require("antd");
var import_utils16 = require("@rjsf/utils");
var import_jsx_runtime20 = require("react/jsx-runtime");
function RadioWidget({
autofocus,
disabled,
formContext,
id,
onBlur,
onChange,
onFocus,
options,
readonly,
value
}) {
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, emptyValue } = options;
const handleChange = ({ target: { value: nextValue } }) => onChange((0, import_utils16.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
const handleBlur = ({ target }) => onBlur(id, (0, import_utils16.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
const handleFocus = ({ target }) => onFocus(id, (0, import_utils16.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
const selectedIndexes = (0, import_utils16.enumOptionsIndexForValue)(value, enumOptions);
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_antd17.Radio.Group,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onChange: !readonly ? handleChange : void 0,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0,
value: selectedIndexes,
"aria-describedby": (0, import_utils16.ariaDescribedByIds)(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_antd17.Radio,
{
id: (0, import_utils16.optionId)(id, i),
name: id,
autoFocus: i === 0 ? autofocus : false,
disabled: disabled || Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
value: String(i),
children: option.label
},
i
))
}
);
}
// src/widgets/RangeWidget/index.tsx
var import_antd18 = require("antd");
var import_utils17 = require("@rjsf/utils");
var import_jsx_runtime21 = require("react/jsx-runtime");
function RangeWidget(props) {
const {
autofocus,
disabled,
formContext,
id,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
schema,
value
} = props;
const { readonlyAsDisabled = true } = formContext;
const { min, max, step } = (0, import_utils17.rangeSpec)(schema);
const emptyValue = options.emptyValue || "";
const handleChange = (nextValue) => onChange(nextValue === "" ? emptyValue : nextValue);
const handleBlur = () => onBlur(id, value);
const handleFocus = () => onFocus(id, value);
const extraProps = {
placeholder,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0
};
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_antd18.Slider,
{
autoFocus: autofocus,
disabled: disabled || readonlyAsDisabled && readonly,
id,
max,
min,
onChange: !readonly ? handleChange : void 0,
range: false,
step,
value,
...extraProps,
"aria-describedby": (0, import_utils17.ariaDescribedByIds)(id)
}
);
}
// src/widgets/SelectWidget/index.tsx
var import_antd19 = require("antd");
var import_utils18 = require("@rjsf/utils");
var import_isString2 = __toESM(require("lodash/isString"));
var import_react5 = require("react");
var import_jsx_runtime22 = require("react/jsx-runtime");
var SELECT_STYLE = {
width: "100%"
};
function SelectWidget({
autofocus,
disabled,
formContext = {},
id,
multiple,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
value,
schema
}) {
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, emptyValue } = options;
const handleChange = (nextValue) => onChange((0, import_utils18.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
const handleBlur = () => onBlur(id, (0, import_utils18.enumOptionsValueForIndex)(value, enumOptions, emptyValue));
const handleFocus = () => onFocus(id, (0, import_utils18.enumOptionsValueForIndex)(value, enumOptions, emptyValue));
const filterOption = (input, option) => {
if (option && (0, import_isString2.default)(option.label)) {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
return false;
};
const getPopupContainer = (node) => node.parentNode;
const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, multiple);
const extraProps = {
name: id
};
const showPlaceholderOption = !multiple && schema.default === void 0;
const selectOptions = (0, import_react5.useMemo)(() => {
if (Array.isArray(enumOptions)) {
const options2 = enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({
disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
key: String(index),
value: String(index),
label: optionLabel
}));
if (showPlaceholderOption) {
options2.unshift({ value: "", label: placeholder || "" });
}
return options2;
}
return void 0;
}, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_antd19.Select,
{
autoFocus: autofocus,
disabled: disabled || readonlyAsDisabled && readonly,
getPopupContainer,
id,
mode: multiple ? "multiple" : void 0,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
style: SELECT_STYLE,
value: selectedIndexes,
...extraProps,
filterOption,
"aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
options: selectOptions
}
);
}
// src/widgets/TextareaWidget/index.tsx
var import_antd20 = require("antd");
var import_utils19 = require("@rjsf/utils");
var import_jsx_runtime23 = require("react/jsx-runtime");
var INPUT_STYLE3 = {
width: "100%"
};
function TextareaWidget({
disabled,
formContext,
id,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
value
}) {
const { readonlyAsDisabled = true } = formContext;
const handleChange = ({ target }) => onChange(target.value === "" ? options.emptyValue : target.value);
const handleBlur = ({ target }) => onBlur(id, target && target.value);
const handleFocus = ({ target }) => onFocus(id, target && target.value);
const extraProps = {
type: "textarea"
};
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
import_antd20.Input.TextArea,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
rows: options.rows || 4,
style: INPUT_STYLE3,
value,
...extraProps,
"aria-describedby": (0, import_utils19.ariaDescribedByIds)(id)
}
);
}
// src/widgets/index.ts
function generateWidgets() {
return {
AltDateTimeWidget,
AltDateWidget,
CheckboxesWidget,
CheckboxWidget,
DateTimeWidget,
DateWidget,
PasswordWidget,
RadioWidget,
RangeWidget,
SelectWidget,
TextareaWidget
};
}
var widgets_default = generateWidgets();
// src/index.ts
function generateTheme() {
return {
templates: generateTemplates(),
widgets: generateWidgets()
};
}
var Theme = generateTheme();
function generateForm() {
return (0, import_core.withTheme)(generateTheme());
}
var Form3 = generateForm();
var src_default = Form3;
//# sourceMappingURL=index.js.map