blob: 0c1824215a3cd6dcc7e0a91131997913de3914e2 (
plain)
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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import React, { useEffect } from "react";
import { Localized } from "./MSLocalized";
export const MultiSelect = props => {
let handleChange = event => {
if (event.currentTarget.checked) {
props.setActiveMultiSelect([
...props.activeMultiSelect,
event.currentTarget.value,
]);
} else {
props.setActiveMultiSelect(
props.activeMultiSelect.filter(id => id !== event.currentTarget.value)
);
}
};
let { data } = props.content.tiles;
// When screen renders for first time, update state
// with checkbox ids that has defaultvalue true
useEffect(() => {
if (!props.activeMultiSelect) {
props.setActiveMultiSelect(
data.map(item => item.defaultValue && item.id).filter(item => !!item)
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div className="multi-select-container">
{props.content.tiles.data.map(({ label, id }) => (
<div key={id + label} className="checkbox-container multi-select-item">
<input
type="checkbox"
id={id}
value={id}
checked={props.activeMultiSelect?.includes(id)}
onChange={handleChange}
/>
<Localized text={label}>
<label htmlFor={id}></label>
</Localized>
</div>
))}
</div>
);
};
|
