2018-10-25 04:07:10 +02:00
|
|
|
const html = require('choo/html');
|
|
|
|
|
2019-01-09 15:02:11 +01:00
|
|
|
module.exports = function(selected, options, translate, changed, htmlId) {
|
2021-05-19 06:35:53 +02:00
|
|
|
function choose(event) {
|
|
|
|
if (event.target.value != selected) {
|
2022-04-12 15:58:58 +02:00
|
|
|
console.log(
|
|
|
|
'Selected new value from dropdown',
|
|
|
|
htmlId,
|
|
|
|
':',
|
|
|
|
selected,
|
|
|
|
'->',
|
|
|
|
event.target.value
|
|
|
|
);
|
2021-05-19 06:35:53 +02:00
|
|
|
changed(event.target.value);
|
|
|
|
}
|
|
|
|
}
|
2022-04-12 15:58:58 +02:00
|
|
|
|
2018-10-25 04:07:10 +02:00
|
|
|
return html`
|
2018-11-16 21:39:36 +01:00
|
|
|
<select
|
2019-01-09 15:02:11 +01:00
|
|
|
id="${htmlId}"
|
2022-04-12 15:58:58 +02:00
|
|
|
class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
|
2021-05-19 06:35:53 +02:00
|
|
|
data-selected="${selected}"
|
2018-11-16 21:39:36 +01:00
|
|
|
onchange="${choose}"
|
|
|
|
>
|
2019-01-24 21:31:20 +01:00
|
|
|
${options.map(
|
2021-05-19 06:35:53 +02:00
|
|
|
value =>
|
2019-01-24 21:31:20 +01:00
|
|
|
html`
|
2021-05-19 06:35:53 +02:00
|
|
|
<option value="${value}" ${value == selected ? 'selected' : ''}>
|
|
|
|
${translate(value)}
|
|
|
|
</option>
|
2019-01-24 21:31:20 +01:00
|
|
|
`
|
|
|
|
)}
|
2018-11-16 21:39:36 +01:00
|
|
|
</select>
|
|
|
|
`;
|
2018-10-25 04:07:10 +02:00
|
|
|
};
|