@snups/rjsf-semantic-ui
Version:
Semantic UI theme, fields and widgets for react-jsonschema-form
1,127 lines (1,094 loc) • 39.3 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Form: () => SemanticUIForm_default,
Templates: () => Templates_default,
Theme: () => Theme_default,
Widgets: () => Widgets_default,
default: () => index_default,
generateForm: () => generateForm,
generateTemplates: () => generateTemplates,
generateTheme: () => generateTheme,
generateWidgets: () => generateWidgets
});
module.exports = __toCommonJS(index_exports);
// src/SemanticUIForm/SemanticUIForm.ts
var import_rjsf_core2 = require("@snups/rjsf-core");
// src/Theme/Theme.ts
var import_semantic_ui_react20 = require("semantic-ui-react");
// src/AddButton/AddButton.tsx
var import_semantic_ui_react = require("semantic-ui-react");
var import_rjsf_utils = require("@snups/rjsf-utils");
var import_jsx_runtime = require("react/jsx-runtime");
function AddButton({
uiSchema,
registry,
color,
...props
}) {
const { translateString } = registry;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_semantic_ui_react.Button,
{
title: translateString(import_rjsf_utils.TranslatableString.AddItemButton),
color,
...props,
icon: true,
size: "tiny",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_semantic_ui_react.Icon, { name: "plus" })
}
);
}
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
var import_rjsf_utils3 = require("@snups/rjsf-utils");
var import_semantic_ui_react2 = require("semantic-ui-react");
// src/util.tsx
var import_rjsf_utils2 = require("@snups/rjsf-utils");
var import_jsx_runtime2 = require("react/jsx-runtime");
function getSemanticProps({
formContext = {},
uiSchema = {},
options = {},
defaultSchemaProps = { fluid: true, inverted: false },
defaultContextProps = {}
}) {
const formContextProps = formContext.semantic;
const schemaProps = (0, import_rjsf_utils2.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 = (0, import_rjsf_utils2.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__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }) : props.children;
}
// src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var gridStyle = (vertical) => ({
display: "grid",
gridTemplateColumns: `1fr ${vertical ? 65 : 150}px`
});
function ArrayFieldItemTemplate(props) {
const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
const uiOptions = (0, import_rjsf_utils3.getUiOptions)(uiSchema);
const ArrayFieldItemButtonsTemplate = (0, import_rjsf_utils3.getTemplate)(
"ArrayFieldItemButtonsTemplate",
registry,
uiOptions
);
const { horizontalButtons = true, wrapItem = false } = uiOptions.semantic;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rjsf-array-item", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MaybeWrap, { wrap: wrapItem, component: import_semantic_ui_react2.Segment, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_semantic_ui_react2.Grid, { style: { ...gridStyle(!horizontalButtons), alignItems: "center" }, children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_semantic_ui_react2.Grid.Column, { width: 16, verticalAlign: "middle", children }),
hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_semantic_ui_react2.Grid.Column, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_semantic_ui_react2.Button.Group, { size: "mini", vertical: !horizontalButtons, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemButtonsTemplate, { ...buttonsProps }) }) })
] }) }) });
}
// src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
var import_rjsf_utils4 = require("@snups/rjsf-utils");
var import_jsx_runtime4 = require("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,
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: registry.formContext,
defaultSchemaProps: { horizontalButtons: true, wrapItem: false }
});
const { horizontalButtons, wrapItem } = semanticProps;
const semantic = { horizontalButtons, wrapItem };
const uiOptions = (0, import_rjsf_utils4.getUiOptions)(uiSchema);
const ArrayFieldDescriptionTemplate = (0, import_rjsf_utils4.getTemplate)(
"ArrayFieldDescriptionTemplate",
registry,
uiOptions
);
const ArrayFieldItemTemplate2 = (0, import_rjsf_utils4.getTemplate)(
"ArrayFieldItemTemplate",
registry,
uiOptions
);
const ArrayFieldTitleTemplate = (0, import_rjsf_utils4.getTemplate)(
"ArrayFieldTitleTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cleanClassNames([className, (0, import_rjsf_utils4.isFixedItems)(schema) ? "" : "sortable-form-fields"]), children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
ArrayFieldTitleTemplate,
{
idSchema,
title: uiOptions.title || title,
schema,
uiSchema,
required,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
ArrayFieldDescriptionTemplate,
{
idSchema,
description: uiOptions.description || schema.description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row array-item-list", children: items && items.map(({ key, uiSchema: itemUiSchema = {}, ...props2 }) => {
const mergedUiSchema = {
...itemUiSchema,
[import_rjsf_utils4.UI_OPTIONS_KEY]: {
...itemUiSchema[import_rjsf_utils4.UI_OPTIONS_KEY],
semantic
}
};
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrayFieldItemTemplate2, { ...props2, uiSchema: mergedUiSchema }, key);
}) }),
canAdd && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
AddButton2,
{
id: (0, import_rjsf_utils4.buttonId)(idSchema, "add"),
className: "rjsf-array-item-add",
onClick: onAddClick,
disabled: disabled || readonly,
uiSchema,
registry
}
)
}
)
] }, `array-item-list-${idSchema.$id}`)
] });
}
// src/BaseInputTemplate/BaseInputTemplate.tsx
var import_semantic_ui_react3 = require("semantic-ui-react");
var import_rjsf_utils5 = require("@snups/rjsf-utils");
var import_jsx_runtime5 = require("react/jsx-runtime");
function BaseInputTemplate(props) {
const {
id,
placeholder,
label,
hideLabel,
value,
required,
readonly,
disabled,
onChange,
onChangeOverride,
onBlur,
onFocus,
autofocus,
options,
schema,
uiSchema,
registry,
type,
rawErrors = []
} = props;
const inputProps = (0, import_rjsf_utils5.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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_semantic_ui_react3.Form.Input,
{
id,
name: id,
placeholder,
...inputProps,
label: (0, import_rjsf_utils5.labelValue)(label || void 0, hideLabel, false),
required,
autoFocus: autofocus,
disabled: disabled || readonly,
list: schema.examples ? (0, import_rjsf_utils5.examplesId)(id) : void 0,
...semanticProps,
value: value || value === 0 ? value : "",
error: rawErrors.length > 0,
onChange: onChangeOverride || _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": (0, import_rjsf_utils5.ariaDescribedByIds)(id, !!schema.examples)
},
id
),
Array.isArray(schema.examples) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("datalist", { id: (0, import_rjsf_utils5.examplesId)(id), children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map((example) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: example }, example);
}) })
] });
}
// src/DescriptionField/DescriptionField.tsx
var import_rjsf_core = require("@snups/rjsf-core");
var import_jsx_runtime6 = require("react/jsx-runtime");
function DescriptionField(props) {
const { id, description, registry, uiSchema } = props;
if (!description) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { id, className: "sui-description", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_rjsf_core.RichDescription, { description, registry, uiSchema }) });
}
// src/ErrorList/ErrorList.tsx
var import_semantic_ui_react4 = require("semantic-ui-react");
var import_rjsf_utils6 = require("@snups/rjsf-utils");
var import_jsx_runtime7 = require("react/jsx-runtime");
function ErrorList({
errors,
registry
}) {
const { translateString } = registry;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_semantic_ui_react4.Message, { negative: true, children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_semantic_ui_react4.Message.Header, { children: translateString(import_rjsf_utils6.TranslatableString.ErrorsLabel) }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_semantic_ui_react4.Message.List, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_semantic_ui_react4.Message.Item, { children: error.stack }, `error-${index}`)) })
] });
}
// src/IconButton/IconButton.tsx
var import_semantic_ui_react5 = require("semantic-ui-react");
var import_rjsf_utils7 = require("@snups/rjsf-utils");
var import_jsx_runtime8 = require("react/jsx-runtime");
function IconButton(props) {
const { icon, iconType, color, className, uiSchema, registry, ...otherProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_semantic_ui_react5.Button,
{
icon,
size: iconType,
color,
className,
...otherProps
}
);
}
function CopyButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { title: translateString(import_rjsf_utils7.TranslatableString.CopyButton), ...props, icon: "copy" });
}
function MoveDownButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { title: translateString(import_rjsf_utils7.TranslatableString.MoveDownButton), ...props, icon: "angle down" });
}
function MoveUpButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { title: translateString(import_rjsf_utils7.TranslatableString.MoveUpButton), ...props, icon: "angle up" });
}
function RemoveButton(props) {
const {
registry: { translateString }
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { title: translateString(import_rjsf_utils7.TranslatableString.RemoveButton), ...props, icon: "trash" });
}
// src/FieldErrorTemplate/FieldErrorTemplate.tsx
var import_rjsf_utils8 = require("@snups/rjsf-utils");
var import_uniqueId = __toESM(require("lodash/uniqueId"), 1);
var import_semantic_ui_react6 = require("semantic-ui-react");
var import_jsx_runtime9 = require("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 = (0, import_rjsf_utils8.errorId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_semantic_ui_react6.Label, { id, color: "red", pointing: pointing || "above", size: size || "small", basic: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_semantic_ui_react6.List, { bulleted: true, children: errors.map((error) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_semantic_ui_react6.List.Item, { children: error }, (0, import_uniqueId.default)("field-error-"))) }) });
}
return null;
}
// src/FieldHelpTemplate/FieldHelpTemplate.tsx
var import_semantic_ui_react7 = require("semantic-ui-react");
var import_rjsf_utils9 = require("@snups/rjsf-utils");
var import_jsx_runtime10 = require("react/jsx-runtime");
function FieldHelpTemplate(props) {
const { idSchema, help } = props;
if (help) {
const id = (0, import_rjsf_utils9.helpId)(idSchema);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_semantic_ui_react7.Message, { size: "mini", info: true, id, content: help });
}
return null;
}
// src/FieldTemplate/FieldTemplate.tsx
var import_rjsf_utils10 = require("@snups/rjsf-utils");
var import_semantic_ui_react8 = require("semantic-ui-react");
var import_jsx_runtime11 = require("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,
formContext: registry.formContext
});
const { wrapLabel, wrapContent } = semanticProps;
const uiOptions = (0, import_rjsf_utils10.getUiOptions)(uiSchema);
const WrapIfAdditionalTemplate2 = (0, import_rjsf_utils10.getTemplate)(
"WrapIfAdditionalTemplate",
registry,
uiOptions
);
if (hidden) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { display: "none" }, children });
}
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
WrapIfAdditionalTemplate2,
{
classNames,
style,
id,
label,
registry,
schema,
uiSchema,
...otherProps,
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_semantic_ui_react8.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(MaybeWrap, { wrap: wrapContent, className: "sui-field-content", children: [
children,
displayLabel && rawDescription && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MaybeWrap, { wrap: wrapLabel, className: "sui-field-label", children: description }),
help,
errors
] }) }, id)
}
);
}
// src/GridTemplate/GridTemplate.tsx
var import_semantic_ui_react9 = require("semantic-ui-react");
var import_jsx_runtime12 = require("react/jsx-runtime");
function GridTemplate(props) {
const { children, column, ...rest } = props;
if (column) {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_semantic_ui_react9.Grid.Column, { ...rest, children });
}
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_semantic_ui_react9.Grid, { ...rest, children });
}
// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
function MultiSchemaFieldTemplate(props) {
const { selector, optionSchemaField } = props;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: selector }),
optionSchemaField
] });
}
// src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
var import_semantic_ui_react10 = require("semantic-ui-react");
var import_rjsf_utils11 = require("@snups/rjsf-utils");
var import_jsx_runtime14 = require("react/jsx-runtime");
function ObjectFieldTemplate(props) {
const {
description,
onAddClick,
title,
properties,
disabled,
readonly,
required,
uiSchema,
schema,
formData,
idSchema,
registry
} = props;
const uiOptions = (0, import_rjsf_utils11.getUiOptions)(uiSchema);
const TitleFieldTemplate = (0, import_rjsf_utils11.getTemplate)("TitleFieldTemplate", registry, uiOptions);
const DescriptionFieldTemplate = (0, import_rjsf_utils11.getTemplate)(
"DescriptionFieldTemplate",
registry,
uiOptions
);
const {
ButtonTemplates: { AddButton: AddButton2 }
} = registry.templates;
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
TitleFieldTemplate,
{
id: (0, import_rjsf_utils11.titleId)(idSchema),
title,
required,
schema,
uiSchema,
registry
}
),
description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_rjsf_utils11.descriptionId)(idSchema),
description,
schema,
uiSchema,
registry
}
),
properties.map((prop) => prop.content),
(0, import_rjsf_utils11.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_semantic_ui_react10.Grid.Column, { width: 16, verticalAlign: "middle", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_semantic_ui_react10.Grid.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"div",
{
style: {
marginTop: "1rem",
position: "relative",
textAlign: "right"
},
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
AddButton2,
{
id: (0, import_rjsf_utils11.buttonId)(idSchema, "add"),
className: "rjsf-object-property-expand",
onClick: onAddClick(schema),
disabled: disabled || readonly,
uiSchema,
registry
}
)
}
) }) })
] });
}
// src/SubmitButton/SubmitButton.tsx
var import_semantic_ui_react11 = require("semantic-ui-react");
var import_rjsf_utils12 = require("@snups/rjsf-utils");
var import_jsx_runtime15 = require("react/jsx-runtime");
function SubmitButton({ uiSchema }) {
const { submitText, norender, props: submitButtonProps = {} } = (0, import_rjsf_utils12.getSubmitButtonOptions)(uiSchema);
if (norender) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_semantic_ui_react11.Button, { type: "submit", primary: true, ...submitButtonProps, children: submitText });
}
// src/TitleField/TitleField.tsx
var import_semantic_ui_react12 = require("semantic-ui-react");
var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime16.jsx)(import_semantic_ui_react12.Header, { id, ...semanticProps, as: "h5", children: title });
}
// src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
var import_rjsf_utils13 = require("@snups/rjsf-utils");
var import_semantic_ui_react13 = require("semantic-ui-react");
var import_jsx_runtime17 = require("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(import_rjsf_utils13.TranslatableString.KeyLabel, [label]);
const { readonlyAsDisabled = true, wrapperStyle } = registry.formContext;
const additional = import_rjsf_utils13.ADDITIONAL_PROPERTY_FLAG in schema;
if (!additional) {
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
}
const handleBlur = ({ target }) => onKeyChange(target.value);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid, { columns: "equal", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_semantic_ui_react13.Grid.Row, { children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Form.Group, { widths: "equal", grouped: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_semantic_ui_react13.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__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid.Column, { className: "form-additional", verticalAlign: "middle", children }),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_semantic_ui_react13.Grid.Column, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
RemoveButton2,
{
id: (0, import_rjsf_utils13.buttonId)(id, "remove"),
iconType: "mini",
className: "rjsf-object-property-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,
GridTemplate,
MultiSchemaFieldTemplate,
ObjectFieldTemplate,
TitleFieldTemplate: TitleField,
WrapIfAdditionalTemplate
};
}
var Templates_default = generateTemplates();
// src/CheckboxWidget/CheckboxWidget.tsx
var import_rjsf_utils14 = require("@snups/rjsf-utils");
var import_semantic_ui_react14 = require("semantic-ui-react");
var import_jsx_runtime18 = require("react/jsx-runtime");
function CheckboxWidget(props) {
const {
id,
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 = (0, import_rjsf_utils14.getTemplate)(
"DescriptionFieldTemplate",
registry,
options
);
const required = (0, import_rjsf_utils14.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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
!hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
DescriptionFieldTemplate,
{
id: (0, import_rjsf_utils14.descriptionId)(id),
description,
schema,
uiSchema,
registry
}
),
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_semantic_ui_react14.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: (0, import_rjsf_utils14.labelValue)(label, hideLabel, false),
"aria-describedby": (0, import_rjsf_utils14.ariaDescribedByIds)(id)
}
)
] });
}
// src/CheckboxesWidget/CheckboxesWidget.tsx
var import_semantic_ui_react15 = require("semantic-ui-react");
var import_rjsf_utils15 = require("@snups/rjsf-utils");
var import_jsx_runtime19 = require("react/jsx-runtime");
function CheckboxesWidget(props) {
const {
id,
disabled,
options,
value,
autofocus,
readonly,
label,
hideLabel,
onChange,
onBlur,
onFocus,
schema,
uiSchema,
rawErrors = [],
registry
} = props;
const TitleFieldTemplate = (0, import_rjsf_utils15.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((0, import_rjsf_utils15.enumOptionsSelectValue)(index, checkboxesValues, enumOptions));
} else {
onChange((0, import_rjsf_utils15.enumOptionsDeselectValue)(index, checkboxesValues, enumOptions));
}
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = inline ? { inline: true } : { grouped: true };
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
!hideLabel && !!label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TitleFieldTemplate, { id: (0, import_rjsf_utils15.titleId)(id), title: label, schema, uiSchema, registry }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_semantic_ui_react15.Form.Group, { id, name: id, ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = (0, import_rjsf_utils15.enumOptionsIsSelected)(option.value, checkboxesValues);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_semantic_ui_react15.Form.Checkbox,
{
id: (0, import_rjsf_utils15.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": (0, import_rjsf_utils15.ariaDescribedByIds)(id)
},
index
);
}) })
] });
}
// src/RadioWidget/RadioWidget.tsx
var import_rjsf_utils16 = require("@snups/rjsf-utils");
var import_semantic_ui_react16 = require("semantic-ui-react");
var import_jsx_runtime20 = require("react/jsx-runtime");
var import_react = require("react");
function RadioWidget(props) {
const {
id,
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((0, import_rjsf_utils16.enumOptionsValueForIndex)(eventValue, enumOptions, emptyValue));
};
const _onBlur = () => onBlur(id, value);
const _onFocus = () => onFocus(id, value);
const inlineOption = options.inline ? { inline: true } : { grouped: true };
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_semantic_ui_react16.Form.Group, { ...inlineOption, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
const checked = (0, import_rjsf_utils16.enumOptionsIsSelected)(option.value, value);
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
return /* @__PURE__ */ (0, import_react.createElement)(
import_semantic_ui_react16.Form.Field,
{
required,
control: import_semantic_ui_react16.Radio,
id: (0, import_rjsf_utils16.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": (0, import_rjsf_utils16.ariaDescribedByIds)(id)
}
);
}) });
}
// src/RangeWidget/RangeWidget.tsx
var import_semantic_ui_react17 = require("semantic-ui-react");
var import_rjsf_utils17 = require("@snups/rjsf-utils");
var import_jsx_runtime21 = require("react/jsx-runtime");
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__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_semantic_ui_react17.Input,
{
id,
name: id,
type: "range",
required,
disabled: disabled || readonly,
...(0, import_rjsf_utils17.rangeSpec)(schema),
...semanticProps,
value: value || "",
error: rawErrors.length > 0,
onChange: _onChange,
onBlur: _onBlur,
onFocus: _onFocus,
"aria-describedby": (0, import_rjsf_utils17.ariaDescribedByIds)(id)
},
id
),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: value })
] });
}
// src/SelectWidget/SelectWidget.tsx
var import_rjsf_utils18 = require("@snups/rjsf-utils");
var import_map = __toESM(require("lodash/map"), 1);
var import_semantic_ui_react18 = require("semantic-ui-react");
var import_jsx_runtime22 = require("react/jsx-runtime");
function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled, showPlaceholderOption, placeholder) {
const disabledOptions = enumDisabled || [];
const options = (0, import_map.default)(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,
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((0, import_rjsf_utils18.enumOptionsValueForIndex)(value2, enumOptions, optEmptyVal));
const _onBlur = (_, { target }) => onBlur(id, (0, import_rjsf_utils18.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
const _onFocus = (_, { target }) => onFocus(id, (0, import_rjsf_utils18.enumOptionsValueForIndex)(target && target.value, enumOptions, optEmptyVal));
const selectedIndexes = (0, import_rjsf_utils18.enumOptionsIndexForValue)(value, enumOptions, multiple);
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_semantic_ui_react18.Form.Dropdown,
{
id,
name: id,
label: (0, import_rjsf_utils18.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": (0, import_rjsf_utils18.ariaDescribedByIds)(id)
},
id
);
}
// src/TextareaWidget/TextareaWidget.tsx
var import_rjsf_utils19 = require("@snups/rjsf-utils");
var import_semantic_ui_react19 = require("semantic-ui-react");
var import_jsx_runtime23 = require("react/jsx-runtime");
function TextareaWidget(props) {
const {
id,
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__ */ (0, import_jsx_runtime23.jsx)(
import_semantic_ui_react19.Form.TextArea,
{
id,
name: id,
label: (0, import_rjsf_utils19.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": (0, import_rjsf_utils19.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: import_semantic_ui_react20.Form
};
}
var Theme_default = generateTheme();
// src/SemanticUIForm/SemanticUIForm.ts
function generateForm() {
return (0, import_rjsf_core2.withTheme)(generateTheme());
}
var SemanticUIForm_default = generateForm();
// src/index.ts
var index_default = SemanticUIForm_default;
//# sourceMappingURL=index.js.map