forked from teslamotors/informed
/
Relevant.js
74 lines (62 loc) · 1.84 KB
/
Relevant.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from 'react';
import useFormApi from '../hooks/useFormApi';
import useFormState from '../hooks/useFormState';
import FormFields from '../components/FormFields';
import { RelevantContext } from '../Context';
const Relevant = ({ when, children, relevant }) => {
const formState = useFormState();
const isRelevant = when(formState);
if (isRelevant && relevant) {
return (
<RelevantContext.Provider value={relevant}>
{children}
</RelevantContext.Provider>
);
}
if (isRelevant) {
return children;
}
return null;
};
export const RelevantFields = ({ relevant, children }) => {
// Grab the form api ( we need it to get the actual field name because might be in scope )
const { getOptions } = useFormApi();
// Grap the schema
const { schema } = getOptions();
// Find conditional from schema
const conditional = schema.allOf.find(c => c.relevant === relevant);
// Example then ( its a subschema )
// then: {
// properties: {
// spouse: {
// type: 'string',
// title: 'Spouse name',
// 'ui:control': 'input'
// }
// }
// }
const subSchema = conditional.then;
// Turn the if into a when function for informed
// Example if condition
// if: {
// properties: {
// married: { const: 'yes' }
// },
// required: ['married']
// },
const { properties: conditions } = conditional.if;
const when = ({ values }) => {
// Example key "married, Example condition: "{ const: 'yes' }"
return Object.keys(conditions).every(key => {
const condition = conditions[key];
// values.married === 'yes'
return values[key] === condition.const;
});
};
return (
<Relevant when={when} relevant={relevant}>
{children ? children : <FormFields schema={subSchema} />}
</Relevant>
);
};
export default Relevant;