@rjsf/semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
1,033 lines (1,023 loc) • 34.7 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,
size: "tiny",
...props,
icon: true,
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, buttonsProps, displayLabel, hasDescription, hasToolbar, uiSchema, registry, parentUiSchema } = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldItemButtonsTemplate = utils.getTemplate(
"ArrayFieldItemButtonsTemplate",
registry,
uiOptions
);
const semanticProps = getSemanticProps({
uiSchema: parentUiSchema,
formContext: registry.formContext,
defaultSchemaProps: { horizontalButtons: true, wrapItem: false }
});
const { horizontalButtons = true, wrapItem = false } = semanticProps;
const margin = hasDescription ? 5 : 24;
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rjsf-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: /* @__PURE__ */ jsxRuntime.jsx(
semanticUiReact.Button.Group,
{
size: "mini",
vertical: !horizontalButtons,
style: { marginTop: displayLabel ? `${margin}px` : void 0 },
children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps })
}
) })
] }) }) });
}
function ArrayFieldTemplate(props) {
const {
uiSchema,
fieldPathId,
canAdd,
className,
// classNames, This is not part of the type, so it is likely never passed in
disabled,
items,
optionalDataControl,
onAddClick,
// options, This is not part of the type, so it is likely never passed in
readonly,
required,
schema,
title,
registry
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const ArrayFieldDescriptionTemplate = utils.getTemplate(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = utils.getTemplate(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
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,
{
fieldPathId,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
),
/* @__PURE__ */ jsxRuntime.jsx(
ArrayFieldDescriptionTemplate,
{
fieldPathId,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row array-item-list", children: [
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
items
] }),
canAdd && /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ jsxRuntime.jsx(
AddButton2,
{
id: utils.buttonId(fieldPathId, "add"),
className: "rjsf-array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
)
}
)
] }, `array-item-list-${fieldPathId.$id}`)
] });
}
function BaseInputTemplate(props) {
const {
id,
htmlName,
placeholder,
label,
hideLabel,
value,
required,
readonly,
disabled,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
uiSchema,
registry,
type,
rawErrors = []
} = props;
const inputProps = utils.getInputProps(schema, type, options);
const semanticProps = getSemanticProps({
uiSchema,
formContext: registry.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: htmlName || 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, registry, uiSchema } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx("p", { id, className: "sui-description", children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
}
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, fieldPathId, 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(fieldPathId);
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 { fieldPathId, help, uiSchema, registry } = props;
if (help) {
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Message, { size: "mini", info: true, id: utils.helpId(fieldPathId), children: /* @__PURE__ */ jsxRuntime.jsx(core.RichHelp, { help, registry, uiSchema }) });
}
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,
formContext: registry.formContext
});
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 });
}
const isCheckbox = uiOptions.widget === "checkbox";
return /* @__PURE__ */ jsxRuntime.jsx(
WrapIfAdditionalTemplate2,
{
classNames,
style,
id,
label,
displayLabel,
rawDescription,
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 && !isCheckbox && /* @__PURE__ */ jsxRuntime.jsx(MaybeWrap, { wrap: wrapLabel, className: "sui-field-label", children: description }),
help,
errors
] }) }, id)
}
);
}
function GridTemplate(props) {
const { children, column, ...rest } = props;
if (column) {
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { ...rest, children });
}
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid, { ...rest, children });
}
function MultiSchemaFieldTemplate(props) {
const { selector, optionSchemaField } = props;
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { children: selector }),
optionSchemaField
] });
}
function ObjectFieldTemplate(props) {
const {
description,
optionalDataControl,
onAddProperty,
title,
properties,
disabled,
readonly,
required,
uiSchema,
schema,
formData,
fieldPathId,
registry
} = props;
const uiOptions = utils.getUiOptions(uiSchema);
const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const showOptionalDataControlInTitle = !readonly && !disabled;
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
title && /* @__PURE__ */ jsxRuntime.jsx(
TitleFieldTemplate,
{
id: utils.titleId(fieldPathId),
title,
required,
schema,
uiSchema,
registry,
optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
}
),
description && /* @__PURE__ */ jsxRuntime.jsx(
DescriptionFieldTemplate,
{
id: utils.descriptionId(fieldPathId),
description,
schema,
uiSchema,
registry
}
),
!showOptionalDataControlInTitle ? optionalDataControl : void 0,
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,
{
id: utils.buttonId(fieldPathId, "add"),
className: "rjsf-object-property-expand",
onClick: onAddProperty,
disabled: disabled || readonly,
uiSchema,
registry
}
)
}
) }) })
] });
}
function OptionalDataControlsTemplate(props) {
const { id, registry, label, onAddClick, onRemoveClick } = props;
if (onAddClick) {
return /* @__PURE__ */ jsxRuntime.jsx(
AddButton,
{
id,
registry,
className: "rjsf-add-optional-data",
onClick: onAddClick,
title: label,
size: "mini"
}
);
} else if (onRemoveClick) {
return /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton,
{
id,
registry,
className: "rjsf-remove-optional-data",
onClick: onRemoveClick,
title: label,
size: "mini"
}
);
}
return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
}
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Button, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
}
var DEFAULT_OPTIONS2 = {
inverted: false,
dividing: true
};
function TitleField({
id,
title,
uiSchema,
optionalDataControl
}) {
const semanticProps = getSemanticProps({
uiSchema,
defaultSchemaProps: DEFAULT_OPTIONS2
});
let heading = title ? /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Header, { id, ...semanticProps, as: "h5", children: title }) : null;
if (optionalDataControl) {
heading = /* @__PURE__ */ jsxRuntime.jsxs(semanticUiReact.Grid, { colums: 2, relaxed: true, children: [
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { width: 14, style: { paddingRight: 0 }, children: heading }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { width: 2, children: optionalDataControl })
] });
}
return heading;
}
function WrapIfAdditionalTemplate(props) {
const {
children,
classNames,
style,
disabled,
id,
label,
displayLabel,
onKeyRenameBlur,
onRemoveProperty,
rawDescription,
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;
const margin = rawDescription ? 4 : 24;
if (!additional) {
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
}
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children: /* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid, { children: /* @__PURE__ */ jsxRuntime.jsxs(semanticUiReact.Grid.Row, { children: [
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { width: 7, 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: displayLabel ? keyLabel : void 0,
required,
defaultValue: label,
disabled: disabled || readonlyAsDisabled && readonly,
id: `${id}`,
name: `${id}`,
onBlur: !readonly ? onKeyRenameBlur : void 0,
style: wrapperStyle,
type: "text"
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { width: 7, className: "form-additional", verticalAlign: "middle", children }),
/* @__PURE__ */ jsxRuntime.jsx(semanticUiReact.Grid.Column, { verticalAlign: "middle", style: displayLabel ? { marginTop: `${margin}px` } : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
RemoveButton2,
{
id: utils.buttonId(id, "remove"),
iconType: "mini",
className: "rjsf-object-property-remove",
disabled: disabled || readonly,
onClick: onRemoveProperty,
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,
GridTemplate,
MultiSchemaFieldTemplate,
ObjectFieldTemplate,
OptionalDataControlsTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
function CheckboxWidget(props) {
const {
id,
htmlName,
value,
disabled,
readonly,
label = "",
hideLabel,
autofocus,
onChange,
onBlur,
options,
onFocus,
schema,
uiSchema,
rawErrors = [],
registry
} = props;
const semanticProps = getSemanticProps({
options,
formContext: registry.formContext,
uiSchema,
defaultSchemaProps: {
inverted: "false"
}
});
const DescriptionFieldTemplate = utils.getTemplate(
"DescriptionFieldTemplate",
registry,
options
);
const required = utils.schemaRequiresTrueValue(schema);
const checked = value == "true" || value == true;
const _onChange = (_, data) => onChange && onChange(data.checked);
const _onBlur = () => onBlur && onBlur(id, value);
const _onFocus = () => onFocus && onFocus(id, value);
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: htmlName || 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,
htmlName,
disabled,
options,
value,
autofocus,
readonly,
label,
hideLabel,
onChange,
onBlur,
onFocus,
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: registry.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: htmlName || 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: htmlName || 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,
htmlName,
value,
required,
disabled,
readonly,
onChange,
onBlur,
onFocus,
options,
registry,
uiSchema,
rawErrors = []
} = props;
const { enumOptions, enumDisabled, emptyValue } = options;
const semanticProps = getSemanticProps({
formContext: registry.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: htmlName || 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,
registry,
rawErrors = []
} = props;
const semanticProps = getSemanticProps({
formContext: registry.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,
registry,
id,
htmlName,
options,
label,
hideLabel,
required,
disabled,
readonly,
value,
multiple,
placeholder,
autofocus,
onChange,
onBlur,
onFocus,
rawErrors = [],
schema
} = props;
const semanticProps = getSemanticProps({
uiSchema,
formContext: registry.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: htmlName || 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,
htmlName,
placeholder,
value,
required,
disabled,
autofocus,
label,
hideLabel,
readonly,
onBlur,
onFocus,
onChange,
options,
registry,
rawErrors = []
} = props;
const semanticProps = getSemanticProps({
formContext: registry.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: htmlName || 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 index_default = SemanticUIForm_default;
exports.Form = SemanticUIForm_default;
exports.Templates = Templates_default;
exports.Theme = Theme_default;
exports.Widgets = Widgets_default;
exports.default = index_default;
exports.generateForm = generateForm;
exports.generateTemplates = generateTemplates;
exports.generateTheme = generateTheme;
exports.generateWidgets = generateWidgets;
Object.defineProperty(exports, '__esModule', { value: true });
}));