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) {
|
2018-10-25 04:07:10 +02:00
|
|
|
let x = selected;
|
|
|
|
|
|
|
|
return html`
|
2018-11-16 21:39:36 +01:00
|
|
|
<select
|
2019-01-09 15:02:11 +01:00
|
|
|
id="${htmlId}"
|
2018-11-16 21:39:36 +01:00
|
|
|
class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8"
|
|
|
|
onchange="${choose}"
|
|
|
|
>
|
|
|
|
${
|
|
|
|
options.map(
|
|
|
|
i =>
|
|
|
|
html`
|
|
|
|
<option value="${i}" ${i === selected ? 'selected' : ''}
|
|
|
|
>${translate(i)}</option
|
|
|
|
>
|
|
|
|
`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
</select>
|
|
|
|
`;
|
2018-10-25 04:07:10 +02:00
|
|
|
|
|
|
|
function choose(event) {
|
|
|
|
const target = event.target;
|
|
|
|
const value = +target.value;
|
|
|
|
|
|
|
|
if (x !== value) {
|
|
|
|
x = value;
|
|
|
|
changed(value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|