Newer
Older
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
import m from 'mithril';
import '@material/select/dist/mdc.select.css';
import '@material/select/dist/mdc.select';
//@import 'material/select/dist/mdc.select.css';
import stream from 'mithril/stream';
import { Menu, List, ListTile } from 'polythene-mithril';
/**
* form element to select from multiple options.
*
* Copied from
* https://github.com/ArthurClemens/polythene/blob/master/docs/components/mithril/menu.md
*
* @class SelectOptions (name)
*/
export class SelectOptions {
oninit({ name }) {
this.isOpen = stream(false);
this.selectedIndex = stream(0);
// target has to be a unique ID, therefore we take the name of the assigned value
this.target = name;
}
view({ attrs: { name, options, onChange } }) {
const isOpen = this.isOpen();
const selectedIndex = this.selectedIndex();
return m('div', { style: { position: 'relative' } }, [
m(Menu, {
target: `#${this.target}`,
show: isOpen,
hideDelay: 0.240,
didHide: () => this.isOpen(false),
size: 5,
content: m(List, {
tiles: options.map((setting, index) =>
m(ListTile, {
title: setting,
ink: true,
hoverable: true,
events: {
onclick: () => {
this.selectedIndex(index);
onChange(name, options[index]);
},
},
})),
}),
}),
m(ListTile, {
id: this.target,
title: options[selectedIndex],
events: { onclick: () => this.isOpen(true) },
}),
]);
}
}
export class MDCSelect {
view({ attrs: { options, name, onchange = () => {}, ...kwargs } }) {
return m('div.mdc-select', { style: { height: '41px' } }, [
m('select.mdc-select__native-control', {
style: { 'padding-top': '10px' },
onchange: ({ target: { value } }) => { onchange(value); },
...kwargs,
}, options.map(option => m('option', { value: option }, option)),
),
m('label.mdc-floating-label', ''),
m('div.mdc-line-ripple'),
]);
}
}