mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-08-02 09:02:15 +03:00
Full UI configuration (#22151)
* use react-jsonschema-form for UI config * don't use properties wrapper when generating config i18n json * configure for full i18n support * section fields * add descriptions to all fields for i18n * motion i18n * fix nullable fields * sanitize internal fields * add switches widgets and use friendly names * fix nullable schema entries * ensure update_topic is added to api calls this needs further backend implementation to work correctly * add global sections, camera config overrides, and reset button * i18n * add reset logic to global config view * tweaks * fix sections and live validation * fix validation for schema objects that can be null * generic and custom per-field validation * improve generic error validation messages * remove show advanced fields switch * tweaks * use shadcn theme * fix array field template * i18n tweaks * remove collapsible around root section * deep merge schema for advanced fields * add array field item template and fix ffmpeg section * add missing i18n keys * tweaks * comment out api call for testing * add config groups as a separate i18n namespace * add descriptions to all pydantic fields * make titles more concise * new titles as i18n * update i18n config generation script to use json schema * tweaks * tweaks * rebase * clean up * form tweaks * add wildcards and fix object filter fields * add field template for additionalproperties schema objects * improve typing * add section description from schema and clarify global vs camera level descriptions * separate and consolidate global and camera i18n namespaces * clean up now obsolete namespaces * tweaks * refactor sections and overrides * add ability to render components before and after fields * fix titles * chore(sections): remove legacy single-section components replaced by template * refactor configs to use individual files with a template * fix review description * apply hidden fields after ui schema * move util * remove unused i18n * clean up error messages * fix fast refresh * add custom validation and use it for ffmpeg input roles * update nav tree * remove unused * re-add override and modified indicators * mark pending changes and add confirmation dialog for resets * fix red unsaved dot * tweaks * add docs links, readonly keys, and restart required per field * add special case and comments for global motion section * add section form special cases * combine review sections * tweaks * add audio labels endpoint * add audio label switches and input to filter list * fix type * remove key from config when resetting to default/global * don't show description for new key/val fields * tweaks * spacing tweaks * add activity indicator and scrollbar tweaks * add docs to filter fields * wording changes * fix global ffmpeg section * add review classification zones to review form * add backend endpoint and frontend widget for ffmpeg presets and manual args * improve wording * hide descriptions for additional properties arrays * add warning log about incorrectly nested model config * spacing and language tweaks * fix i18n keys * networking section docs and description * small wording tweaks * add layout grid field * refactor with shared utilities * field order * add individual detectors to schema add detector titles and descriptions (docstrings in pydantic are used for descriptions) and add i18n keys to globals * clean up detectors section and i18n * don't save model config back to yaml when saving detectors * add full detectors config to api model dump works around the way we use detector plugins so we can have the full detector config for the frontend * add restart button to toast when restart is required * add ui option to remove inner cards * fix buttons * section tweaks * don't zoom into text on mobile * make buttons sticky at bottom of sections * small tweaks * highlight label of changed fields * add null to enum list when unwrapping * refactor to shared utils and add save all button * add undo all button * add RJSF to dictionary * consolidate utils * preserve form data when changing cameras * add mono fonts * add popover to show what fields will be saved * fix mobile menu not re-rendering with unsaved dots * tweaks * fix logger and env vars config section saving use escaped periods in keys to retain them in the config file (eg "frigate.embeddings") * add timezone widget * role map field with validation * fix validation for model section * add another hidden field * add footer message for required restart * use rjsf for notifications view * fix config saving * add replace rules field * default column layout and add field sizing * clean up field template * refactor profile settings to match rjsf forms * tweaks * refactor frigate+ view and make tweaks to sections * show frigate+ model info in detection model settings when using a frigate+ model * update restartRequired for all fields * fix restart fields * tweaks and add ability enable disabled cameras more backend changes required * require restart when enabling camera that is disabled in config * disable save when form is invalid * refactor ffmpeg section for readability * change label * clean up camera inputs fields * misc tweaks to ffmpeg section - add raw paths endpoint to ensure credentials get saved - restart required tooltip * maintenance settings tweaks * don't mutate with lodash * fix description re-rendering for nullable object fields * hide reindex field * update rjsf * add frigate+ description to settings pane * disable save all when any section is invalid * show translated field name in validation error pane * clean up * remove unused * fix genai merge * fix genai
This commit is contained in:
Josh Hawkins
@@ -0,0 +1,616 @@
|
||||
// Field Template - wraps each form field with label and description
|
||||
import { FieldTemplateProps, StrictRJSFSchema, UiSchema } from "@rjsf/utils";
|
||||
import {
|
||||
getTemplate,
|
||||
getUiOptions,
|
||||
ADDITIONAL_PROPERTY_FLAG,
|
||||
} from "@rjsf/utils";
|
||||
import { ComponentType, ReactNode } from "react";
|
||||
import { isValidElement } from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { isNullableUnionSchema } from "../fields/nullableUtils";
|
||||
import { getTranslatedLabel } from "@/utils/i18n";
|
||||
import { ConfigFormContext } from "@/types/configForm";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LuExternalLink } from "react-icons/lu";
|
||||
import { useDocDomain } from "@/hooks/use-doc-domain";
|
||||
import { requiresRestartForFieldPath } from "@/utils/configUtil";
|
||||
import RestartRequiredIndicator from "@/components/indicators/RestartRequiredIndicator";
|
||||
import {
|
||||
buildTranslationPath,
|
||||
getFilterObjectLabel,
|
||||
hasOverrideAtPath,
|
||||
humanizeKey,
|
||||
normalizeFieldValue,
|
||||
} from "../utils";
|
||||
import { normalizeOverridePath } from "../utils/overrides";
|
||||
import get from "lodash/get";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import { SPLIT_ROW_CLASS_NAME } from "@/components/card/SettingsGroupCard";
|
||||
|
||||
function _isArrayItemInAdditionalProperty(
|
||||
pathSegments: Array<string | number>,
|
||||
): boolean {
|
||||
// // If we find a numeric index, this is an array item
|
||||
for (let i = 0; i < pathSegments.length; i++) {
|
||||
const segment = pathSegments[i];
|
||||
if (typeof segment === "number") {
|
||||
// Consider any array item as being inside additional properties if it's not at the root level
|
||||
return i > 0;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
type FieldRenderSpec =
|
||||
| ReactNode
|
||||
| ComponentType<unknown>
|
||||
| {
|
||||
render: string;
|
||||
props?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export function FieldTemplate(props: FieldTemplateProps) {
|
||||
const {
|
||||
id,
|
||||
label,
|
||||
children,
|
||||
classNames,
|
||||
style,
|
||||
errors,
|
||||
help,
|
||||
description,
|
||||
hidden,
|
||||
required,
|
||||
displayLabel,
|
||||
schema,
|
||||
uiSchema,
|
||||
registry,
|
||||
fieldPathId,
|
||||
onKeyRename,
|
||||
onKeyRenameBlur,
|
||||
onRemoveProperty,
|
||||
rawDescription,
|
||||
rawErrors,
|
||||
formData: fieldFormData,
|
||||
disabled,
|
||||
readonly,
|
||||
} = props;
|
||||
|
||||
// Get i18n namespace from form context (passed through registry)
|
||||
const formContext = registry?.formContext as ConfigFormContext | undefined;
|
||||
const i18nNamespace = formContext?.i18nNamespace as string | undefined;
|
||||
const sectionI18nPrefix = formContext?.sectionI18nPrefix as
|
||||
| string
|
||||
| undefined;
|
||||
const isCameraLevel = formContext?.level === "camera";
|
||||
const effectiveNamespace = isCameraLevel ? "config/cameras" : i18nNamespace;
|
||||
const { t, i18n } = useTranslation([
|
||||
effectiveNamespace || i18nNamespace || "common",
|
||||
i18nNamespace || "common",
|
||||
"views/settings",
|
||||
]);
|
||||
const { getLocaleDocUrl } = useDocDomain();
|
||||
|
||||
if (hidden) {
|
||||
return <div className="hidden">{children}</div>;
|
||||
}
|
||||
|
||||
// Get UI options
|
||||
const uiOptionsFromSchema = uiSchema?.["ui:options"] || {};
|
||||
|
||||
const suppressDescription = uiOptionsFromSchema.suppressDescription === true;
|
||||
const showArrayItemDescription =
|
||||
uiOptionsFromSchema.showArrayItemDescription === true;
|
||||
|
||||
// Determine field characteristics
|
||||
const isBoolean =
|
||||
schema.type === "boolean" ||
|
||||
(Array.isArray(schema.type) && schema.type.includes("boolean"));
|
||||
const isObjectField =
|
||||
schema.type === "object" ||
|
||||
(Array.isArray(schema.type) && schema.type.includes("object"));
|
||||
const isNullableUnion = isNullableUnionSchema(schema as StrictRJSFSchema);
|
||||
const isAdditionalProperty = ADDITIONAL_PROPERTY_FLAG in schema;
|
||||
const suppressMultiSchema =
|
||||
(uiSchema?.["ui:options"] as UiSchema["ui:options"] | undefined)
|
||||
?.suppressMultiSchema === true;
|
||||
const schemaTypes = Array.isArray(schema.type)
|
||||
? schema.type
|
||||
: schema.type
|
||||
? [schema.type]
|
||||
: [];
|
||||
const nonNullSchemaTypes = schemaTypes.filter((type) => type !== "null");
|
||||
const isScalarValueField =
|
||||
nonNullSchemaTypes.length === 1 &&
|
||||
["string", "number", "integer"].includes(nonNullSchemaTypes[0]);
|
||||
|
||||
// Only suppress labels/descriptions if this is a multi-schema field (anyOf/oneOf) with suppressMultiSchema flag
|
||||
// This prevents duplicate labels while still showing the inner field's label
|
||||
const isMultiSchemaWrapper =
|
||||
(schema.anyOf || schema.oneOf) && (suppressMultiSchema || isNullableUnion);
|
||||
const useSplitBooleanLayout =
|
||||
uiOptionsFromSchema.splitLayout !== false &&
|
||||
isBoolean &&
|
||||
!isMultiSchemaWrapper &&
|
||||
!isObjectField &&
|
||||
!isAdditionalProperty;
|
||||
const forceSplitLayout = uiOptionsFromSchema.forceSplitLayout === true;
|
||||
const useSplitLayout =
|
||||
uiOptionsFromSchema.splitLayout !== false &&
|
||||
(isScalarValueField || forceSplitLayout) &&
|
||||
!isBoolean &&
|
||||
!isMultiSchemaWrapper &&
|
||||
!isObjectField &&
|
||||
!isAdditionalProperty;
|
||||
|
||||
// Get translation path for this field
|
||||
const pathSegments = fieldPathId.path.filter(
|
||||
(segment): segment is string => typeof segment === "string",
|
||||
);
|
||||
|
||||
// Check if this is an array item inside an object with additionalProperties
|
||||
const isArrayItemInAdditionalProp = _isArrayItemInAdditionalProperty(
|
||||
fieldPathId.path,
|
||||
);
|
||||
|
||||
// Conditions for showing descriptions/docs links
|
||||
const shouldShowDescription =
|
||||
!isMultiSchemaWrapper &&
|
||||
!isObjectField &&
|
||||
!isAdditionalProperty &&
|
||||
(!isArrayItemInAdditionalProp || showArrayItemDescription) &&
|
||||
!suppressDescription;
|
||||
|
||||
const translationPath = buildTranslationPath(
|
||||
pathSegments,
|
||||
sectionI18nPrefix,
|
||||
formContext,
|
||||
);
|
||||
const fieldPath = fieldPathId.path;
|
||||
const overrides = formContext?.overrides;
|
||||
const baselineFormData = formContext?.baselineFormData;
|
||||
const normalizedFieldPath = normalizeOverridePath(
|
||||
fieldPath,
|
||||
formContext?.formData,
|
||||
);
|
||||
let baselineValue = baselineFormData
|
||||
? get(baselineFormData, normalizedFieldPath)
|
||||
: undefined;
|
||||
if (baselineValue === undefined || baselineValue === null) {
|
||||
if (schema.default !== undefined && schema.default !== null) {
|
||||
baselineValue = schema.default;
|
||||
}
|
||||
}
|
||||
const isBaselineModified =
|
||||
baselineFormData !== undefined &&
|
||||
!isEqual(
|
||||
normalizeFieldValue(fieldFormData),
|
||||
normalizeFieldValue(baselineValue),
|
||||
);
|
||||
const isModified = baselineFormData
|
||||
? isBaselineModified
|
||||
: hasOverrideAtPath(overrides, fieldPath, formContext?.formData);
|
||||
const filterObjectLabel = getFilterObjectLabel(pathSegments);
|
||||
const translatedFilterObjectLabel = filterObjectLabel
|
||||
? getTranslatedLabel(filterObjectLabel, "object")
|
||||
: undefined;
|
||||
const fieldDocsKey = translationPath || pathSegments.join(".");
|
||||
const fieldDocsPath = fieldDocsKey
|
||||
? formContext?.fieldDocs?.[fieldDocsKey]
|
||||
: undefined;
|
||||
const fieldDocsUrl = fieldDocsPath
|
||||
? getLocaleDocUrl(fieldDocsPath)
|
||||
: undefined;
|
||||
const restartRequired = formContext?.restartRequired;
|
||||
const defaultRequiresRestart = formContext?.requiresRestart ?? true;
|
||||
const fieldRequiresRestart = requiresRestartForFieldPath(
|
||||
normalizedFieldPath,
|
||||
restartRequired,
|
||||
defaultRequiresRestart,
|
||||
);
|
||||
|
||||
// Use schema title/description as primary source (from JSON Schema)
|
||||
const schemaTitle = schema.title;
|
||||
const schemaDescription = schema.description;
|
||||
|
||||
// Try to get translated label, falling back to schema title, then RJSF label
|
||||
let finalLabel = label;
|
||||
if (effectiveNamespace && translationPath) {
|
||||
// Prefer camera-scoped translations when a section prefix is provided
|
||||
const prefixedTranslationKey =
|
||||
sectionI18nPrefix && !translationPath.startsWith(`${sectionI18nPrefix}.`)
|
||||
? `${sectionI18nPrefix}.${translationPath}.label`
|
||||
: undefined;
|
||||
const translationKey = `${translationPath}.label`;
|
||||
|
||||
if (
|
||||
prefixedTranslationKey &&
|
||||
i18n.exists(prefixedTranslationKey, { ns: effectiveNamespace })
|
||||
) {
|
||||
finalLabel = t(prefixedTranslationKey, { ns: effectiveNamespace });
|
||||
} else if (i18n.exists(translationKey, { ns: effectiveNamespace })) {
|
||||
finalLabel = t(translationKey, { ns: effectiveNamespace });
|
||||
} else if (schemaTitle) {
|
||||
finalLabel = schemaTitle;
|
||||
} else if (translatedFilterObjectLabel) {
|
||||
const filtersIndex = pathSegments.indexOf("filters");
|
||||
const isFilterObjectField =
|
||||
filtersIndex > -1 && pathSegments.length === filtersIndex + 2;
|
||||
|
||||
if (isFilterObjectField) {
|
||||
finalLabel = translatedFilterObjectLabel;
|
||||
} else {
|
||||
// Try to get translated field label, fall back to humanized
|
||||
const fieldName = pathSegments[pathSegments.length - 1] || "";
|
||||
let fieldLabel = schemaTitle;
|
||||
if (!fieldLabel) {
|
||||
const fieldTranslationKey = `${fieldName}.label`;
|
||||
const prefixedFieldTranslationKey =
|
||||
sectionI18nPrefix &&
|
||||
!fieldTranslationKey.startsWith(`${sectionI18nPrefix}.`)
|
||||
? `${sectionI18nPrefix}.${fieldTranslationKey}`
|
||||
: undefined;
|
||||
|
||||
if (
|
||||
prefixedFieldTranslationKey &&
|
||||
effectiveNamespace &&
|
||||
i18n.exists(prefixedFieldTranslationKey, { ns: effectiveNamespace })
|
||||
) {
|
||||
fieldLabel = t(prefixedFieldTranslationKey, {
|
||||
ns: effectiveNamespace,
|
||||
});
|
||||
} else if (
|
||||
effectiveNamespace &&
|
||||
i18n.exists(fieldTranslationKey, { ns: effectiveNamespace })
|
||||
) {
|
||||
fieldLabel = t(fieldTranslationKey, { ns: effectiveNamespace });
|
||||
} else {
|
||||
fieldLabel = humanizeKey(fieldName);
|
||||
}
|
||||
}
|
||||
if (fieldLabel) {
|
||||
finalLabel = t("configForm.filters.objectFieldLabel", {
|
||||
ns: "views/settings",
|
||||
field: fieldLabel,
|
||||
label: translatedFilterObjectLabel,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (schemaTitle) {
|
||||
finalLabel = schemaTitle;
|
||||
} else if (translatedFilterObjectLabel) {
|
||||
const filtersIndex = pathSegments.indexOf("filters");
|
||||
const isFilterObjectField =
|
||||
filtersIndex > -1 && pathSegments.length === filtersIndex + 2;
|
||||
if (isFilterObjectField) {
|
||||
finalLabel = translatedFilterObjectLabel;
|
||||
} else {
|
||||
// Try to get translated field label, fall back to humanized
|
||||
const fieldName = pathSegments[pathSegments.length - 1] || "";
|
||||
let fieldLabel = schemaTitle;
|
||||
if (!fieldLabel) {
|
||||
const fieldTranslationKey = `${fieldName}.label`;
|
||||
const prefixedFieldTranslationKey =
|
||||
sectionI18nPrefix &&
|
||||
!fieldTranslationKey.startsWith(`${sectionI18nPrefix}.`)
|
||||
? `${sectionI18nPrefix}.${fieldTranslationKey}`
|
||||
: undefined;
|
||||
|
||||
if (
|
||||
prefixedFieldTranslationKey &&
|
||||
effectiveNamespace &&
|
||||
i18n.exists(prefixedFieldTranslationKey, { ns: effectiveNamespace })
|
||||
) {
|
||||
fieldLabel = t(prefixedFieldTranslationKey, {
|
||||
ns: effectiveNamespace,
|
||||
});
|
||||
} else if (
|
||||
effectiveNamespace &&
|
||||
i18n.exists(fieldTranslationKey, { ns: effectiveNamespace })
|
||||
) {
|
||||
fieldLabel = t(fieldTranslationKey, { ns: effectiveNamespace });
|
||||
} else {
|
||||
fieldLabel = humanizeKey(fieldName);
|
||||
}
|
||||
}
|
||||
if (fieldLabel) {
|
||||
finalLabel = t("configForm.filters.objectFieldLabel", {
|
||||
ns: "views/settings",
|
||||
field: fieldLabel,
|
||||
label: translatedFilterObjectLabel,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Try to get translated description, falling back to schema description
|
||||
let finalDescription = description || "";
|
||||
if (effectiveNamespace && translationPath) {
|
||||
const prefixedDescriptionKey =
|
||||
sectionI18nPrefix && !translationPath.startsWith(`${sectionI18nPrefix}.`)
|
||||
? `${sectionI18nPrefix}.${translationPath}.description`
|
||||
: undefined;
|
||||
const descriptionKey = `${translationPath}.description`;
|
||||
if (
|
||||
prefixedDescriptionKey &&
|
||||
i18n.exists(prefixedDescriptionKey, { ns: effectiveNamespace })
|
||||
) {
|
||||
finalDescription = t(prefixedDescriptionKey, { ns: effectiveNamespace });
|
||||
} else if (i18n.exists(descriptionKey, { ns: effectiveNamespace })) {
|
||||
finalDescription = t(descriptionKey, { ns: effectiveNamespace });
|
||||
} else if (schemaDescription) {
|
||||
finalDescription = schemaDescription;
|
||||
}
|
||||
} else if (schemaDescription) {
|
||||
finalDescription = schemaDescription;
|
||||
}
|
||||
|
||||
const uiOptions = getUiOptions(uiSchema);
|
||||
const beforeSpec = uiSchema?.["ui:before"] as FieldRenderSpec | undefined;
|
||||
const afterSpec = uiSchema?.["ui:after"] as FieldRenderSpec | undefined;
|
||||
|
||||
const renderCustom = (spec: FieldRenderSpec | undefined) => {
|
||||
if (spec === undefined || spec === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isValidElement(spec) || typeof spec === "string") {
|
||||
return spec;
|
||||
}
|
||||
|
||||
if (typeof spec === "number") {
|
||||
return <span>{spec}</span>;
|
||||
}
|
||||
|
||||
if (typeof spec === "function") {
|
||||
const SpecComponent = spec as ComponentType<unknown>;
|
||||
return <SpecComponent />;
|
||||
}
|
||||
|
||||
if (typeof spec === "object" && "render" in spec) {
|
||||
const renderKey = spec.render;
|
||||
const renderers = formContext?.renderers;
|
||||
const RenderComponent = renderers?.[renderKey];
|
||||
if (RenderComponent) {
|
||||
return (
|
||||
<RenderComponent {...(spec.props ?? {})} formContext={formContext} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const beforeContent = renderCustom(beforeSpec);
|
||||
const afterContent = renderCustom(afterSpec);
|
||||
const WrapIfAdditionalTemplate = getTemplate(
|
||||
"WrapIfAdditionalTemplate",
|
||||
registry,
|
||||
uiOptions,
|
||||
);
|
||||
|
||||
const shouldRenderStandardLabel =
|
||||
displayLabel &&
|
||||
finalLabel &&
|
||||
!isBoolean &&
|
||||
!useSplitLayout &&
|
||||
!isMultiSchemaWrapper &&
|
||||
!isObjectField &&
|
||||
!isAdditionalProperty;
|
||||
|
||||
const shouldRenderSplitLabel =
|
||||
displayLabel &&
|
||||
finalLabel &&
|
||||
!isMultiSchemaWrapper &&
|
||||
!isObjectField &&
|
||||
!isAdditionalProperty;
|
||||
|
||||
const shouldRenderBooleanLabel = displayLabel && finalLabel;
|
||||
|
||||
const renderDocsLink = (className?: string) => {
|
||||
if (!fieldDocsUrl || !shouldShowDescription) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center text-xs text-primary-variant",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
to={fieldDocsUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline"
|
||||
>
|
||||
{t("readTheDocumentation", { ns: "common" })}
|
||||
<LuExternalLink className="ml-2 inline-flex size-3" />
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDescription = (className?: string) => {
|
||||
if (!finalDescription || !shouldShowDescription) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<p className={cn("text-xs text-muted-foreground", className)}>
|
||||
{finalDescription}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
const renderStandardLabel = () => {
|
||||
if (!shouldRenderStandardLabel) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className={cn(
|
||||
"text-sm font-medium",
|
||||
isModified && "text-danger",
|
||||
errors && errors.props?.errors?.length > 0 && "text-destructive",
|
||||
)}
|
||||
>
|
||||
{finalLabel}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
{fieldRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
|
||||
</Label>
|
||||
);
|
||||
};
|
||||
|
||||
const renderBooleanLabel = () => {
|
||||
if (!shouldRenderBooleanLabel) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className={cn("text-sm font-medium", isModified && "text-danger")}
|
||||
>
|
||||
{finalLabel}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
{fieldRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
|
||||
</Label>
|
||||
);
|
||||
};
|
||||
|
||||
const renderSplitLabel = () => {
|
||||
if (!shouldRenderSplitLabel) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className={cn(
|
||||
"text-sm font-medium",
|
||||
isModified && "text-danger",
|
||||
errors && errors.props?.errors?.length > 0 && "text-destructive",
|
||||
)}
|
||||
>
|
||||
{finalLabel}
|
||||
{required && <span className="ml-1 text-destructive">*</span>}
|
||||
{fieldRequiresRestart && <RestartRequiredIndicator className="ml-2" />}
|
||||
</Label>
|
||||
);
|
||||
};
|
||||
|
||||
const renderBooleanSplitLayout = () => (
|
||||
<>
|
||||
<div className="space-y-1.5 md:hidden">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
{renderBooleanLabel()}
|
||||
<div className="flex items-center gap-2">{children}</div>
|
||||
</div>
|
||||
{renderDescription()}
|
||||
{renderDocsLink()}
|
||||
</div>
|
||||
|
||||
<div className={cn("hidden md:grid", SPLIT_ROW_CLASS_NAME)}>
|
||||
<div className="space-y-0.5">
|
||||
{renderBooleanLabel()}
|
||||
{renderDescription()}
|
||||
{renderDocsLink()}
|
||||
</div>
|
||||
<div className="w-full max-w-2xl">
|
||||
<div className="flex items-center gap-2">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderBooleanInlineLayout = () => (
|
||||
<div className="flex w-full items-center justify-between gap-4">
|
||||
<div className="space-y-0.5">
|
||||
{renderBooleanLabel()}
|
||||
{renderDescription()}
|
||||
{renderDocsLink()}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderSplitValueLayout = () => (
|
||||
<div className={cn(SPLIT_ROW_CLASS_NAME, "space-y-1.5 md:space-y-3")}>
|
||||
<div className="space-y-1.5">
|
||||
{renderSplitLabel()}
|
||||
{renderDescription("hidden md:block")}
|
||||
{renderDocsLink("hidden md:flex")}
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-2xl space-y-1">
|
||||
{children}
|
||||
{renderDescription("md:hidden")}
|
||||
{renderDocsLink("md:hidden")}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderDefaultValueLayout = () => (
|
||||
<>
|
||||
{children}
|
||||
{renderDescription()}
|
||||
{renderDocsLink()}
|
||||
</>
|
||||
);
|
||||
|
||||
const renderFieldLayout = () => {
|
||||
if (isBoolean) {
|
||||
return useSplitBooleanLayout
|
||||
? renderBooleanSplitLayout()
|
||||
: renderBooleanInlineLayout();
|
||||
}
|
||||
|
||||
if (useSplitLayout) {
|
||||
return renderSplitValueLayout();
|
||||
}
|
||||
|
||||
return renderDefaultValueLayout();
|
||||
};
|
||||
|
||||
return (
|
||||
<WrapIfAdditionalTemplate
|
||||
classNames={classNames}
|
||||
style={style}
|
||||
disabled={disabled}
|
||||
id={id}
|
||||
label={label}
|
||||
displayLabel={displayLabel}
|
||||
onKeyRename={onKeyRename}
|
||||
onKeyRenameBlur={onKeyRenameBlur}
|
||||
onRemoveProperty={onRemoveProperty}
|
||||
rawDescription={rawDescription}
|
||||
readonly={readonly}
|
||||
required={required}
|
||||
schema={schema}
|
||||
uiSchema={uiSchema}
|
||||
registry={registry}
|
||||
rawErrors={rawErrors}
|
||||
hideError={false}
|
||||
>
|
||||
<div className="flex flex-col space-y-6">
|
||||
{beforeContent}
|
||||
<div className={cn("space-y-1")} data-field-id={translationPath}>
|
||||
{renderStandardLabel()}
|
||||
{renderFieldLayout()}
|
||||
|
||||
{errors}
|
||||
{help}
|
||||
</div>
|
||||
{afterContent}
|
||||
</div>
|
||||
</WrapIfAdditionalTemplate>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user