Skip to content

Commit 0f86d8b

Browse files
rvsiarvsia
committed
feat(renderer): dynamic when attribute
- when in condition can be a function that gets the current field as the first argument
1 parent 4edf57d commit 0f86d8b

File tree

16 files changed

+968
-68
lines changed

16 files changed

+968
-68
lines changed

‎packages/pf3-component-mapper/src/tests/__snapshots__/input-addon.test.js.snap

Lines changed: 457 additions & 26 deletions
Large diffs are not rendered by default.

‎packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,24 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
188188
]
189189
}
190190
>
191-
<FormConditionWrapper>
191+
<FormConditionWrapper
192+
field={
193+
Object {
194+
"component": "checkbox",
195+
"name": "checkbox",
196+
"options": Array [
197+
Object {
198+
"label": "Foo",
199+
"value": 0,
200+
},
201+
Object {
202+
"label": "Bar",
203+
"value": 1,
204+
},
205+
],
206+
}
207+
}
208+
>
192209
<FormFieldHideWrapper
193210
hideField={false}
194211
>
@@ -990,7 +1007,29 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
9901007
]
9911008
}
9921009
>
993-
<FormConditionWrapper>
1010+
<FormConditionWrapper
1011+
field={
1012+
Object {
1013+
"component": "checkbox",
1014+
"name": "checkbox",
1015+
"options": Array [
1016+
Object {
1017+
"label": "Foo",
1018+
"value": 0,
1019+
},
1020+
Object {
1021+
"label": "Bar",
1022+
"value": 1,
1023+
},
1024+
],
1025+
"validate": Array [
1026+
Object {
1027+
"type": "required",
1028+
},
1029+
],
1030+
}
1031+
}
1032+
>
9941033
<FormFieldHideWrapper
9951034
hideField={false}
9961035
>

‎packages/pf3-component-mapper/src/tests/__snapshots__/wizard.test.js.snap

