add selection item and configure webpack to load css form material web components

package.json

@@ -16,6 +16,7 @@
   "author": "Hermann Blum et al",
   "dependencies": {
     "@material/drawer": "^0.30.0",
+    "@material/select": "^0.35.1",
     "ajv": "^5.5.0",
     "axios": "^0.17.1",
     "client-oauth2": "^4.2.0",
@@ -33,7 +34,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "compression-webpack-plugin": "^1.1.11",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.11",
     "eslint": "^4.10.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-loader": "^1.9.0",

src/views/selectOption.js

+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'),
+    ]);
+  }
+}

webpack.config.js

@@ -71,7 +71,7 @@ const config = {
         ],
       },
       {
-        test: /node_modules\/announcetool.*\.(html|css)$/,
+        test: /\.(html)$/,
         use: [
           {
             loader: 'file-loader',
@@ -81,6 +81,10 @@ const config = {
           },
         ],
       },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },