@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
1,125 lines (1,117 loc) • 41.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('@rjsf/utils'), require('antd'), require('react/jsx-runtime'), require('react'), require('classnames'), require('@ant-design/icons'), require('lodash/isNumber'), require('lodash/isObject'), require('lodash/isString'), require('dayjs')) :
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', '@rjsf/utils', 'antd', 'react/jsx-runtime', 'react', 'classnames', '@ant-design/icons', 'lodash/isNumber', 'lodash/isObject', 'lodash/isString', 'dayjs'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/antd"] = {}, global.core, global.utils, global.antd, global.jsxRuntime, global.react, global.classNames, global.icons, global.isNumber, global.isObject, global.isString, global.dayjs));
})(this, (function (exports, core, utils, antd, jsxRuntime, react, classNames, icons, isNumber, isObject, isString, dayjs) { 'use strict';
// src/index.ts
var BTN_GRP_STYLE = {
width: "100%",
justifyContent: "flex-end"
};
var BTN_STYLE = {
width: "calc(100% / 4)"
};
function ArrayFieldItemTemplate(props) {
const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, index, registry, uiSchema } = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldItemButtonsTemplate = utils.getTemplate(
"ArrayFieldItemButtonsTemplate",
registry,
uiOptions
);
const { rowGutter = 24, toolbarAlign = displayLabel ? "middle" : "top" } = registry.formContext;
const margin = hasDescription ? -8 : 16;
return /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "1", children }),
hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "120px", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Space.Compact, { style: BTN_GRP_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: BTN_STYLE }) }) })
] }, `rjsf-array-item-${index}`);
}
function ArrayFieldTemplate(props) {
const {
canAdd,
className,
disabled,
fieldPathId,
items,
optionalDataControl,
onAddClick,
readonly,
registry,
required,
schema,
title,
uiSchema
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldTitleTemplate = utils.getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
const { formContext } = registry;
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const { labelAlign = "right", rowGutter = 24 } = formContext;
const { getPrefixCls } = react.useContext(antd.ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className, id: fieldPathId.$id, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: rowGutter, children: [
(uiOptions.title || title) && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldTitleTemplate,
{
fieldPathId,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(antd.Col, { className: "row array-item-list", span: 24, children: [
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
items
] }),
canAdd && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "120px", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
id: utils.buttonId(fieldPathId, "add"),
className: "rjsf-array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry
}
) }) }) })
] }) });
}
var INPUT_STYLE = {
width: "100%"
};
function BaseInputTemplate(props) {
const {
disabled,
registry,
id,
htmlName,
onBlur,
onChange,
onChangeOverride,
onFocus,
options,
placeholder,
readonly,
required,
schema,
value,
type
} = props;
const { formContext } = registry;
const inputProps = utils.getInputProps(schema, type, options, false);
const { readonlyAsDisabled = true } = formContext;
const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
const handleNumberChange = (nextValue) => onChange(nextValue);
const handleTextChange = 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 handleClear = react.useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
onChange(options.emptyValue ?? "");
},
[onChange, options.emptyValue]
);
const { min, max, ...restInputProps } = inputProps;
const input = inputProps.type === "number" || inputProps.type === "integer" ? /* @__PURE__ */ jsxRuntime.jsx(
antd.InputNumber,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: htmlName || id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleNumberChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
required,
style: INPUT_STYLE,
changeOnWheel: false,
list: schema.examples ? utils.examplesId(id) : void 0,
...restInputProps,
min: typeof min === "number" ? min : void 0,
max: typeof max === "number" ? max : void 0,
type: void 0,
value,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
antd.Input,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: htmlName || id,
onBlur: !readonly ? handleBlur : void 0,
onChange: !readonly ? handleTextChange : void 0,
onFocus: !readonly ? handleFocus : void 0,
placeholder,
required,
style: INPUT_STYLE,
list: schema.examples ? utils.examplesId(id) : void 0,
...inputProps,
value,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
input,
options.allowClearTextInputs && !readonly && !disabled && value && /* @__PURE__ */ jsxRuntime.jsx(ClearButton2, { registry, onClick: handleClear }),
/* @__PURE__ */ jsxRuntime.jsx(core.SchemaExamples, { id, schema })
] });
}
var antdMajor = parseInt(antd.version.split(".")[0], 10);
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
const { token } = antd.theme.useToken();
const itemBorder = `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`;
const renderErrors = () => /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(
"li",
{
style: {
display: "flex",
alignItems: "center",
padding: `${token.paddingXS}px ${token.padding}px`,
color: token.colorText,
borderBlockEnd: index < errors.length - 1 ? itemBorder : "none"
},
children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { children: [
/* @__PURE__ */ jsxRuntime.jsx(icons.ExclamationCircleOutlined, {}),
error.stack
] })
},
index
)) });
const headerProp = antdMajor >= 6 ? { title: translateString(utils.TranslatableString.ErrorsLabel) } : { message: translateString(utils.TranslatableString.ErrorsLabel) };
return /* @__PURE__ */ jsxRuntime.jsx(antd.Alert, { className: "panel panel-danger errors", description: renderErrors(), type: "error", ...headerProp });
}
function DescriptionField(props) {
const { id, description, registry, uiSchema } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx("span", { id, children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
}
function FieldErrorTemplate(props) {
const { errors = [], fieldPathId } = props;
if (errors.length === 0) {
return null;
}
const id = utils.errorId(fieldPathId);
return /* @__PURE__ */ jsxRuntime.jsx("div", { id, children: errors.map((error) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error }, `field-${id}-error-${error}`)) });
}
var VERTICAL_LABEL_COL = { span: 24 };
var VERTICAL_WRAPPER_COL = { span: 24 };
function FieldTemplate(props) {
const {
children,
description,
displayLabel,
errors,
help,
rawHelp,
hidden,
id,
label,
rawErrors,
rawDescription,
registry,
required,
schema,
uiSchema
} = props;
const { formContext } = registry;
const {
colon,
labelCol = VERTICAL_LABEL_COL,
wrapperCol = VERTICAL_WRAPPER_COL,
wrapperStyle,
descriptionLocation = "below"
} = formContext;
const uiOptions = utils.getUiOptions(uiSchema);
const WrapIfAdditionalTemplate2 = utils.getTemplate(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rjsf-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;
}
const isCheckbox = uiOptions.widget === "checkbox";
return /* @__PURE__ */ jsxRuntime.jsx(WrapIfAdditionalTemplate2, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
antd.Form.Item,
{
colon,
hasFeedback: schema.type !== "array" && schema.type !== "object",
help: !!rawHelp && help || (rawErrors?.length ? errors : void 0),
htmlFor: id,
label: displayLabel && !isCheckbox && label,
labelCol,
required,
style: wrapperStyle,
validateStatus: rawErrors?.length ? "error" : void 0,
wrapperCol,
...descriptionProps,
children
}
) });
}
function GridTemplate(props) {
const { children, column, ...rest } = props;
if (column) {
return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { ...rest, children });
}
return /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { ...rest, children });
}
function IconButton(props) {
const { iconType = "default", icon, onClick, uiSchema, registry, color, ...otherProps } = props;
return /* @__PURE__ */ jsxRuntime.jsx(
antd.Button,
{
onClick,
type: iconType,
icon,
color,
style: {
paddingTop: "4px"
/* Center the button */
},
...otherProps
}
);
}
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.AddItemButton),
iconType: "primary",
block: true,
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircleOutlined, {})
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.CopyOutlined, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownOutlined, {}) });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpOutlined, {}) });
}
function RemoveButton(props) {
const options = utils.getUiOptions(props.uiSchema);
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.RemoveButton),
danger: true,
block: !!options.block,
iconType: "primary",
...props,
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.DeleteOutlined, {})
}
);
}
function ClearButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.ClearButton),
...props,
iconType: "link",
icon: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseOutlined, {})
}
);
}
function MultiSchemaFieldTemplate(props) {
const { optionSchemaField, selector } = props;
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { children: selector }),
optionSchemaField
] });
}
function ObjectFieldTemplate(props) {
const {
disabled,
formData,
fieldPathId,
onAddProperty,
optionalDataControl,
properties,
readonly,
required,
registry,
schema,
title,
uiSchema
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
const { formContext } = registry;
const showOptionalDataControlInTitle = !readonly && !disabled;
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) => utils.getUiOptions(findUiSchema(element)).field;
const findUiSchemaWidget = (element) => utils.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 (isObject(colSpan)) {
const colSpanObj = colSpan;
if (isString(widget)) {
return colSpanObj[widget];
}
if (isString(field)) {
return colSpanObj[field];
}
if (isString(type)) {
return colSpanObj[type];
}
}
if (isNumber(colSpan)) {
return colSpan;
}
return defaultColSpan;
};
const { getPrefixCls } = react.useContext(antd.ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: fieldPathId.$id, children: [
/* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: rowGutter, children: [
title && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(fieldPathId),
title,
required,
schema,
uiSchema,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
) }),
!showOptionalDataControlInTitle ? /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: optionalDataControl }) : void 0,
properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: calculateColSpan(element), children: element.content }, element.name))
] }),
utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "120px", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
id: utils.buttonId(fieldPathId, "add"),
className: "rjsf-object-property-expand",
disabled: disabled || readonly,
onClick: onAddProperty,
uiSchema,
registry
}
) }) }) })
] });
}
function OptionalDataControlsTemplate(props) {
const { id, registry, label, onAddClick, onRemoveClick } = props;
if (onAddClick) {
return /* @__PURE__ */ jsxRuntime.jsx(
AddButton,
{
id,
registry,
className: "rjsf-add-optional-data",
onClick: onAddClick,
title: label,
size: "small",
iconType: "default",
block: false
}
);
}
if (onRemoveClick) {
return /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton,
{
id,
registry,
className: "rjsf-remove-optional-data",
onClick: onRemoveClick,
title: label,
size: "small",
iconType: "default",
block: false
}
);
}
return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
}
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps } = utils.getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { type: "submit", ...submitButtonProps, htmlType: "submit", children: submitText });
}
function TitleField({
id,
required,
registry,
title,
optionalDataControl
}) {
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 } = react.useContext(antd.ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClassName = classNames({
[`${prefixCls}-item-required`]: required,
[`${prefixCls}-item-no-colon`]: !colon
});
let heading = title ? /* @__PURE__ */ jsxRuntime.jsx(
"label",
{
className: labelClassName,
htmlFor: id,
onClick: handleLabelClick,
onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleLabelClick(),
title: typeof title === "string" ? title : "",
children: labelChildren
}
) : null;
if (optionalDataControl) {
heading = /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { children: [
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "auto", children: heading }),
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "none", children: optionalDataControl })
] });
}
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
heading,
/* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { size: "small", style: {
marginBlock: "1px"
/* pull the margin right up against the label */
} })
] });
}
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,
displayLabel,
id,
label,
onRemoveProperty,
onKeyRenameBlur,
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(utils.TranslatableString.KeyLabel, [label]);
const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames4, style, children });
}
const uiOptions = uiSchema ? uiSchema[utils.UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[utils.UI_OPTIONS_KEY]: { ...uiOptions, block: true }
};
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames4, style, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: "form-additional", flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-group", children: /* @__PURE__ */ jsxRuntime.jsx(
antd.Form.Item,
{
colon,
className: "form-group",
hasFeedback: true,
htmlFor: `${id}-key`,
label: displayLabel ? keyLabel : void 0,
labelCol,
required,
style: wrapperStyle,
wrapperCol,
children: /* @__PURE__ */ jsxRuntime.jsx(
antd.Input,
{
className: "form-control",
defaultValue: label,
disabled: disabled || readonlyAsDisabled && readonly,
id: `${id}-key`,
name: `${id}-key`,
onBlur: !readonly ? onKeyRenameBlur : void 0,
style: INPUT_STYLE2,
type: "text"
},
label
)
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: "form-additional", flex: "1", children }),
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "120px", style: { marginTop: displayLabel ? "40px" : void 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
id: utils.buttonId(id, "remove"),
className: "rjsf-object-property-remove",
disabled: disabled || readonly,
onClick: onRemoveProperty,
uiSchema: buttonUiOptions,
registry
}
) })
] }) });
}
// src/templates/index.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton,
ClearButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldTemplate,
GridTemplate,
MultiSchemaFieldTemplate,
ObjectFieldTemplate,
OptionalDataControlsTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var templates_default = generateTemplates();
function AltDateTimeWidget({ time = true, ...props }) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { time, ...props });
}
function AltDateWidget({ autofocus = false, disabled = false, options, readonly = false, time = false, ...props }) {
const { id, name, onBlur, onFocus, registry } = props;
const { formContext, translateString } = registry;
const { rowGutter = 24 } = formContext;
const realOptions = { yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2], ...options };
const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps({
...props,
autofocus,
options: realOptions
});
return /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
elements.map((elemProps, i) => {
const elemId = `${id}_${elemProps.type}`;
return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(
utils.DateElement,
{
rootId: id,
name,
select: handleChange,
...elemProps,
disabled,
readonly,
registry,
onBlur,
onFocus,
autofocus: autofocus && i === 0
}
) }, elemId);
}),
!options.hideNowButton && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { block: true, className: "btn-now", onClick: handleSetNow, type: "primary", children: translateString(utils.TranslatableString.NowLabel) }) }),
!options.hideClearButton && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(utils.TranslatableString.ClearLabel) }) })
] });
}
function CheckboxesWidget({
autofocus,
disabled,
registry,
id,
htmlName,
onBlur,
onChange,
onFocus,
options,
readonly,
value
}) {
const { formContext } = registry;
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, inline, emptyValue } = options;
const optionValueFormat = utils.getOptionValueFormat(options);
const handleChange = (nextValue) => onChange(utils.enumOptionValueDecoder(nextValue, enumOptions, optionValueFormat, emptyValue));
const handleBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target.value, enumOptions, optionValueFormat, emptyValue));
const handleFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target.value, enumOptions, optionValueFormat, emptyValue));
const extraProps = {
id,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0
};
const selectValue = utils.enumOptionSelectedValue(value, enumOptions, true, optionValueFormat, []);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
antd.Checkbox.Group,
{
disabled: disabled || readonlyAsDisabled && readonly,
name: htmlName || id,
onChange: !readonly ? handleChange : void 0,
value: selectValue,
...extraProps,
"aria-describedby": utils.ariaDescribedByIds(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => (
// oxlint-disable-next-line react/no-array-index-key
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
/* @__PURE__ */ jsxRuntime.jsx(
antd.Checkbox,
{
id: utils.optionId(id, i),
name: htmlName || id,
autoFocus: i === 0 ? autofocus : false,
disabled: Array.isArray(enumDisabled) && enumDisabled.includes(option.value),
value: utils.enumOptionValueEncoder(option.value, i, optionValueFormat),
children: option.label
}
),
!inline && /* @__PURE__ */ jsxRuntime.jsx("br", {})
] }, i)
))
}
) : null;
}
function CheckboxWidget(props) {
const { autofocus, disabled, registry, id, htmlName, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
const { formContext } = registry;
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__ */ jsxRuntime.jsx(
antd.Checkbox,
{
autoFocus: autofocus,
checked: typeof value === "undefined" ? false : value,
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: htmlName || id,
onChange: !readonly ? handleChange : void 0,
...extraProps,
"aria-describedby": utils.ariaDescribedByIds(id),
children: utils.labelValue(label, hideLabel, "")
}
);
}
var DATE_PICKER_STYLE = {
width: "100%"
};
function DateWidget({
disabled,
registry,
id,
onBlur,
onChange,
onFocus,
placeholder,
readonly,
value,
showTime = false
}) {
const { formContext } = registry;
const { readonlyAsDisabled = true } = formContext;
const handleChange = (nextValue) => onChange(nextValue && (showTime ? nextValue.toISOString() : nextValue.format("YYYY-MM-DD")));
const handleBlur = () => onBlur(id, value);
const handleFocus = () => onFocus(id, value);
const getPopupContainer = DateWidget.getPopupContainerCallback();
return /* @__PURE__ */ jsxRuntime.jsx(
antd.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,
style: DATE_PICKER_STYLE,
value: value && dayjs(value),
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
}
DateWidget.getPopupContainerCallback = () => (node) => node.parentNode;
function DateTimeWidget(props) {
return /* @__PURE__ */ jsxRuntime.jsx(DateWidget, { showTime: true, ...props });
}
function PasswordWidget(props) {
const { disabled, registry, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
const { formContext } = registry;
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__ */ jsxRuntime.jsx(
antd.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": utils.ariaDescribedByIds(id)
}
);
}
function RadioWidget({
autofocus,
disabled,
registry,
id,
htmlName,
onBlur,
onChange,
onFocus,
options,
readonly,
value
}) {
const { formContext } = registry;
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, emptyValue } = options;
const optionValueFormat = utils.getOptionValueFormat(options);
const handleChange = ({ target: { value: nextValue } }) => onChange(utils.enumOptionValueDecoder(nextValue, enumOptions, optionValueFormat, emptyValue));
const handleBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
const handleFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
const selectValue = utils.enumOptionSelectedValue(value, enumOptions, false, optionValueFormat, emptyValue);
return /* @__PURE__ */ jsxRuntime.jsx(
antd.Radio.Group,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: htmlName || id,
onChange: !readonly ? handleChange : void 0,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0,
value: selectValue,
"aria-describedby": utils.ariaDescribedByIds(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
antd.Radio,
{
id: utils.optionId(id, i),
name: htmlName || id,
autoFocus: i === 0 ? autofocus : false,
disabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(option.value),
value: utils.enumOptionValueEncoder(option.value, i, optionValueFormat),
children: option.label
},
String(option.value)
))
}
);
}
function RangeWidget(props) {
const {
autofocus,
disabled,
registry,
id,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
schema,
value
} = props;
const { formContext } = registry;
const { readonlyAsDisabled = true } = formContext;
const { min, max, step } = utils.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__ */ jsxRuntime.jsx(
antd.Slider,
{
autoFocus: autofocus,
disabled: disabled || readonlyAsDisabled && readonly,
id,
max,
min,
onChange: !readonly ? handleChange : void 0,
range: false,
step,
value,
...extraProps,
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
}
var SELECT_STYLE = {
width: "100%"
};
function SelectWidget({
autofocus,
disabled,
registry,
id,
htmlName,
multiple,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
value,
schema
}) {
const [open, setOpen] = react.useState(false);
const { formContext } = registry;
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, emptyValue } = options;
const optionValueFormat = utils.getOptionValueFormat(options);
const handleChange = (nextValue) => onChange(utils.enumOptionValueDecoder(nextValue, enumOptions, optionValueFormat, emptyValue));
const handleBlur = () => onBlur(id, utils.enumOptionValueDecoder(value, enumOptions, optionValueFormat, emptyValue));
const handleFocus = () => onFocus(id, utils.enumOptionValueDecoder(value, enumOptions, optionValueFormat, emptyValue));
const filterOption = (input, option) => {
if (option && isString(option.label)) {
return option.label.toLowerCase().includes(input.toLowerCase());
}
return false;
};
const getPopupContainer = SelectWidget.getPopupContainerCallback();
const selectValue = utils.enumOptionSelectedValue(value, enumOptions, !!multiple, optionValueFormat, emptyValue);
const extraProps = {
name: htmlName || id
};
const showPlaceholderOption = !multiple && schema.default === void 0;
const selectOptions = react.useMemo(() => {
if (Array.isArray(enumOptions)) {
const enumOptionsList = enumOptions.map(
({ value: optionValue, label: optionLabel }, index) => ({
disabled: Array.isArray(enumDisabled) && enumDisabled.includes(optionValue),
key: String(index),
value: utils.enumOptionValueEncoder(optionValue, index, optionValueFormat),
label: optionLabel
})
);
if (showPlaceholderOption) {
enumOptionsList.unshift({ value: "", label: placeholder || "" });
}
return enumOptionsList;
}
return void 0;
}, [enumDisabled, enumOptions, placeholder, showPlaceholderOption, optionValueFormat]);
return /* @__PURE__ */ jsxRuntime.jsx(
antd.Select,
{
open,
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: selectValue,
...extraProps,
onOpenChange: setOpen,
showSearch: { filterOption },
"aria-describedby": utils.ariaDescribedByIds(id),
options: selectOptions
}
);
}
SelectWidget.getPopupContainerCallback = () => (node) => node.parentElement;
var INPUT_STYLE3 = {
width: "100%"
};
function TextareaWidget({
disabled,
registry,
id,
htmlName,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
value
}) {
const { formContext } = registry;
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__ */ jsxRuntime.jsx(
antd.Input.TextArea,
{
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: htmlName || 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": utils.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 core.withTheme(generateTheme());
}
var Form3 = generateForm();
var index_default = Form3;
exports.Form = Form3;
exports.Templates = templates_default;
exports.Theme = Theme;
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 });
}));