Merge pull request #290 from Hunter275/disabled-dynamicform
CI / build-and-package (push) Canceled after 0s
CI / build-and-package (push) Canceled after 0s
Rework disabled in DynamicForms
This commit is contained in:
@@ -16,13 +16,14 @@ import {
|
|||||||
} from "react-hook-form";
|
} from "react-hook-form";
|
||||||
|
|
||||||
interface DisabledBy<T> {
|
interface DisabledBy<T> {
|
||||||
fieldName: Path<T> | "always";
|
fieldName: Path<T>;
|
||||||
selector?: number;
|
selector?: number;
|
||||||
invert?: boolean;
|
invert?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface BaseFormBuilderProps<T> {
|
export interface BaseFormBuilderProps<T> {
|
||||||
name: Path<T>;
|
name: Path<T>;
|
||||||
|
disabled?: boolean;
|
||||||
disabledBy?: DisabledBy<T>[];
|
disabledBy?: DisabledBy<T>[];
|
||||||
label: string;
|
label: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
@@ -62,11 +63,14 @@ export function DynamicForm<T extends FieldValues>({
|
|||||||
defaultValues: defaultValues,
|
defaultValues: defaultValues,
|
||||||
});
|
});
|
||||||
|
|
||||||
const isDisabled = (disabledBy?: DisabledBy<T>[]): boolean => {
|
const isDisabled = (
|
||||||
|
disabledBy?: DisabledBy<T>[],
|
||||||
|
disabled?: boolean,
|
||||||
|
): boolean => {
|
||||||
|
if (disabled) return true;
|
||||||
if (!disabledBy) return false;
|
if (!disabledBy) return false;
|
||||||
|
|
||||||
return disabledBy.some((field) => {
|
return disabledBy.some((field) => {
|
||||||
if (field.fieldName === "always") return true;
|
|
||||||
const value = getValues(field.fieldName);
|
const value = getValues(field.fieldName);
|
||||||
if (value === "always") return true;
|
if (value === "always") return true;
|
||||||
if (typeof value === "boolean") return field.invert ? value : !value;
|
if (typeof value === "boolean") return field.invert ? value : !value;
|
||||||
@@ -111,7 +115,7 @@ export function DynamicForm<T extends FieldValues>({
|
|||||||
<DynamicFormField
|
<DynamicFormField
|
||||||
field={field}
|
field={field}
|
||||||
control={control}
|
control={control}
|
||||||
disabled={isDisabled(field.disabledBy)}
|
disabled={isDisabled(field.disabledBy, field.disabled)}
|
||||||
/>
|
/>
|
||||||
</FieldWrapper>
|
</FieldWrapper>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -158,9 +158,9 @@ export const Security = (): JSX.Element => {
|
|||||||
type: "text",
|
type: "text",
|
||||||
name: "publicKey",
|
name: "publicKey",
|
||||||
label: "Public Key",
|
label: "Public Key",
|
||||||
|
disabled: true,
|
||||||
description:
|
description:
|
||||||
"Sent out to other nodes on the mesh to allow them to compute a shared secret key",
|
"Sent out to other nodes on the mesh to allow them to compute a shared secret key",
|
||||||
disabledBy: [{ fieldName: "always" }],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user