How to use the mithril function in mithril

if (isNewMailActionAvailable() && ev.dataTransfer.files && ev.dataTransfer.files.length > 0) {
							Promise.join(
								this._newMail(),
								fileController.readLocalFiles(ev.dataTransfer.files),
								(ed, dataFiles) => {
									ed.attachFiles((dataFiles: any))
									m.redraw()
								}).catch(PermissionError, noOp)
						}
						// prevent in any case because firefox tries to open
						// dataTransfer as a URL otherwise.
						ev.stopPropagation()
						ev.preventDefault()
					}
				},
				m(this.viewSlider)
			)
		}

options.data && Object.keys(options.data).map(function(key) {
                    return m("li", { class : css.li },
                        ctrl.related ?
                            m("div", { class : css.relationship },
                                    m("a", {
                                        href  : ctrl.baseUrl + key,
                                        class : css.link
                                    }, ctrl.related[key].name),
                                m("div", { class : css.actions },
                                    m("button", {
                                            class   : css.button,
                                            onclick : ctrl.remove.bind(ctrl, key),
                                            title   : "Remove",
                                            value   : "Remove"
                                        },
                                        m.trust(removeIcon)
                                    )
                                )

view: function(ctrl, args) {
        return m('.p-block', {class: args.class || ''}, [
            m('.p-block-header', args.title),
            args.content
        ]);
    }
};

const createHeaderComponent = (opts = {}) => {
    const tall = opts.tall || false;
    const tallClass = opts.tallClass || '';
    const toolbarOpts = opts.toolbar;
    if (toolbarOpts) {
        toolbarOpts.class = [(toolbarOpts.class || null), tall ? tallClass : null].join(' ');
        if (!toolbarOpts.topBar) {
            toolbarOpts.topBar = m('div');
        }
        return m.component(toolbar, toolbarOpts);
    } else if (opts.content) {
        return m('div', {
            class: [
                CSS_CLASSES.header,
                (opts.class || null),
                (tall ? tallClass : null),
                (opts.animated ? CSS_CLASSES.headerAnimated : '')
            ].join(' ')
        }, opts.content);
    } else {
        return m('div', opts);
    }
};

this.view = () => {
			return m("", {
				onremove: () => {
					this._oldPasswordField.value("")
					this._newPasswordField.value("")
					this._repeatedPasswordField.value("")
				}
			}, [
				(validateOldPassword) ? m(this._oldPasswordField) : null,
				m(this._newPasswordField),
				(passwordInfoTextId) ? m(".small.mt-s", lang.get(passwordInfoTextId)) : null,
				(repeatPassword) ? m(this._repeatedPasswordField) : null
			])
		}
	}

onchange: (event) => vm.fields.online_days(event.target.value),
                                                                oninput: (event) => vm.fields.online_days(event.target.value),
                                                                value: vm.fields.online_days(),
                                                                class: vm.e.hasError('online_days') ? 'error' : false
                                                            })
                                                        ]),
                                                    ]),
                                                    m('.w-col.w-col-6.w-col-tiny-6.w-col-small-6', [
                                                        m('.text-field.medium.prefix-permalink', {
                                                            class: vm.e.hasError('online_days') ? 'error' : false
                                                        }, [
                                                            m('', 'dias')
                                                        ])
                                                    ])
                                                ]),
                                                m('.w-row', vm.e.inlineError('online_days'))
                                            ])
                                        ])
                                    ])
                            })
                        ])
                    ])
                ]),
                m(projectEditSaveBtn, { loading: state.loading, onSubmit: state.onSubmit })
            ])

        ]);
    }
};

href       : '#',
            class      : '',
            draggable  : this.isActive(index),
            ondragstart: (e) => this._drag.start(e, index),
            ondragend  : (e) => this._drag.end(e, index)
        }

        const tabName = vnode.attrs.title
        if (this.tabs && Object.keys(this.tabs[tabName]['___limit_error']).length > 0) {
            attrs['class'] += ' tab_title--out-of-limit--error'
        }
        else if (this.tabs && Object.keys(this.tabs[tabName]['___limit_warning']).length > 0) {
            attrs['class'] += ' tab_title--out-of-limit--warning'
        }

        return m('a', attrs, vnode.attrs.title)
    },

view: () => {
				return [
					m(nameField),
					m(mailAddressForm),
					m(passwordForm)
				]
			}
		}

}, coinResult ? 'Heads' : 'Tails'),
          m('button', {onclick: () => {
            vnode.attrs.game.coinflip()
          }}, 'Flip Coin'),
          m('p.hint', 'Only debaters can see the result of coin flips.')
        ])
      ],
      m('hr'),
      m('button', {onclick: () => {
        vnode.attrs.game.reset()
      }}, 'Reset Board & Roles')
    ])
    let play = m('canvas#play', {style: 'cursor: crosshair;'})
    if (pageWidth > MOBILE_MAX_WIDTH) {
      return m('div', [
        m('.col.gap-4.justify', [
          [short_description(true), m('hr')],
          m('.row.gap-4', [
            m('.tools-desktop', [tools]),
            m(pageWidth > TABLET_MAX_WIDTH ? '.row.gap-4' : '.col.gap-2.center', [
              m('.col.gap-2', [
                m('.col', [
                  m('.play-wrap-desktop.center.middle', [
                    play,
                    imageSelectorButton
                  ])
                ]),
                toolbar
              ]),
              m('.col.gap-3', [
                m('h2', 'Zoom'),
                m('.loupe-wrap-desktop', [

home.view = () => {
    const pageTitle = createTitle(TYPE_HOME);

    return m('div', [
        m('header.bar.bar-nav',
            m('h1.title', pageTitle)
        ),
        m('.content',
            m('ul.table-view', people.map((name) => {
                const personRoute = '/' + name;
                return m('li.table-view-cell media',
                    m('a', {
                        href: personRoute,
                        config: slide('in', m.component(person, {
                            name: name
                        }), TYPE_PERSON)
                    }, name)
                );
            })),
            github()
        )