-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.js
86 lines (75 loc) · 2.15 KB
/
index.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
75
76
77
78
79
80
81
82
83
84
85
86
import {
DataList,
DataListItem,
DataListKey,
DataListValue,
Heading2,
} from '@utrecht/component-library-react';
import PropTypes from 'prop-types';
import React from 'react';
import FAIcon from 'components/FAIcon';
import Link from 'components/Link';
import {DEBUG} from 'utils';
import ComponentValueDisplay from './ComponentValueDisplay';
const LabelValueRow = ({name, value, component}) => {
if (!name) {
return null;
}
return (
<DataListItem className={`utrecht-data-list__item--openforms-${component.type}`}>
<DataListKey>{name}</DataListKey>
<DataListValue notranslate multiline={['textarea'].includes(component.type)}>
<ComponentValueDisplay value={value} component={component} />
</DataListValue>
</DataListItem>
);
};
LabelValueRow.propTypes = {
name: PropTypes.node.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.object,
PropTypes.array,
PropTypes.number,
PropTypes.bool,
]),
component: PropTypes.object.isRequired,
};
const FormStepSummary = ({editUrl, slug, name, data, editStepText = ''}) => {
if (!editUrl) {
if (DEBUG && !slug) console.error('Provide either a step slug or editUrl prop');
editUrl = `/stap/${slug}`;
}
return (
<div className="openforms-summary">
<div className="openforms-summary__header">
<Heading2 className="utrecht-heading-2--openforms-summary-step-name">{name}</Heading2>
{editStepText && (
<Link to={editUrl}>
<FAIcon icon="pen-to-square" />
{editStepText}
</Link>
)}
</div>
<DataList className="utrecht-data-list--openforms">
{data.map((item, index) => (
<LabelValueRow
key={index}
name={item.name}
value={item.value}
component={item.component}
/>
))}
</DataList>
</div>
);
};
FormStepSummary.propTypes = {
name: PropTypes.node.isRequired,
editUrl: PropTypes.string,
slug: PropTypes.string,
editStepText: PropTypes.node,
data: PropTypes.arrayOf(PropTypes.object).isRequired,
};
export {LabelValueRow};
export default FormStepSummary;