@rjsf/semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
1,008 lines (998 loc) • 33 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('semantic-ui-react'), require('@rjsf/utils'), require('react/jsx-runtime'), require('lodash/uniqueId'), require('react'), require('lodash/map')) :
typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'semantic-ui-react', '@rjsf/utils', 'react/jsx-runtime', 'lodash/uniqueId', 'react', 'lodash/map'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/semantic-ui"] = {}, global.core, global.semanticUiReact, global.utils, global.jsxRuntime, global.uniqueId, global.react, global.map));
})(this, (function (exports, core, semanticUiReact, utils, jsxRuntime, uniqueId, react, map) { 'use strict';
// src/SemanticUIForm/SemanticUIForm.ts
function AddButton({
uiSchema,
registry,
color,
...props
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Button,
{
title: translateString(utils.TranslatableString.AddItemButton),
color,
...props,
icon: true,
size: "tiny",
children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Icon, { name: "plus" })
}
);
}
function getSemanticProps({
formContext = {},
uiSchema = {},
options = {},
defaultSchemaProps = { fluid: true, inverted: false },
defaultContextProps = {}
}) {
const formContextProps = formContext.semantic;
const schemaProps = utils.getUiOptions(uiSchema).semantic;
const optionProps = options.semantic;
return Object.assign(
{},
{ ...defaultSchemaProps },
{ ...defaultContextProps },
schemaProps,
optionProps,
formContextProps
);
}
function getSemanticErrorProps({
formContext = {},
uiSchema = {},
options = {},
defaultProps = { size: "small", pointing: "above" }
}) {
const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
const semanticOptions = utils.getUiOptions(uiSchema).semantic;
const schemaProps = semanticOptions && semanticOptions.errorOptions;
const optionProps = options.semantic && options.semantic.errorOptions;
return Object.assign({}, { ...defaultProps }, schemaProps, optionProps, formContextProps);
}
function cleanClassNames(classNameArr, omit = []) {
const classList = classNameArr.filter(Boolean).reduce((previous, current) => previous.concat(current.trim().split(/\s+/)), []);
return [...new Set(classList.filter((cn) => !omit.includes(cn)))].join(" ");
}
function MaybeWrap({ wrap, component: Component = "div", ...props }) {
return wrap ? /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) : props.children;
}
var gridStyle = (vertical) => ({
display: "grid",
gridTemplateColumns: `1fr ${vertical ? 65 : 150}px`
});
function ArrayFieldItemTemplate(props) {
const {
children,
disabled,
hasToolbar,
hasCopy,
hasMoveDown,
hasMoveUp,
hasRemove,
index,
onCopyIndexClick,
onDropIndexClick,
onReorderClick,
readonly,
uiSchema,
registry
} = props;
const { CopyButton: CopyButton2, MoveDownButton: MoveDownButton2, MoveUpButton: MoveUpButton2, RemoveButton: RemoveButton2 } = registry.templates.ButtonTemplates;
const uiOptions = utils.getUiOptions(uiSchema);
const { horizontalButtons = true, wrapItem = false } = uiOptions.semantic;
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "array-item", children: /* @__PURE__ */ jsxRuntime.jsx(MaybeWrap, { wrap: wrapItem, component: semanticUiReact.Segment, children: /* @__PURE__ */ jsxRuntime.jsxs(semanticUiReact.Grid, { style: { ...gridStyle(!horizontalButtons), alignItems: "center" }, children: [
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { width: 16, verticalAlign: "middle", children }),
hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { children: (hasMoveUp || hasMoveDown || hasRemove) && /* @__PURE__ */ jsxRuntime.jsxs(semanticUiReact.Button.Group, { size: "mini", vertical: !horizontalButtons, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveUpButton2,
{
className: "array-item-move-up",
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsxRuntime.jsx(
MoveDownButton2,
{
className: "array-item-move-down",
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ jsxRuntime.jsx(
CopyButton2,
{
className: "array-item-copy",
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
)
] }) })
] }) }) });
}
function ArrayFieldTemplate(props) {
const {
uiSchema,
idSchema,
canAdd,
className,
// classNames, This is not part of the type, so it is likely never passed in
disabled,
formContext,
items,
onAddClick,
// options, This is not part of the type, so it is likely never passed in
readonly,
required,
schema,
title,
registry
} = props;
const semanticProps = getSemanticProps({
uiSchema,
formContext,
defaultSchemaProps: { horizontalButtons: true, wrapItem: false }
});
const { horizontalButtons, wrapItem } = semanticProps;
const semantic = { horizontalButtons, wrapItem };
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;
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cleanClassNames([className, utils.isFixedItems(schema) ? "" : "sortable-form-fields"]), children: [
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldTitleTemplate,
{
idSchema,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldDescriptionTemplate,
{
idSchema,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "row array-item-list", children: items && items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
const mergedUiSchema = {
...itemUiSchema,
[utils.UI_OPTIONS_KEY]: {
...itemUiSchema[utils.UI_OPTIONS_KEY],
semantic
}
};
return /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
}) }),
canAdd && /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ jsxRuntime.jsx(AddButton2, { onClick: onAddClick, disabled: disabled || readonly, uiSchema, registry })
}
)
] }, `array-item-list-${idSchema.$id}`)
] });
}
function BaseInputTemplate(props) {
const {
id,
placeholder,
label,
hideLabel,
value,
required,
readonly,
disabled,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
uiSchema,
formContext,
type,
rawErrors = []
} = props;
const inputProps = utils.getInputProps(schema, type, options);
const semanticProps = getSemanticProps({
uiSchema,
formContext,
options
});
const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Form.Input,
{
id,
name: id,
placeholder,
...inputProps,
label: utils.labelValue(label || void 0, hideLabel, false),
required,
autoFocus: autofocus,
disabled: disabled || readonly,
list: schema.examples ? utils.examplesId(id) : void 0,
...semanticProps,
value: value || value === 0 ? value : "",
error: rawErrors.length > 0,
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
},
id
),
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("p", { id, className: "sui-description", children: description });
}
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxRuntime.jsxs(semanticUiReact.Message, { negative: true, children: [
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Message.Header, { children: translateString(utils.TranslatableString.ErrorsLabel) }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Message.List, { children: errors.map((error, index) => /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Message.Item, { children: error.stack }, `error-${index}`)) })
] });
}
function IconButton(props) {
const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Button,
{
icon,
size: iconType,
color,
className,
...otherProps
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.CopyButton), ...props, icon: "copy" });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveDownButton), ...props, icon: "angle down" });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.MoveUpButton), ...props, icon: "angle up" });
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.RemoveButton), ...props, icon: "trash" });
}
var DEFAULT_OPTIONS = {
options: {
pointing: "above",
size: "small"
}
};
function FieldErrorTemplate({ errors, idSchema, uiSchema, registry }) {
const { formContext } = registry;
const options = getSemanticErrorProps({
formContext,
uiSchema,
defaultProps: DEFAULT_OPTIONS
});
const { pointing, size } = options;
if (errors && errors.length > 0) {
const id = utils.errorId(idSchema);
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Label, { id, color: "red", pointing: pointing || "above", size: size || "small", basic: true, children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.List, { bulleted: true, children: errors.map((error) => /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.List.Item, { children: error }, uniqueId("field-error-"))) }) });
}
return null;
}
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
if (help) {
const id = utils.helpId(idSchema);
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Message, { size: "mini", info: true, id, content: help });
}
return null;
}
function FieldTemplate(props) {
const {
id,
children,
classNames,
style,
displayLabel,
label,
errors,
help,
hidden,
description,
rawDescription,
registry,
schema,
uiSchema,
...otherProps
} = props;
const semanticProps = getSemanticProps(otherProps);
const { wrapLabel, wrapContent } = semanticProps;
const uiOptions = utils.getUiOptions(uiSchema);
const WrapIfAdditionalTemplate2 = utils.getTemplate(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "none" }, children });
}
return /* @__PURE__ */ jsxRuntime.jsx(
WrapIfAdditionalTemplate2,
{
classNames,
style,
id,
label,
registry,
schema,
uiSchema,
...otherProps,
children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsxRuntime.jsxs(MaybeWrap, { wrap: wrapContent, className: "sui-field-content", children: [
children,
displayLabel && rawDescription && /* @__PURE__ */ jsxRuntime.jsx(MaybeWrap, { wrap: wrapLabel, className: "sui-field-label", children: description }),
help,
errors
] }) }, id)
}
);
}
function ObjectFieldTemplate(props) {
const {
description,
onAddClick,
title,
properties,
disabled,
readonly,
required,
uiSchema,
schema,
formData,
idSchema,
registry
} = 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;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
title && /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
),
properties.map((prop) => prop.content),
utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
onClick: onAddClick(schema),
disabled: disabled || readonly,
uiSchema,
registry
}
)
}
) }) })
] });
}
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Button, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
}
var DEFAULT_OPTIONS2 = {
inverted: false,
dividing: true
};
function TitleField({
id,
title,
uiSchema
}) {
const semanticProps = getSemanticProps({
uiSchema,
defaultSchemaProps: DEFAULT_OPTIONS2
});
if (!title) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Header, { id, ...semanticProps, as: "h5", children: title });
}
function WrapIfAdditionalTemplate(props) {
const {
children,
classNames,
style,
disabled,
id,
label,
onDropPropertyClick,
onKeyChange,
readonly,
required,
schema,
uiSchema,
registry
} = props;
const { templates, translateString } = registry;
const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target.value);
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid, { columns: "equal", children: /* @__PURE__ */ jsxRuntime.jsxs(semanticUiReact.Grid.Row, { children: [
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { className: "form-additional", children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Form.Input,
{
className: "form-group",
hasFeedback: true,
fluid: true,
htmlFor: `${id}`,
label: keyLabel,
required,
defaultValue: label,
disabled: disabled || readonlyAsDisabled && readonly,
id: `${id}`,
name: `${id}`,
onBlur: !readonly ? handleBlur : void 0,
style: wrapperStyle,
type: "text"
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { className: "form-additional", verticalAlign: "middle", children }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
iconType: "mini",
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropPropertyClick(label),
uiSchema,
registry
}
) })
] }) }) }, `${id}-key`);
}
// src/Templates/Templates.ts
function generateTemplates() {
return {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton
},
DescriptionFieldTemplate: DescriptionField,
ErrorListTemplate: ErrorList,
FieldErrorTemplate,
FieldHelpTemplate,
FieldTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
function CheckboxWidget(props) {
const {
id,
value,
disabled,
readonly,
label = "",
hideLabel,
autofocus,
onChange,
onBlur,
options,
onFocus,
formContext,
schema,
uiSchema,
rawErrors = [],
registry
} = props;
const semanticProps = getSemanticProps({
options,
formContext,
uiSchema,
defaultSchemaProps: {
inverted: "false"
}
});
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
options
);
const required = utils.schemaRequiresTrueValue(schema);
const _onChange = (_, data) => onChange && onChange(data.checked);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
const checked = value == "true" || value == true;
const description = options.description ?? schema.description;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!hideLabel && !!description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Form.Checkbox,
{
id,
name: id,
disabled: disabled || readonly,
autoFocus: autofocus,
...semanticProps,
checked: typeof value === "undefined" ? false : checked,
error: rawErrors.length > 0,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
required,
label: utils.labelValue(label, hideLabel, false),
"aria-describedby": utils.ariaDescribedByIds(id)
}
)
] });
}
function CheckboxesWidget(props) {
const {
id,
disabled,
options,
value,
autofocus,
readonly,
label,
hideLabel,
onChange,
onBlur,
onFocus,
formContext,
schema,
uiSchema,
rawErrors = [],
registry
} = props;
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
const { enumOptions, enumDisabled, inline } = options;
const checkboxesValues = Array.isArray(value) ? value : [value];
const semanticProps = getSemanticProps({
options,
formContext,
uiSchema,
defaultSchemaProps: {
inverted: "false"
}
});
const _onChange = (index) => ({ target: { checked } }) => {
if (checked) {
onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
} else {
onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
}
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = inline ? { inline: true } : { grouped: true };
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsxRuntime.jsx(TitleFieldTemplate, { id: utils.titleId(id), title: label, schema, uiSchema, registry }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Form.Group, { id, name: id, ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Form.Checkbox,
{
id: utils.optionId(id, index),
name: id,
label: option.label,
...semanticProps,
checked,
error: rawErrors.length > 0,
disabled: disabled || itemDisabled || readonly,
autoFocus: autofocus && index === 0,
onChange: _onChange(index),
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
},
index
);
}) })
] });
}
function RadioWidget(props) {
const {
id,
value,
required,
disabled,
readonly,
onChange,
onBlur,
onFocus,
options,
formContext,
uiSchema,
rawErrors = []
} = props;
const { enumOptions, enumDisabled, emptyValue } = options;
const semanticProps = getSemanticProps({
formContext,
options,
uiSchema
});
const _onChange = (_, { value: eventValue }) => {
return onChange(utils.enumOptionsValueForIndex(eventValue, enumOptions, emptyValue));
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = options.inline ? { inline: true } : { grouped: true };
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Form.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = utils.enumOptionsIsSelected(option.value, value);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ react.createElement(
semanticUiReact.Form.Field,
{
required,
control: semanticUiReact.Radio,
id: utils.optionId(id, index),
name: id,
...semanticProps,
onFocus: _onFocus,
onBlur: _onBlur,
onChange: _onChange,
label: option.label,
value: String(index),
error: rawErrors.length > 0,
key: index,
checked,
disabled: disabled || itemDisabled || readonly,
"aria-describedby": utils.ariaDescribedByIds(id)
}
);
}) });
}
function RangeWidget(props) {
const {
id,
value,
required,
readonly,
disabled,
onChange,
onBlur,
onFocus,
options,
schema,
uiSchema,
formContext,
rawErrors = []
} = props;
const semanticProps = getSemanticProps({
formContext,
options,
uiSchema,
defaultSchemaProps: {
fluid: true
}
});
const _onChange = ({ target: { value: value2 } }) => onChange && onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Input,
{
id,
name: id,
type: "range",
required,
disabled: disabled || readonly,
...utils.rangeSpec(schema),
...semanticProps,
value: value || "",
error: rawErrors.length > 0,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
},
id
),
/* @__PURE__ */ jsxRuntime.jsx("span", { children: value })
] });
}
function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder) {
const disabledOptions = enumDisabled || [];
const options = map(enumOptions, ({ label, value }, index) => ({
disabled: disabledOptions.indexOf(value) !== -1,
key: label,
text: label,
value: String(index)
}));
if (showPlaceholderOption) {
options.unshift({ value: "", text: placeholder || "" });
}
return options;
}
function SelectWidget(props) {
const {
uiSchema,
formContext,
id,
options,
label,
hideLabel,
required,
disabled,
readonly,
value,
multiple,
placeholder,
autofocus,
onChange,
onBlur,
onFocus,
rawErrors = [],
schema
} = props;
const semanticProps = getSemanticProps({
uiSchema,
formContext,
options,
defaultSchemaProps: {
inverted: "false",
selection: true,
fluid: true,
scrolling: true,
upward: false
}
});
const { enumDisabled, enumOptions, emptyValue: optEmptyVal } = options;
const emptyValue = multiple ? [] : "";
const showPlaceholderOption = !multiple && schema.default === void 0;
const dropdownOptions = createDefaultValueOptionsForDropDown(
enumOptions,
enumDisabled,
showPlaceholderOption,
placeholder
);
const _onChange = (_, { value: value2 }) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, optEmptyVal));
const _onBlur = (_, { target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const _onFocus = (_, { target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
return /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Form.Dropdown,
{
id,
name: id,
label: utils.labelValue(label || void 0, hideLabel, false),
multiple: typeof multiple === "undefined" ? false : multiple,
value: typeof value === "undefined" ? emptyValue : selectedIndexes,
error: rawErrors.length > 0,
disabled,
placeholder,
...semanticProps,
required,
autoFocus: autofocus,
readOnly: readonly,
options: dropdownOptions,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
},
id
);
}
function TextareaWidget(props) {
const {
id,
placeholder,
value,
required,
disabled,
autofocus,
label,
hideLabel,
readonly,
onBlur,
onFocus,
onChange,
options,
formContext,
rawErrors = []
} = props;
const semanticProps = getSemanticProps({
formContext,
options,
defaultSchemaProps: { inverted: "false" }
});
const _onChange = ({ target: { value: value2 } }) => onChange && onChange(value2 === "" ? options.emptyValue : value2);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
return /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Form.TextArea,
{
id,
name: id,
label: utils.labelValue(label || void 0, hideLabel, false),
placeholder,
autoFocus: autofocus,
required,
disabled: disabled || readonly,
...semanticProps,
value: value || "",
error: rawErrors.length > 0,
rows: options.rows || 5,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": utils.ariaDescribedByIds(id)
},
id
);
}
// src/Widgets/Widgets.tsx
function generateWidgets() {
return {
CheckboxWidget,
CheckboxesWidget,
RadioWidget,
RangeWidget,
SelectWidget,
TextareaWidget
};
}
var Widgets_default = generateWidgets();
// src/Theme/Theme.ts
function generateTheme() {
return {
templates: generateTemplates(),
widgets: generateWidgets(),
_internalFormWrapper: semanticUiReact.Form
};
}
var Theme_default = generateTheme();
// src/SemanticUIForm/SemanticUIForm.ts
function generateForm() {
return core.withTheme(generateTheme());
}
var SemanticUIForm_default = generateForm();
// src/index.ts
var src_default = SemanticUIForm_default;
exports.Form = SemanticUIForm_default;
exports.Templates = Templates_default;
exports.Theme = Theme_default;
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 });
}));