Lines changed: 98 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,27 @@ exports[`<Wizard /> should render Wizard correctly 1`] = `
271271
key="Wizard"
272272
name="Wizard"
273273
>
274-
<FormConditionWrapper>
274+
<FormConditionWrapper
275+
field={
276+
Object {
277+
"component": "wizard",
278+
"fields": Array [
279+
Object {
280+
"fields": Array [],
281+
"name": 1,
282+
"nextStep": "step-2",
283+
"title": "Step 1",
284+
},
285+
Object {
286+
"fields": Array [],
287+
"name": "step-2",
288+
"title": "Step 2",
289+
},
290+
],
291+
"name": "Wizard",
292+
}
293+
}
294+
>
275295
<FormFieldHideWrapper
276296
hideField={false}
277297
>
@@ -978,7 +998,32 @@ exports[`<Wizard /> should render Wizard with conditional steps correctly 1`] =
978998
key="Wizard"
979999
name="Wizard"
9801000
>
981-
<FormConditionWrapper>
1001+
<FormConditionWrapper
1002+
field={
1003+
Object {
1004+
"component": "wizard",
1005+
"fields": Array [
1006+
Object {
1007+
"fields": Array [],
1008+
"name": 1,
1009+
"nextStep": Object {
1010+
"stepMapper": Object {
1011+
"step": "step-2",
1012+
},
1013+
"when": "step",
1014+
},
1015+
"title": "Step 1",
1016+
},
1017+
Object {
1018+
"fields": Array [],
1019+
"name": "step-2",
1020+
"title": "Step 2",
1021+
},
1022+
],
1023+
"name": "Wizard",
1024+
}
1025+
}
1026+
>
9821027
<FormFieldHideWrapper
9831028
hideField={false}
9841029
>
@@ -1801,7 +1846,35 @@ exports[`<Wizard /> should render Wizard with stepsInfo correctly 1`] = `
18011846
]
18021847
}
18031848
>
1804-
<FormConditionWrapper>
1849+
<FormConditionWrapper
1850+
field={
1851+
Object {
1852+
"component": "wizard",
1853+
"fields": Array [
1854+
Object {
1855+
"fields": Array [],
1856+
"name": 1,
1857+
"nextStep": "step-2",
1858+
"title": "Step 1",
1859+
},
1860+
Object {
1861+
"fields": Array [],
1862+
"name": "step-2",
1863+
"title": "Step 2",
1864+
},
1865+
],
1866+
"name": "Wizard",
1867+
"stepsInfo": Array [
1868+
Object {
1869+
"title": "step1",
1870+
},
1871+
Object {
1872+
"title": "step2",
1873+
},
1874+
],
1875+
}
1876+
}
1877+
>
18051878
<FormFieldHideWrapper
18061879
hideField={false}
18071880
>
@@ -2600,7 +2673,28 @@ exports[`<Wizard /> should render Wizard with title correctly 1`] = `
26002673
name="Wizard"
26012674
title="Wizard title"
26022675
>
2603-
<FormConditionWrapper>
2676+
<FormConditionWrapper
2677+
field={
2678+
Object {
2679+
"component": "wizard",
2680+
"fields": Array [
2681+
Object {
2682+
"fields": Array [],
2683+
"name": 1,
2684+
"nextStep": "step-2",
2685+
"title": "Step 1",
2686+
},
2687+
Object {
2688+
"fields": Array [],
2689+
"name": "step-2",
2690+
"title": "Step 2",
2691+
},
2692+
],
2693+
"name": "Wizard",
2694+
"title": "Wizard title",
2695+
}
2696+
}
2697+
>
26042698
<FormFieldHideWrapper
26052699
hideField={false}
26062700
>

‎packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap

Lines changed: 79 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,37 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
343343
key="wizard"
344344
name="wizard"
345345
>
346-
<FormConditionWrapper>
346+
<FormConditionWrapper
347+
field={
348+
Object {
349+
"component": "wizard",
350+
"fields": Array [
351+
Object {
352+
"fields": Array [
353+
Object {
354+
"component": "text-field",
355+
"name": "foo-field",
356+
},
357+
],
358+
"name": "1",
359+
"nextStep": "2",
360+
"title": "foo-step",
361+
},
362+
Object {
363+
"fields": Array [
364+
Object {
365+
"component": "text-field",
366+
"name": "bar-field",
367+
},
368+
],
369+
"name": "2",
370+
"title": "bar-step",
371+
},
372+
],
373+
"name": "wizard",
374+
}
375+
}
376+
>
347377
<FormFieldHideWrapper
348378
hideField={false}
349379
>
@@ -751,7 +781,14 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
751781
key="foo-field"
752782
name="foo-field"
753783
>
754-
<FormConditionWrapper>
784+
<FormConditionWrapper
785+
field={
786+
Object {
787+
"component": "text-field",
788+
"name": "foo-field",
789+
}
790+
}
791+
>
755792
<FormFieldHideWrapper
756793
hideField={false}
757794
>
@@ -1398,7 +1435,38 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
13981435
key="wizard"
13991436
name="wizard"
14001437
>
1401-
<FormConditionWrapper>
1438+
<FormConditionWrapper
1439+
field={
1440+
Object {
1441+
"component": "wizard",
1442+
"fields": Array [
1443+
Object {
1444+
"fields": Array [
1445+
Object {
1446+
"component": "text-field",
1447+
"name": "foo-field",
1448+
},
1449+
],
1450+
"name": "1",
1451+
"nextStep": "2",
1452+
"title": "foo-step",
1453+
},
1454+
Object {
1455+
"fields": Array [
1456+
Object {
1457+
"component": "text-field",
1458+
"name": "bar-field",
1459+
},
1460+
],
1461+
"name": "2",
1462+
"title": "bar-step",
1463+
},
1464+
],
1465+
"inModal": true,
1466+
"name": "wizard",
1467+
}
1468+
}
1469+
>
14021470
<FormFieldHideWrapper
14031471
hideField={false}
14041472
>
@@ -2065,7 +2133,14 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
20652133
key="foo-field"
20662134
name="foo-field"
20672135
>
2068-
<FormConditionWrapper>
2136+
<FormConditionWrapper
2137+
field={
2138+
Object {
2139+
"component": "text-field",
2140+
"name": "foo-field",
2141+
}
2142+
}
2143+
>
20692144
<FormFieldHideWrapper
20702145
hideField={false}
20712146
>

‎packages/react-form-renderer/src/files/condition.d.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
import Field from "./field";
2+
13
export interface ActionResolution {
24
visible?: boolean;
35
set?: object; // TO DO specify this
46
}
57

8+
export type InnerWhenFunction = (currentField: string) => string;
9+
export type WhenFunction = (currentField: string) => string | string[] | InnerWhenFunction[];
10+
611
export interface ConditionProp {
7-
when?: string | string[];
12+
when?: string | string[] | WhenFunction | InnerWhenFunction[];
813
is?: any;
914
isNotEmpty?: boolean;
1015
isEmpty?: boolean;
@@ -28,6 +33,7 @@ export interface ConditionProps {
2833
values: object;
2934
children: React.ReactChildren;
3035
condition?: ConditionDefinition | ConditionDefinition[];
36+
field: Field;
3137
}
3238

3339
declare const Condition: React.ComponentType<ConditionProps>;

‎packages/react-form-renderer/src/files/default-schema-validator.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ const checkCondition = (condition, fieldName, isRoot) => {
103103
`);
104104
}
105105

106-
if (!(typeof condition.when === 'string' || Array.isArray(condition.when))) {
106+
if (!(typeof condition.when === 'string' || typeof condition.when === 'function' || Array.isArray(condition.when))) {
107107
throw new DefaultSchemaError(`
108108
Error occured in field definition with name: "${fieldName}".
109-
Field condition property "when" must be of type "string", ${typeof condition.when} received!].
109+
Field condition property "when" must be of type "string", "function" or "array", ${typeof condition.when} received!].
110110
`);
111111
}
112112

‎packages/react-form-renderer/src/files/parse-condition.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AnyObject } from "./common";
22
import { ConditionDefinition } from "./condition";
3+
import Field from "./field";
34

4-
export type ParseCondition = (condition: ConditionDefinition, values: AnyObject) => void;
5+
export type ParseCondition = (condition: ConditionDefinition, values: AnyObject, Field: Field) => void;
56
declare const parseCondition: ParseCondition
67
export default parseCondition;

0 commit comments

Comments
 (0)