nhsuk-decorated-components 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/decorate.js +18 -7
- package/package.json +1 -1
package/lib/decorate.js
CHANGED
|
@@ -27,7 +27,15 @@ export function decorate(params, keyPath, componentName) {
|
|
|
27
27
|
// Get stored value from session data, else local data
|
|
28
28
|
const storedValue = _.get(data, keyPath) || _.get(this.ctx, keyPath)
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
if (params.items) {
|
|
31
|
+
// If no ID explicity set, append `-items`
|
|
32
|
+
// This to prevent collision with the ID of the first item
|
|
33
|
+
params.id = params.id || `${keyPath.join('-')}-items`
|
|
34
|
+
} else {
|
|
35
|
+
// If no ID explicity set, convert keyPath to kebab-case
|
|
36
|
+
params.id = params.id || keyPath.join('-')
|
|
37
|
+
}
|
|
38
|
+
|
|
31
39
|
params.name = params.name
|
|
32
40
|
? params.name
|
|
33
41
|
: keyPath.map((s) => `[${s}]`).join('')
|
|
@@ -47,7 +55,7 @@ export function decorate(params, keyPath, componentName) {
|
|
|
47
55
|
}
|
|
48
56
|
|
|
49
57
|
if (params.items) {
|
|
50
|
-
params.idPrefix = params.
|
|
58
|
+
params.idPrefix = params.idPrefix || keyPath.join('-')
|
|
51
59
|
params.items = params.items
|
|
52
60
|
.filter((i) => i)
|
|
53
61
|
.map((item) => {
|
|
@@ -69,25 +77,28 @@ export function decorate(params, keyPath, componentName) {
|
|
|
69
77
|
delete data.validations[params.name] // 1.
|
|
70
78
|
}
|
|
71
79
|
|
|
80
|
+
// Remove appended `-items`, as not needed for date input components
|
|
81
|
+
const dateIdPrefix = params.id.replace(/-items$/, '')
|
|
82
|
+
|
|
72
83
|
// Update date input items based on `decorate` value
|
|
73
84
|
switch (item.decorate) {
|
|
74
85
|
case 'day':
|
|
75
86
|
item.classes = item.classes || 'nhsuk-input--width-2'
|
|
76
|
-
item.id = `${
|
|
87
|
+
item.id = `${dateIdPrefix}-day`
|
|
77
88
|
item.name = `${params.name}[day]`
|
|
78
89
|
item.label = item.label || 'Day'
|
|
79
90
|
item.value = storedValue?.day
|
|
80
91
|
break
|
|
81
92
|
case 'month':
|
|
82
93
|
item.classes = item.classes || 'nhsuk-input--width-2'
|
|
83
|
-
item.id = `${
|
|
94
|
+
item.id = `${dateIdPrefix}-month`
|
|
84
95
|
item.name = `${params.name}[month]`
|
|
85
96
|
item.label = item.label || 'Month'
|
|
86
97
|
item.value = storedValue?.month
|
|
87
98
|
break
|
|
88
99
|
case 'year':
|
|
89
100
|
item.classes = item.classes || 'nhsuk-input--width-4'
|
|
90
|
-
item.id = `${
|
|
101
|
+
item.id = `${dateIdPrefix}-year`
|
|
91
102
|
item.name = `${params.name}[year]`
|
|
92
103
|
item.label = item.label || 'Year'
|
|
93
104
|
item.value = storedValue?.year
|
|
@@ -113,13 +124,13 @@ export function decorate(params, keyPath, componentName) {
|
|
|
113
124
|
selectedValue = item.selected
|
|
114
125
|
} else if (Array.isArray(storedValue)) {
|
|
115
126
|
// Stored value is an array, check it exists in the array
|
|
116
|
-
if (storedValue.indexOf(item.value) !== -1) {
|
|
127
|
+
if (storedValue.indexOf(String(item.value)) !== -1) {
|
|
117
128
|
checkedValue = 'checked'
|
|
118
129
|
selectedValue = 'selected'
|
|
119
130
|
}
|
|
120
131
|
} else {
|
|
121
132
|
// Stored value is a simple value, check it matches
|
|
122
|
-
if (storedValue === item.value) {
|
|
133
|
+
if (storedValue === String(item.value)) {
|
|
123
134
|
checkedValue = 'checked'
|
|
124
135
|
selectedValue = 'selected'
|
|
125
136
|
}
|