How to use mithril - 10 common examples

onclick: () => Snackbar.show({
                  /* note the Snackbar component is below the other elements in the app */
                  title: "Hello"
                })
              }
            })
          )
        ]
      ),
      m(Dialog),
      m(Snackbar),
      m(Notification)
    ])
};

m.mount(document.querySelector("#root"), App);

oninit: vnode => {
    const tab = stream({});
    Object.assign(vnode.state, {
      tab,
      redrawOnUpdate: stream.merge([tab]) // for React
    });
  },
  view: vnode => {

oninit: vnode => {
    const value = stream(attrs.defaultValue || attrs.value || 0);
    Object.assign(vnode.state, {
      value,
      redrawOnUpdate: stream.merge([value]) // for React
    });
  },
  view: vnode => {

oninit: vnode => {
    const show = stream(false);
    Object.assign(vnode.state, {
      show,
      redrawOnUpdate: stream.merge([show]) // for React
    });
  },
  view: vnode => {

oninit: vnode => {
      const show = stream(false);
      Object.assign(vnode.state, {
        show,
        redrawOnUpdate: stream.merge([show]) // for React
      });
    },
    view: vnode => {

oninit: vnode => {
    const show = stream(false);
    Object.assign(vnode.state, {
      show,
      redrawOnUpdate: stream.merge([show]) // for React
    });
  },
  view: vnode => {

oninit: vnode => {
    const show = stream(false);
    const selectedIndex = stream(0);
    Object.assign(vnode.state, {
      show,
      selectedIndex,
      redrawOnUpdate: stream.merge([show]), // for React
      id: "id-" + vnode.attrs.id || new Date().getTime() + Math.floor(Math.random() * 1000)
    });
  },
  view: ({ state, attrs }) => {

} else if (e.key === "Enter") {
          e.preventDefault();
          selectedValue(matches()[index]);
        } else if (e.key === "Escape" || e.key === "Esc") { // "Esc" for IE11
          e.preventDefault();
          selectedListIndex(-1);
        }
      };

      Object.assign(vnode.state, {
        handleKey,
        selectedListIndex,
        matches,
        searchValue,
        selectedValue,
        redrawOnUpdate: stream.merge([searchValue, selectedListIndex]) // for React
      });
    },
    view: vnode => {

const percentage = stream(0);
    const step = timestamp => {
      if (!start()) start(timestamp);
      const progress = timestamp - start();
      percentage(Math.min(1, 1.0 / STEP_DURATION * progress));
      if (h.redraw) h.redraw(); // update Mithril
      if (progress < STEP_DURATION) {
        window.requestAnimationFrame(step);
      }
    };
    Object.assign(vnode.state, {
      start,
      show,
      step,
      percentage,
      redrawOnUpdate: stream.merge([show, start, percentage]) // update React
    });
  },
  view: vnode => {

async function uploadDataset() {

    if (datasetPreferences.upload.name.length === 0) return;
    if (datasetPreferences.upload.files.length === 0) return;
    let body = new FormData();
    body.append('metadata', JSON.stringify(Object.assign({}, datasetPreferences.upload, {files: undefined})));
    datasetPreferences.upload.files.forEach(file => body.append('files', file));

    // initial upload
    let response = await m.request({
        method: "POST",
        url: "user-workspaces/upload-dataset",
        body,
    });


    if (response.success) {
        location.reload();  // Restart!  Should load the new dataset
        return;
    } else {
        // clear files list
        // MS: commented this out... if it fails, shouldn't we keep the state so the user can fix it?
        // datasetPreferences.upload.files = [];
    }

    console.log('Upload dataset response: ' + response.message);