Skip to content

Commit

Permalink
chore: refactor withConditional to have multiple conditions types
Browse files Browse the repository at this point in the history
  • Loading branch information
devjoaov committed May 6, 2024
1 parent b06db60 commit b53ac0b
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions src/components/FormBuilder/fields.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ import { TextAreaFieldProps } from "./fields/TextAreaField";
import { FieldArrayFieldProps } from "./fields/FieldArray";
import { FieldComponentType } from "./buildForm";

export interface Conditions {
[key: string]: any;
allOf?: Conditions[];
anyOf?: Conditions[];
}
export interface BaseField {
component?: React.ComponentType<CommonFieldProps<BaseField>>;
conditions?: Array<{
name: string;
value: string | Array<string>;
}>;
conditions?: Conditions;
defaultValue?: string;
description?: string;
disabled?: boolean | ((data: FieldValues) => boolean);
Expand All @@ -44,28 +46,26 @@ export function withConditional<T extends BaseField>(
return (props: CommonFieldProps<T>) => {
const { form, field } = props;

const conditions = Array.isArray(field.conditions)
? field.conditions
: null;

if (!conditions) return <Component {...props} />;
const evaluateConditions = (conditions: Conditions): boolean => {
if (conditions.allOf) {
return conditions.allOf.every(evaluateConditions);
}
if (conditions.anyOf) {
return conditions.anyOf.some(evaluateConditions);
}

const watchedFields = conditions.map((condition) =>
condition
? form.watch(condition.name.replace("RESOURCE_ID", String(field.index)))
: null
);
if (Object.keys(conditions).length === 0) return true;

// determine if all conditions are satisfied
const shouldRender = conditions.every((condition, index) => {
if (!condition) return true; // No condition means always render
const key = Object.keys(conditions)[0];
const watchField = form.watch(
key.replace("RESOURCE_ID", String(field.index))
);
const values = conditions[key];
return values.includes(watchField);

Check failure on line 64 in src/components/FormBuilder/fields.tsx

View workflow job for this annotation

GitHub Actions / Run Type Check & Linters

tests/components/FormBuilder/withConditional.test.tsx > withConditional > renders the wrapped component when conditions are satisfied

TypeError: values.includes is not a function ❯ evaluateConditions src/components/FormBuilder/fields.tsx:64:21 ❯ src/components/FormBuilder/fields.tsx:68:26 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20

Check failure on line 64 in src/components/FormBuilder/fields.tsx

View workflow job for this annotation

GitHub Actions / Run Type Check & Linters

tests/components/FormBuilder/withConditional.test.tsx > withConditional > does not render the wrapped component when conditions are not satisfied

TypeError: values.includes is not a function ❯ evaluateConditions src/components/FormBuilder/fields.tsx:64:21 ❯ src/components/FormBuilder/fields.tsx:68:26 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20
};

const watchField = watchedFields[index];
if (condition.value instanceof Array) {
return condition.value.includes(watchField);
}
return watchField === condition.value;
});
const conditionRoot = field.conditions ? field.conditions : {};
const shouldRender = evaluateConditions(conditionRoot);

if (!shouldRender) return null;

Expand Down

0 comments on commit b53ac0b

Please sign in to comment.