@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
1,351 lines (1,324 loc) • 41.8 kB
JavaScript
// src/index.ts
import { withTheme } from "@rjsf/core";
// src/templates/ArrayFieldItemTemplate/index.tsx
import { Button, Col, Row } from "antd";
import { jsx, jsxs } from "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__ */ jsxs(Row, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ jsx(Col, { flex: "1", children }),
hasToolbar && /* @__PURE__ */ jsx(Col, { flex: "192px", children: /* @__PURE__ */ jsxs(Button.Group, { style: BTN_GRP_STYLE, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx(
MoveUpButton2,
{
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
style: BTN_STYLE,
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx(
MoveDownButton2,
{
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
style: BTN_STYLE,
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ jsx(
CopyButton2,
{
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
style: BTN_STYLE,
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ jsx(
RemoveButton2,
{
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
style: BTN_STYLE,
uiSchema,
registry
}
)
] }) })
] }, `array-item-${index}`);
}
// src/templates/ArrayFieldTemplate/index.tsx
import {
getTemplate,
getUiOptions
} from "@rjsf/utils";
import classNames from "classnames";
import { Col as Col2, Row as Row2, ConfigProvider } from "antd";
import { useContext } from "react";
import { jsx as jsx2, jsxs as jsxs2 } from "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 = getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = getTemplate(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
const { labelAlign = "right", rowGutter = 24 } = formContext;
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return /* @__PURE__ */ jsx2("fieldset", { className, id: idSchema.$id, children: /* @__PURE__ */ jsxs2(Row2, { gutter: rowGutter, children: [
(uiOptions.title || title) && /* @__PURE__ */ jsx2(Col2, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsx2(
ArrayFieldTitleTemplate,
{
idSchema,
required,
title: uiOptions.title || title,
schema,
uiSchema,
registry
}
) }),
(uiOptions.description || schema.description) && /* @__PURE__ */ jsx2(Col2, { span: 24, style: DESCRIPTION_COL_STYLE, children: /* @__PURE__ */ jsx2(
ArrayFieldDescriptionTemplate,
{
description: uiOptions.description || schema.description,
idSchema,
schema,
uiSchema,
registry
}
) }),
/* @__PURE__ */ jsx2(Col2, { className: "row array-item-list", span: 24, children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx2(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
canAdd && /* @__PURE__ */ jsx2(Col2, { span: 24, children: /* @__PURE__ */ jsx2(Row2, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsx2(Col2, { flex: "192px", children: /* @__PURE__ */ jsx2(
AddButton2,
{
className: "array-item-add",
disabled: disabled || readonly,
onClick: onAddClick,
uiSchema,
registry
}
) }) }) })
] }) });
}
// src/templates/BaseInputTemplate/index.tsx
import { Input, InputNumber } from "antd";
import {
ariaDescribedByIds,
examplesId,
getInputProps
} from "@rjsf/utils";
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "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 = 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__ */ jsx3(
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 ? examplesId(id) : void 0,
...inputProps,
value,
"aria-describedby": ariaDescribedByIds(id, !!schema.examples)
}
) : /* @__PURE__ */ jsx3(
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 ? examplesId(id) : void 0,
...inputProps,
value,
"aria-describedby": ariaDescribedByIds(id, !!schema.examples)
}
);
return /* @__PURE__ */ jsxs3(Fragment, { children: [
input,
Array.isArray(schema.examples) && /* @__PURE__ */ jsx3("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ jsx3("option", { value: example }, example);
}) })
] });
}
// src/templates/DescriptionField/index.tsx
import { jsx as jsx4 } from "react/jsx-runtime";
function DescriptionField(props) {
const { id, description } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ jsx4("span", { id, children: description });
}
// src/templates/ErrorList/index.tsx
import { Alert, List, Space } from "antd";
import ExclamationCircleOutlined from "@ant-design/icons/ExclamationCircleOutlined";
import { TranslatableString } from "@rjsf/utils";
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
const renderErrors = () => /* @__PURE__ */ jsx5(List, { className: "list-group", size: "small", children: errors.map((error, index) => /* @__PURE__ */ jsx5(List.Item, { children: /* @__PURE__ */ jsxs4(Space, { children: [
/* @__PURE__ */ jsx5(ExclamationCircleOutlined, {}),
error.stack
] }) }, index)) });
return /* @__PURE__ */ jsx5(
Alert,
{
className: "panel panel-danger errors",
description: renderErrors(),
message: translateString(TranslatableString.ErrorsLabel),
type: "error"
}
);
}
// src/templates/IconButton/index.tsx
import { Button as Button2 } from "antd";
import ArrowDownOutlined from "@ant-design/icons/ArrowDownOutlined";
import ArrowUpOutlined from "@ant-design/icons/ArrowUpOutlined";
import CopyOutlined from "@ant-design/icons/CopyOutlined";
import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
import PlusCircleOutlined from "@ant-design/icons/PlusCircleOutlined";
import {
getUiOptions as getUiOptions2,
TranslatableString as TranslatableString2
} from "@rjsf/utils";
import { jsx as jsx6 } from "react/jsx-runtime";
function IconButton(props) {
const { iconType = "default", icon, onClick, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsx6(
Button2,
{
onClick,
type: iconType,
icon,
...otherProps
}
);
}
function AddButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx6(
IconButton,
{
title: translateString(TranslatableString2.AddItemButton),
...props,
block: true,
iconType: "primary",
icon: /* @__PURE__ */ jsx6(PlusCircleOutlined, {})
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx6(IconButton, { title: translateString(TranslatableString2.CopyButton), ...props, icon: /* @__PURE__ */ jsx6(CopyOutlined, {}) });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx6(IconButton, { title: translateString(TranslatableString2.MoveDownButton), ...props, icon: /* @__PURE__ */ jsx6(ArrowDownOutlined, {}) });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx6(IconButton, { title: translateString(TranslatableString2.MoveUpButton), ...props, icon: /* @__PURE__ */ jsx6(ArrowUpOutlined, {}) });
}
function RemoveButton(props) {
const options = getUiOptions2(props.uiSchema);
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx6(
IconButton,
{
title: translateString(TranslatableString2.RemoveButton),
...props,
danger: true,
block: !!options.block,
iconType: "primary",
icon: /* @__PURE__ */ jsx6(DeleteOutlined, {})
}
);
}
// src/templates/FieldErrorTemplate/index.tsx
import { errorId } from "@rjsf/utils";
import { jsx as jsx7 } from "react/jsx-runtime";
function FieldErrorTemplate(props) {
const { errors = [], idSchema } = props;
if (errors.length === 0) {
return null;
}
const id = errorId(idSchema);
return /* @__PURE__ */ jsx7("div", { id, children: errors.map((error) => /* @__PURE__ */ jsx7("div", { children: error }, `field-${id}-error-${error}`)) });
}
// src/templates/FieldTemplate/index.tsx
import { Form } from "antd";
import {
getTemplate as getTemplate2,
getUiOptions as getUiOptions3
} from "@rjsf/utils";
import { jsx as jsx8 } from "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 = getUiOptions3(uiSchema);
const WrapIfAdditionalTemplate2 = getTemplate2(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsx8("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__ */ jsx8(
WrapIfAdditionalTemplate2,
{
classNames: classNames4,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry,
children: /* @__PURE__ */ jsx8(
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
import classNames2 from "classnames";
import isObject from "lodash/isObject";
import isNumber from "lodash/isNumber";
import isString from "lodash/isString";
import {
canExpand,
descriptionId,
getTemplate as getTemplate3,
getUiOptions as getUiOptions4,
titleId
} from "@rjsf/utils";
import { Col as Col3, Row as Row3, ConfigProvider as ConfigProvider2 } from "antd";
import { useContext as useContext2 } from "react";
import { jsx as jsx9, jsxs as jsxs5 } from "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 = getUiOptions4(uiSchema);
const TitleFieldTemplate = getTemplate3("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = getTemplate3(
"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) => getUiOptions4(findUiSchema(element)).field;
const findUiSchemaWidget = (element) => getUiOptions4(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 } = useContext2(ConfigProvider2.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClsBasic = `${prefixCls}-item-label`;
const labelColClassName = classNames2(
labelClsBasic,
labelAlign === "left" && `${labelClsBasic}-left`
// labelCol.className,
);
return /* @__PURE__ */ jsxs5("fieldset", { id: idSchema.$id, children: [
/* @__PURE__ */ jsxs5(Row3, { gutter: rowGutter, children: [
title && /* @__PURE__ */ jsx9(Col3, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsx9(
TitleFieldTemplate,
{
id: titleId(idSchema),
title,
required,
schema,
uiSchema,
registry
}
) }),
description && /* @__PURE__ */ jsx9(Col3, { span: 24, style: DESCRIPTION_COL_STYLE2, children: /* @__PURE__ */ jsx9(
DescriptionFieldTemplate,
{
id: descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
) }),
properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsx9(Col3, { span: calculateColSpan(element), children: element.content }, element.name))
] }),
canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx9(Col3, { span: 24, children: /* @__PURE__ */ jsx9(Row3, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsx9(Col3, { flex: "192px", children: /* @__PURE__ */ jsx9(
AddButton2,
{
className: "object-property-expand",
disabled: disabled || readonly,
onClick: onAddClick(schema),
uiSchema,
registry
}
) }) }) })
] });
}
// src/templates/SubmitButton/index.tsx
import { Button as Button3 } from "antd";
import { getSubmitButtonOptions } from "@rjsf/utils";
import { jsx as jsx10 } from "react/jsx-runtime";
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps } = getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsx10(Button3, { type: "submit", ...submitButtonProps, htmlType: "submit", children: submitText });
}
// src/templates/TitleField/index.tsx
import classNames3 from "classnames";
import { ConfigProvider as ConfigProvider3 } from "antd";
import { useContext as useContext3 } from "react";
import { jsx as jsx11 } from "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 } = useContext3(ConfigProvider3.ConfigContext);
const prefixCls = getPrefixCls("form");
const labelClassName = classNames3({
[`${prefixCls}-item-required`]: required,
[`${prefixCls}-item-no-colon`]: !colon
});
return title ? /* @__PURE__ */ jsx11(
"label",
{
className: labelClassName,
htmlFor: id,
onClick: handleLabelClick,
title: typeof title === "string" ? title : "",
children: labelChildren
}
) : null;
}
// src/templates/WrapIfAdditionalTemplate/index.tsx
import { Col as Col4, Row as Row4, Form as Form2, Input as Input2 } from "antd";
import {
ADDITIONAL_PROPERTY_FLAG,
UI_OPTIONS_KEY,
TranslatableString as TranslatableString3
} from "@rjsf/utils";
import { jsx as jsx12, jsxs as jsxs6 } from "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(TranslatableString3.KeyLabel, [label]);
const additional = ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ jsx12("div", { className: classNames4, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target && target.value);
const uiOptions = uiSchema ? uiSchema[UI_OPTIONS_KEY] : {};
const buttonUiOptions = {
...uiSchema,
[UI_OPTIONS_KEY]: { ...uiOptions, block: true }
};
return /* @__PURE__ */ jsx12("div", { className: classNames4, style, children: /* @__PURE__ */ jsxs6(Row4, { align: toolbarAlign, gutter: rowGutter, children: [
/* @__PURE__ */ jsx12(Col4, { className: "form-additional", flex: "1", children: /* @__PURE__ */ jsx12("div", { className: "form-group", children: /* @__PURE__ */ jsx12(
Form2.Item,
{
colon,
className: "form-group",
hasFeedback: true,
htmlFor: `${id}-key`,
label: keyLabel,
labelCol,
required,
style: wrapperStyle,
wrapperCol,
children: /* @__PURE__ */ jsx12(
Input2,
{
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__ */ jsx12(Col4, { className: "form-additional", flex: "1", children }),
/* @__PURE__ */ jsx12(Col4, { flex: "192px", children: /* @__PURE__ */ jsx12(
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
import { useEffect, useState } from "react";
import { Row as Row5, Col as Col5, Button as Button4 } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds2,
dateRangeOptions,
getDateElementProps,
parseDateString,
toDateString,
TranslatableString as TranslatableString4
} from "@rjsf/utils";
import { jsx as jsx13, jsxs as jsxs7 } from "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] = useState(parseDateString(value, showTime));
useEffect(() => {
setState(parseDateString(value, showTime));
}, [showTime, value]);
const handleChange = (property, nextValue) => {
const nextState = {
...state,
[property]: typeof nextValue === "undefined" ? -1 : nextValue
};
if (readyForChange(nextState)) {
onChange(toDateString(nextState, showTime));
} else {
setState(nextState);
}
};
const handleNow = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
onChange(toDateString(nextState, showTime));
};
const handleClear = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
onChange(void 0);
};
const renderDateElement = (elemProps) => /* @__PURE__ */ jsx13(
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: dateRangeOptions(elemProps.range[0], elemProps.range[1])
},
placeholder: elemProps.type,
readonly: elemProps.readonly,
schema: { type: "integer" },
value: elemProps.value,
registry,
label: "",
"aria-describedby": ariaDescribedByIds2(id)
}
);
return /* @__PURE__ */ jsxs7(Row5, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
getDateElementProps(
state,
showTime,
options.yearsRange,
options.format
).map((elemProps, i) => {
const elemId = id + "_" + elemProps.type;
return /* @__PURE__ */ jsx13(Col5, { 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__ */ jsx13(Col5, { flex: "88px", children: /* @__PURE__ */ jsx13(Button4, { block: true, className: "btn-now", onClick: handleNow, type: "primary", children: translateString(TranslatableString4.NowLabel) }) }),
!options.hideClearButton && /* @__PURE__ */ jsx13(Col5, { flex: "88px", children: /* @__PURE__ */ jsx13(Button4, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(TranslatableString4.ClearLabel) }) })
] });
}
AltDateWidget.defaultProps = {
autofocus: false,
disabled: false,
options: {
yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
},
readonly: false,
showTime: false
};
// src/widgets/AltDateTimeWidget/index.tsx
import { jsx as jsx14 } from "react/jsx-runtime";
function AltDateTimeWidget(props) {
const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
return /* @__PURE__ */ jsx14(AltDateWidget2, { showTime: true, ...props });
}
AltDateTimeWidget.defaultProps = {
...AltDateWidget.defaultProps,
showTime: true
};
// src/widgets/CheckboxesWidget/index.tsx
import { Checkbox } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds3,
enumOptionsIndexForValue,
enumOptionsValueForIndex,
optionId
} from "@rjsf/utils";
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs8 } from "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(enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
const handleBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
const handleFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
const extraProps = {
id,
onBlur: !readonly ? handleBlur : void 0,
onFocus: !readonly ? handleFocus : void 0
};
const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
return Array.isArray(enumOptions) && enumOptions.length > 0 ? /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(
Checkbox.Group,
{
disabled: disabled || readonlyAsDisabled && readonly,
name: id,
onChange: !readonly ? handleChange : void 0,
value: selectedIndexes,
...extraProps,
"aria-describedby": ariaDescribedByIds3(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsxs8("span", { children: [
/* @__PURE__ */ jsx15(
Checkbox,
{
id: 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__ */ jsx15("br", {})
] }, i))
}
) }) : null;
}
// src/widgets/CheckboxWidget/index.tsx
import { Checkbox as Checkbox2 } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds4,
labelValue
} from "@rjsf/utils";
import { jsx as jsx16 } from "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__ */ jsx16(
Checkbox2,
{
autoFocus: autofocus,
checked: typeof value === "undefined" ? false : value,
disabled: disabled || readonlyAsDisabled && readonly,
id,
name: id,
onChange: !readonly ? handleChange : void 0,
...extraProps,
"aria-describedby": ariaDescribedByIds4(id),
children: labelValue(label, hideLabel, "")
}
);
}
// src/widgets/DateTimeWidget/index.tsx
import dayjs from "dayjs";
import {
ariaDescribedByIds as ariaDescribedByIds5
} from "@rjsf/utils";
import { DatePicker } from "antd";
import { jsx as jsx17 } from "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__ */ jsx17(
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": ariaDescribedByIds5(id)
}
);
}
// src/widgets/DateWidget/index.tsx
import dayjs2 from "dayjs";
import {
ariaDescribedByIds as ariaDescribedByIds6
} from "@rjsf/utils";
import { DatePicker as DatePicker2 } from "antd";
import { jsx as jsx18 } from "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__ */ jsx18(
DatePicker2,
{
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 && dayjs2(value),
"aria-describedby": ariaDescribedByIds6(id)
}
);
}
// src/widgets/PasswordWidget/index.tsx
import { Input as Input3 } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds7
} from "@rjsf/utils";
import { jsx as jsx19 } from "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__ */ jsx19(
Input3.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": ariaDescribedByIds7(id)
}
);
}
// src/widgets/RadioWidget/index.tsx
import { Radio } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds8,
enumOptionsIndexForValue as enumOptionsIndexForValue2,
enumOptionsValueForIndex as enumOptionsValueForIndex2,
optionId as optionId2
} from "@rjsf/utils";
import { jsx as jsx20 } from "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(enumOptionsValueForIndex2(nextValue, enumOptions, emptyValue));
const handleBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
const handleFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
const selectedIndexes = enumOptionsIndexForValue2(value, enumOptions);
return /* @__PURE__ */ jsx20(
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": ariaDescribedByIds8(id),
children: Array.isArray(enumOptions) && enumOptions.map((option, i) => /* @__PURE__ */ jsx20(
Radio,
{
id: optionId2(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
import { Slider } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds9,
rangeSpec
} from "@rjsf/utils";
import { jsx as jsx21 } from "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 } = 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__ */ jsx21(
Slider,
{
autoFocus: autofocus,
disabled: disabled || readonlyAsDisabled && readonly,
id,
max,
min,
onChange: !readonly ? handleChange : void 0,
range: false,
step,
value,
...extraProps,
"aria-describedby": ariaDescribedByIds9(id)
}
);
}
// src/widgets/SelectWidget/index.tsx
import { Select } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds10,
enumOptionsIndexForValue as enumOptionsIndexForValue3,
enumOptionsValueForIndex as enumOptionsValueForIndex3
} from "@rjsf/utils";
import isString2 from "lodash/isString";
import { useMemo } from "react";
import { jsx as jsx22 } from "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(enumOptionsValueForIndex3(nextValue, enumOptions, emptyValue));
const handleBlur = () => onBlur(id, enumOptionsValueForIndex3(value, enumOptions, emptyValue));
const handleFocus = () => onFocus(id, enumOptionsValueForIndex3(value, enumOptions, emptyValue));
const filterOption = (input, option) => {
if (option && isString2(option.label)) {
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}
return false;
};
const getPopupContainer = (node) => node.parentNode;
const selectedIndexes = enumOptionsIndexForValue3(value, enumOptions, multiple);
const extraProps = {
name: id
};
const showPlaceholderOption = !multiple && schema.default === void 0;
const selectOptions = 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__ */ jsx22(
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": ariaDescribedByIds10(id),
options: selectOptions
}
);
}
// src/widgets/TextareaWidget/index.tsx
import { Input as Input4 } from "antd";
import {
ariaDescribedByIds as ariaDescribedByIds11
} from "@rjsf/utils";
import { jsx as jsx23 } from "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__ */ jsx23(
Input4.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": ariaDescribedByIds11(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 withTheme(generateTheme());
}
var Form3 = generateForm();
var src_default = Form3;
export {
Form3 as Form,
templates_default as Templates,
Theme,
widgets_default as Widgets,
src_default as default,
generateForm,
generateTemplates,
generateTheme,
generateWidgets
};
//# sourceMappingURL=antd.esm.js.map