@rjsf/semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
1,162 lines (1,133 loc) • 33.7 kB
JavaScript
// src/SemanticUIForm/SemanticUIForm.ts
import { withTheme } from "@rjsf/core";
// src/Theme/Theme.ts
import { Form as SuiForm } from "semantic-ui-react";
// src/AddButton/AddButton.tsx
import { Button, Icon } from "semantic-ui-react";
import { TranslatableString } from "@rjsf/utils";
import { jsx } from "react/jsx-runtime";
function AddButton({
uiSchema,
registry,
color,
...props
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsx(
Button,
{
title: translateString(TranslatableString.AddItemButton),
color,
...props,
icon: true,
size: "tiny",
children: /* @__PURE__ */ jsx(Icon, { name: "plus" })
}
);
}
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
import {
getUiOptions as getUiOptions2
} from "@rjsf/utils";
import { Button as Button2, Grid, Segment } from "semantic-ui-react";
// src/util.tsx
import {
getUiOptions
} from "@rjsf/utils";
import { jsx as jsx2 } from "react/jsx-runtime";
function getSemanticProps({
formContext = {},
uiSchema = {},
options = {},
defaultSchemaProps = { fluid: true, inverted: false },
defaultContextProps = {}
}) {
const formContextProps = formContext.semantic;
const schemaProps = 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 = 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__ */ jsx2(Component, { ...props }) : props.children;
}
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
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 = getUiOptions2(uiSchema);
const { horizontalButtons = true, wrapItem = false } = uiOptions.semantic;
return /* @__PURE__ */ jsx3("div", { className: "array-item", children: /* @__PURE__ */ jsx3(MaybeWrap, { wrap: wrapItem, component: Segment, children: /* @__PURE__ */ jsxs(Grid, { style: { ...gridStyle(!horizontalButtons), alignItems: "center" }, children: [
/* @__PURE__ */ jsx3(Grid.Column, { width: 16, verticalAlign: "middle", children }),
hasToolbar && /* @__PURE__ */ jsx3(Grid.Column, { children: (hasMoveUp || hasMoveDown || hasRemove) && /* @__PURE__ */ jsxs(Button2.Group, { size: "mini", vertical: !horizontalButtons, children: [
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx3(
MoveUpButton2,
{
className: "array-item-move-up",
disabled: disabled || readonly || !hasMoveUp,
onClick: onReorderClick(index, index - 1),
uiSchema,
registry
}
),
(hasMoveUp || hasMoveDown) && /* @__PURE__ */ jsx3(
MoveDownButton2,
{
className: "array-item-move-down",
disabled: disabled || readonly || !hasMoveDown,
onClick: onReorderClick(index, index + 1),
uiSchema,
registry
}
),
hasCopy && /* @__PURE__ */ jsx3(
CopyButton2,
{
className: "array-item-copy",
disabled: disabled || readonly,
onClick: onCopyIndexClick(index),
uiSchema,
registry
}
),
hasRemove && /* @__PURE__ */ jsx3(
RemoveButton2,
{
className: "array-item-remove",
disabled: disabled || readonly,
onClick: onDropIndexClick(index),
uiSchema,
registry
}
)
] }) })
] }) }) });
}
// src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
import {
getTemplate,
getUiOptions as getUiOptions3,
isFixedItems,
UI_OPTIONS_KEY
} from "@rjsf/utils";
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
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 = getUiOptions3(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;
return /* @__PURE__ */ jsxs2("div", { className: cleanClassNames([className, isFixedItems(schema) ? "" : "sortable-form-fields"]), children: [
/* @__PURE__ */ jsx4(
ArrayFieldTitleTemplate,
{
idSchema,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry
}
),
/* @__PURE__ */ jsx4(
ArrayFieldDescriptionTemplate,
{
idSchema,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsxs2("div", { children: [
/* @__PURE__ */ jsx4("div", { className: "row array-item-list", children: items && items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
const mergedUiSchema = {
...itemUiSchema,
[UI_OPTIONS_KEY]: {
...itemUiSchema[UI_OPTIONS_KEY],
semantic
}
};
return /* @__PURE__ */ jsx4(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
}) }),
canAdd && /* @__PURE__ */ jsx4(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ jsx4(AddButton2, { onClick: onAddClick, disabled: disabled || readonly, uiSchema, registry })
}
)
] }, `array-item-list-${idSchema.$id}`)
] });
}
// src/BaseInputTemplate/BaseInputTemplate.tsx
import { Form } from "semantic-ui-react";
import {
ariaDescribedByIds,
examplesId,
getInputProps,
labelValue
} from "@rjsf/utils";
import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
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 = 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__ */ jsxs3(Fragment, { children: [
/* @__PURE__ */ jsx5(
Form.Input,
{
id,
name: id,
placeholder,
...inputProps,
label: labelValue(label || void 0, hideLabel, false),
required,
autoFocus: autofocus,
disabled: disabled || readonly,
list: schema.examples ? examplesId(id) : void 0,
...semanticProps,
value: value || value === 0 ? value : "",
error: rawErrors.length > 0,
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": ariaDescribedByIds(id, !!schema.examples)
},
id
),
Array.isArray(schema.examples) && /* @__PURE__ */ jsx5("datalist", { id: examplesId(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ jsx5("option", { value: example }, example);
}) })
] });
}
// src/DescriptionField/DescriptionField.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
function DescriptionField(props) {
const { id, description } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ jsx6("p", { id, className: "sui-description", children: description });
}
// src/ErrorList/ErrorList.tsx
import { Message } from "semantic-ui-react";
import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ jsxs4(Message, { negative: true, children: [
/* @__PURE__ */ jsx7(Message.Header, { children: translateString(TranslatableString2.ErrorsLabel) }),
/* @__PURE__ */ jsx7(Message.List, { children: errors.map((error, index) => /* @__PURE__ */ jsx7(Message.Item, { children: error.stack }, `error-${index}`)) })
] });
}
// src/IconButton/IconButton.tsx
import { Button as Button3 } from "semantic-ui-react";
import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
import { jsx as jsx8 } from "react/jsx-runtime";
function IconButton(props) {
const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ jsx8(
Button3,
{
icon,
size: iconType,
color,
className,
...otherProps
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx8(IconButton, { title: translateString(TranslatableString3.CopyButton), ...props, icon: "copy" });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx8(IconButton, { title: translateString(TranslatableString3.MoveDownButton), ...props, icon: "angle down" });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx8(IconButton, { title: translateString(TranslatableString3.MoveUpButton), ...props, icon: "angle up" });
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ jsx8(IconButton, { title: translateString(TranslatableString3.RemoveButton), ...props, icon: "trash" });
}
// src/FieldErrorTemplate/FieldErrorTemplate.tsx
import { errorId } from "@rjsf/utils";
import uniqueId from "lodash/uniqueId";
import { Label, List } from "semantic-ui-react";
import { jsx as jsx9 } from "react/jsx-runtime";
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 = errorId(idSchema);
return /* @__PURE__ */ jsx9(Label, { id, color: "red", pointing: pointing || "above", size: size || "small", basic: true, children: /* @__PURE__ */ jsx9(List, { bulleted: true, children: errors.map((error) => /* @__PURE__ */ jsx9(List.Item, { children: error }, uniqueId("field-error-"))) }) });
}
return null;
}
// src/FieldHelpTemplate/FieldHelpTemplate.tsx
import { Message as Message2 } from "semantic-ui-react";
import { helpId } from "@rjsf/utils";
import { jsx as jsx10 } from "react/jsx-runtime";
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
if (help) {
const id = helpId(idSchema);
return /* @__PURE__ */ jsx10(Message2, { size: "mini", info: true, id, content: help });
}
return null;
}
// src/FieldTemplate/FieldTemplate.tsx
import {
getTemplate as getTemplate2,
getUiOptions as getUiOptions4
} from "@rjsf/utils";
import { Form as Form2 } from "semantic-ui-react";
import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
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 = getUiOptions4(uiSchema);
const WrapIfAdditionalTemplate2 = getTemplate2(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ jsx11("div", { style: { display: "none" }, children });
}
return /* @__PURE__ */ jsx11(
WrapIfAdditionalTemplate2,
{
classNames,
style,
id,
label,
registry,
schema,
uiSchema,
...otherProps,
children: /* @__PURE__ */ jsx11(Form2.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsxs5(MaybeWrap, { wrap: wrapContent, className: "sui-field-content", children: [
children,
displayLabel && rawDescription && /* @__PURE__ */ jsx11(MaybeWrap, { wrap: wrapLabel, className: "sui-field-label", children: description }),
help,
errors
] }) }, id)
}
);
}
// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
import { Grid as Grid2 } from "semantic-ui-react";
import {
canExpand,
descriptionId,
getTemplate as getTemplate3,
getUiOptions as getUiOptions5,
titleId
} from "@rjsf/utils";
import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
function ObjectFieldTemplate(props) {
const {
description,
onAddClick,
title,
properties,
disabled,
readonly,
required,
uiSchema,
schema,
formData,
idSchema,
registry
} = props;
const uiOptions = getUiOptions5(uiSchema);
const TitleFieldTemplate = getTemplate3("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = getTemplate3(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ jsxs6(Fragment2, { children: [
title && /* @__PURE__ */ jsx12(
TitleFieldTemplate,
{
id: titleId(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ jsx12(
DescriptionFieldTemplate,
{
id: descriptionId(idSchema),
description,
schema,
uiSchema,
registry
}
),
properties.map((prop) => prop.content),
canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12(Grid2.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ jsx12(Grid2.Row, { children: /* @__PURE__ */ jsx12(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ jsx12(
AddButton2,
{
onClick: onAddClick(schema),
disabled: disabled || readonly,
uiSchema,
registry
}
)
}
) }) })
] });
}
// src/SubmitButton/SubmitButton.tsx
import { Button as Button4 } from "semantic-ui-react";
import { getSubmitButtonOptions } from "@rjsf/utils";
import { jsx as jsx13 } from "react/jsx-runtime";
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ jsx13(Button4, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
}
// src/TitleField/TitleField.tsx
import { Header } from "semantic-ui-react";
import { jsx as jsx14 } from "react/jsx-runtime";
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__ */ jsx14(Header, { id, ...semanticProps, as: "h5", children: title });
}
// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
import {
ADDITIONAL_PROPERTY_FLAG,
TranslatableString as TranslatableString4
} from "@rjsf/utils";
import { Form as Form3, Grid as Grid3 } from "semantic-ui-react";
import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
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(TranslatableString4.KeyLabel, [label]);
const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
const additional = ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target.value);
return /* @__PURE__ */ jsx15("div", { className: classNames, style, children: /* @__PURE__ */ jsx15(Grid3, { columns: "equal", children: /* @__PURE__ */ jsxs7(Grid3.Row, { children: [
/* @__PURE__ */ jsx15(Grid3.Column, { className: "form-additional", children: /* @__PURE__ */ jsx15(Form3.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ jsx15(
Form3.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__ */ jsx15(Grid3.Column, { className: "form-additional", verticalAlign: "middle", children }),
/* @__PURE__ */ jsx15(Grid3.Column, { children: /* @__PURE__ */ jsx15(
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();
// src/CheckboxWidget/CheckboxWidget.tsx
import {
ariaDescribedByIds as ariaDescribedByIds2,
descriptionId as descriptionId2,
getTemplate as getTemplate4,
labelValue as labelValue2,
schemaRequiresTrueValue
} from "@rjsf/utils";
import { Form as Form4 } from "semantic-ui-react";
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
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 = getTemplate4(
"DescriptionFieldTemplate",
registry,
options
);
const required = 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__ */ jsxs8(Fragment3, { children: [
!hideLabel && !!description && /* @__PURE__ */ jsx16(
DescriptionFieldTemplate,
{
id: descriptionId2(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ jsx16(
Form4.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: labelValue2(label, hideLabel, false),
"aria-describedby": ariaDescribedByIds2(id)
}
)
] });
}
// src/CheckboxesWidget/CheckboxesWidget.tsx
import { Form as Form5 } from "semantic-ui-react";
import {
ariaDescribedByIds as ariaDescribedByIds3,
enumOptionsDeselectValue,
enumOptionsIsSelected,
enumOptionsSelectValue,
getTemplate as getTemplate5,
optionId,
titleId as titleId2
} from "@rjsf/utils";
import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
function CheckboxesWidget(props) {
const {
id,
disabled,
options,
value,
autofocus,
readonly,
label,
hideLabel,
onChange,
onBlur,
onFocus,
formContext,
schema,
uiSchema,
rawErrors = [],
registry
} = props;
const TitleFieldTemplate = getTemplate5("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(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
} else {
onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
}
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = inline ? { inline: true } : { grouped: true };
return /* @__PURE__ */ jsxs9(Fragment4, { children: [
!hideLabel && !!label && /* @__PURE__ */ jsx17(TitleFieldTemplate, { id: titleId2(id), title: label, schema, uiSchema, registry }),
/* @__PURE__ */ jsx17(Form5.Group, { id, name: id, ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = enumOptionsIsSelected(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ jsx17(
Form5.Checkbox,
{
id: 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": ariaDescribedByIds3(id)
},
index
);
}) })
] });
}
// src/RadioWidget/RadioWidget.tsx
import {
ariaDescribedByIds as ariaDescribedByIds4,
enumOptionsIsSelected as enumOptionsIsSelected2,
enumOptionsValueForIndex,
optionId as optionId2
} from "@rjsf/utils";
import { Form as Form6, Radio } from "semantic-ui-react";
import { jsx as jsx18 } from "react/jsx-runtime";
import { createElement } from "react";
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(enumOptionsValueForIndex(eventValue, enumOptions, emptyValue));
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = options.inline ? { inline: true } : { grouped: true };
return /* @__PURE__ */ jsx18(Form6.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = enumOptionsIsSelected2(option.value, value);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ createElement(
Form6.Field,
{
required,
control: Radio,
id: optionId2(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": ariaDescribedByIds4(id)
}
);
}) });
}
// src/RangeWidget/RangeWidget.tsx
import { Input } from "semantic-ui-react";
import { ariaDescribedByIds as ariaDescribedByIds5, rangeSpec } from "@rjsf/utils";
import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
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__ */ jsxs10(Fragment5, { children: [
/* @__PURE__ */ jsx19(
Input,
{
id,
name: id,
type: "range",
required,
disabled: disabled || readonly,
...rangeSpec(schema),
...semanticProps,
value: value || "",
error: rawErrors.length > 0,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": ariaDescribedByIds5(id)
},
id
),
/* @__PURE__ */ jsx19("span", { children: value })
] });
}
// src/SelectWidget/SelectWidget.tsx
import {
ariaDescribedByIds as ariaDescribedByIds6,
enumOptionsIndexForValue,
enumOptionsValueForIndex as enumOptionsValueForIndex2,
labelValue as labelValue3
} from "@rjsf/utils";
import map from "lodash/map";
import { Form as Form7 } from "semantic-ui-react";
import { jsx as jsx20 } from "react/jsx-runtime";
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(enumOptionsValueForIndex2(value2, enumOptions, optEmptyVal));
const _onBlur = (_, { target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, optEmptyVal));
const _onFocus = (_, { target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, optEmptyVal));
const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
return /* @__PURE__ */ jsx20(
Form7.Dropdown,
{
id,
name: id,
label: labelValue3(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": ariaDescribedByIds6(id)
},
id
);
}
// src/TextareaWidget/TextareaWidget.tsx
import {
ariaDescribedByIds as ariaDescribedByIds7,
labelValue as labelValue4
} from "@rjsf/utils";
import { Form as Form8 } from "semantic-ui-react";
import { jsx as jsx21 } from "react/jsx-runtime";
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__ */ jsx21(
Form8.TextArea,
{
id,
name: id,
label: labelValue4(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": ariaDescribedByIds7(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: SuiForm
};
}
var Theme_default = generateTheme();
// src/SemanticUIForm/SemanticUIForm.ts
function generateForm() {
return withTheme(generateTheme());
}
var SemanticUIForm_default = generateForm();
// src/index.ts
var src_default = SemanticUIForm_default;
export {
SemanticUIForm_default as Form,
Templates_default as Templates,
Theme_default as Theme,
Widgets_default as Widgets,
src_default as default,
generateForm,
generateTemplates,
generateTheme,
generateWidgets
};
//# sourceMappingURL=semantic-ui.esm.js.map