@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
1,172 lines (1,164 loc) • 41.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('antd'), require('react/jsx-runtime'), require('@rjsf/utils'), require('classnames'), require('react'), require('@ant-design/icons/ExclamationCircleOutlined'), require('@ant-design/icons/ArrowDownOutlined'), require('@ant-design/icons/ArrowUpOutlined'), require('@ant-design/icons/CopyOutlined'), require('@ant-design/icons/DeleteOutlined'), require('@ant-design/icons/PlusCircleOutlined'), require('lodash/isObject'), require('lodash/isNumber'), require('lodash/isString'), require('dayjs')) :
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'antd', 'react/jsx-runtime', '@rjsf/utils', 'classnames', 'react', '@ant-design/icons/ExclamationCircleOutlined', '@ant-design/icons/ArrowDownOutlined', '@ant-design/icons/ArrowUpOutlined', '@ant-design/icons/CopyOutlined', '@ant-design/icons/DeleteOutlined', '@ant-design/icons/PlusCircleOutlined', 'lodash/isObject', 'lodash/isNumber', 'lodash/isString', 'dayjs'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/antd"] = {}, global.core, global.antd, global.jsxRuntime, global.utils, global.classNames, global.react, global.ExclamationCircleOutlined, global.ArrowDownOutlined, global.ArrowUpOutlined, global.CopyOutlined, global.DeleteOutlined, global.PlusCircleOutlined, global.isObject, global.isNumber, global.isString, global.dayjs));
})(this, (function (exports, core, antd, jsxRuntime, utils, classNames, react, ExclamationCircleOutlined, ArrowDownOutlined, ArrowUpOutlined, CopyOutlined, DeleteOutlined, PlusCircleOutlined, isObject, isNumber, isString, dayjs) { 'use strict';
// src/index.ts
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__ */ jsxRuntime.jsxs(antd.Row, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "1", children }),
hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "192px", children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Button.Group, { style: BTN_GRP_STYLE, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveUpButton2,
{
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
style: BTN_STYLE,
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveDownButton2,
{
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
style: BTN_STYLE,
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
CopyButton2,
{
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
style: BTN_STYLE,
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
style: BTN_STYLE,
uiSchema,
registry
}
)
] }) })
] }, `array-item-${index}`);
}
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 = utils.getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = utils.getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = utils.getTemplate(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = utils.getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
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: idSchema.$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,
{
idSchema,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry
}
) }),
(uiOptions.description || schema.description) && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, style: DESCRIPTION_COL_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldDescriptionTemplate,
{
description: uiOptions.description || schema.description,
idSchema,
schema,
uiSchema,
registry
}
) }),
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: "row array-item-list", span: 24, children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
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: "192px", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
className: "array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry
}
) }) }) })
] }) });
}
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 = utils.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__ */ jsxRuntime.jsx(
antd.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 ? utils.examplesId(id) : void 0,
...inputProps,
value,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
antd.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 ? utils.examplesId(id) : void 0,
...inputProps,
value,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
input,
Array.isArray(schema.examples) && /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: utils.examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ jsxRuntime.jsx("option", { value: example }, example);
}) })
] });
}
function DescriptionField(props) {
const { id, description } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx("span", { id, children: description });
}
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
const renderErrors = () => /* @__PURE__ */ jsxRuntime.jsx(antd.List, { className: "list-group", size: "small", children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(antd.List.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Space, { children: [
/* @__PURE__ */ jsxRuntime.jsx(ExclamationCircleOutlined, {}),
error.stack
] }) }, index)) });
return /* @__PURE__ */ jsxRuntime.jsx(
antd.Alert,
{
className: "panel panel-danger errors",
description: renderErrors(),
message: translateString(utils.TranslatableString.ErrorsLabel),
type: "error"
}
);
}
function IconButton(props) {
const { iconType = "default", icon, onClick, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsxRuntime.jsx(
antd.Button,
{
onClick,
type: iconType,
icon,
...otherProps
}
);
}
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.AddItemButton),
...props,
block: true,
iconType: "primary",
icon: /* @__PURE__ */ jsxRuntime.jsx(PlusCircleOutlined, {})
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(CopyOutlined, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowDownOutlined, {}) });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpOutlined, {}) });
}
function RemoveButton(props) {
const options = utils.getUiOptions(props.uiSchema);
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(
IconButton,
{
title: translateString(utils.TranslatableString.RemoveButton),
...props,
danger: true,
block: !!options.block,
iconType: "primary",
icon: /* @__PURE__ */ jsxRuntime.jsx(DeleteOutlined, {})
}
);
}
function FieldErrorTemplate(props) {
const { errors = [], idSchema } = props;
if (errors.length === 0) {
return null;
}
const id = utils.errorId(idSchema);
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,
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 = utils.getUiOptions(uiSchema);
const WrapIfAdditionalTemplate2 = utils.getTemplate(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
WrapIfAdditionalTemplate2,
{
classNames: classNames4,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry,
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 && label,
labelCol,
required,
style: wrapperStyle,
validateStatus: rawErrors?.length ? "error" : void 0,
wrapperCol,
...descriptionProps,
children
}
)
}
);
}
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 = utils.getUiOptions(uiSchema);
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = utils.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) => 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: idSchema.$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(idSchema),
title,
required,
schema,
uiSchema,
registry
}
) }),
description && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, style: DESCRIPTION_COL_STYLE2, children: /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
) }),
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: "192px", children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
className: "object-property-expand",
disabled: disabled || readonly,
onClick: onAddClick(schema),
uiSchema,
registry
}
) }) }) })
] });
}
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
}) {
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
});
return title ? /* @__PURE__ */ jsxRuntime.jsx(
"label",
{
className: labelClassName,
htmlFor: id,
onClick: handleLabelClick,
title: typeof title === "string" ? title : "",
children: labelChildren
}
) : null;
}
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(utils.TranslatableString.KeyLabel, [label]);
const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames4, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target && target.value);
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: keyLabel,
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 ? handleBlur : void 0,
style: INPUT_STYLE2,
type: "text"
}
)
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: "form-additional", flex: "1", children }),
/* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "192px", children: /* @__PURE__ */ jsxRuntime.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();
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] = react.useState(utils.parseDateString(value, showTime));
react.useEffect(() => {
setState(utils.parseDateString(value, showTime));
}, [showTime, value]);
const handleChange = (property, nextValue) => {
const nextState = {
...state,
[property]: typeof nextValue === "undefined" ? -1 : nextValue
};
if (readyForChange(nextState)) {
onChange(utils.toDateString(nextState, showTime));
} else {
setState(nextState);
}
};
const handleNow = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
onChange(utils.toDateString(nextState, showTime));
};
const handleClear = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
onChange(void 0);
};
const renderDateElement = (elemProps) => /* @__PURE__ */ jsxRuntime.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: utils.dateRangeOptions(elemProps.range[0], elemProps.range[1])
},
placeholder: elemProps.type,
readonly: elemProps.readonly,
schema: { type: "integer" },
value: elemProps.value,
registry,
label: "",
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
utils.getDateElementProps(
state,
showTime,
options.yearsRange,
options.format
).map((elemProps, i) => {
const elemId = id + "_" + elemProps.type;
return /* @__PURE__ */ jsxRuntime.jsx(antd.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__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { block: true, className: "btn-now", onClick: handleNow, 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) }) })
] });
}
AltDateWidget.defaultProps = {
autofocus: false,
disabled: false,
options: {
yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
},
readonly: false,
showTime: false
};
function AltDateTimeWidget(props) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { showTime: true, ...props });
}
AltDateTimeWidget.defaultProps = {
...AltDateWidget.defaultProps,
showTime: true
};
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(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
const handleBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
const handleFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
const extraProps = {
id,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0
};
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
antd.Checkbox.Group,
{
disabled: disabled || readonlyAsDisabled && readonly,
name: id,
onChange: !readonly ? handleChange : void 0,
value: selectedIndexes,
...extraProps,
"aria-describedby": utils.ariaDescribedByIds(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
/* @__PURE__ */ jsxRuntime.jsx(
antd.Checkbox,
{
id: utils.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__ */ jsxRuntime.jsx("br", {})
] }, i))
}
) }) : null;
}
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__ */ jsxRuntime.jsx(
antd.Checkbox,
{
autoFocus: autofocus,
checked: typeof value === "undefined" ? false : value,
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onChange: !readonly ? handleChange : void 0,
...extraProps,
"aria-describedby": utils.ariaDescribedByIds(id),
children: utils.labelValue(label, hideLabel, "")
}
);
}
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__ */ 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: true,
style: DATE_PICKER_STYLE,
value: value && dayjs(value),
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
}
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__ */ 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: false,
style: DATE_PICKER_STYLE2,
value: value && dayjs(value),
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
}
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__ */ 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,
formContext,
id,
onBlur,
onChange,
onFocus,
options,
readonly,
value
}) {
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, emptyValue } = options;
const handleChange = ({ target: { value: nextValue } }) => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
const handleBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
const handleFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions);
return /* @__PURE__ */ jsxRuntime.jsx(
antd.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": utils.ariaDescribedByIds(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
antd.Radio,
{
id: utils.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
))
}
);
}
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 } = 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,
formContext = {},
id,
multiple,
onBlur,
onChange,
onFocus,
options,
placeholder,
readonly,
value,
schema
}) {
const { readonlyAsDisabled = true } = formContext;
const { enumOptions, enumDisabled, emptyValue } = options;
const handleChange = (nextValue) => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
const handleBlur = () => onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
const handleFocus = () => onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
const filterOption = (input, option) => {
if (option && isString(option.label)) {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
return false;
};
const getPopupContainer = (node) => node.parentNode;
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
const extraProps = {
name: id
};
const showPlaceholderOption = !multiple && schema.default === void 0;
const selectOptions = react.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__ */ jsxRuntime.jsx(
antd.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": utils.ariaDescribedByIds(id),
options: selectOptions
}
);
}
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__ */ jsxRuntime.jsx(
antd.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": 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 src_default = Form3;
exports.Form = Form3;
exports.Templates = templates_default;
exports.Theme = Theme;
exports.Widgets = widgets_default;
exports.default = src_default;
exports.generateForm = generateForm;
exports.generateTemplates = generateTemplates;
exports.generateTheme = generateTheme;
exports.generateWidgets = generateWidgets;
Object.defineProperty(exports, '__esModule', { value: true });
}));