Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 23:15:43 +01:00
Code Issues Packages Projects Releases Activity

Implement new form features

Browse Source 
Extends existing functionality, provides new fallbacks for translations and adds capabilities to manage array properties in configurations.

Committed-by: Florian Scholdei <florian.scholdei@cloudogu.com>
Co-authored-by: Florian Scholdei <florian.scholdei@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2023-03-07 11:29:10 +01:00
committed by SCM-Manager
parent 719f6c4c09
commit dda52b8400
27 changed files with 1066 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
scm-ui/ui-forms/src/input/ControlledInputField.tsx
View File

@@ -24,9 +24,10 @@
import React, { ComponentProps } from "react";
import { Controller, ControllerRenderProps, Path } from "react-hook-form";
import classNames from "classnames";
import { useScmFormContext } from "../ScmFormContext";
import InputField from "./InputField";
import { useScmFormPathContext } from "../FormPathContext";
import { prefixWithoutIndices } from "../helpers";
type Props<T extends Record<string, unknown>> = Omit<
ComponentProps<typeof InputField>,
@@ -42,32 +43,38 @@ function ControlledInputField<T extends Record<string, unknown>>({
label,
helpText,
rules,
className,
testId,
defaultValue,
readOnly,
...props
}: Props<T>) {
const { control, t, readOnly: formReadonly } = useScmFormContext();
const labelTranslation = label || t(`${name}.label`) || "";
const helpTextTranslation = helpText || t(`${name}.helpText`);
const { control, t, readOnly: formReadonly, formId } = useScmFormContext();
const formPathPrefix = useScmFormPathContext();
const nameWithPrefix = formPathPrefix ? `${formPathPrefix}.${name}` : name;
const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
return (
<Controller
control={control}
name={name}
name={nameWithPrefix}
rules={rules}
defaultValue={defaultValue as never}
render={({ field, fieldState }) => (
<InputField
className={classNames("column", className)}
readOnly={readOnly ?? formReadonly}
required={rules?.required as boolean}
{...props}
{...field}
form={formId}
label={labelTranslation}
helpText={helpTextTranslation}
error={fieldState.error ? fieldState.error.message || t(`${name}.error.${fieldState.error.type}`) : undefined}
testId={testId ?? `input-${name}`}
error={
fieldState.error
? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)
: undefined
}
testId={testId ?? `input-${nameWithPrefix}`}
/>
)}
/>