How to use maka - 10 common examples

import "codemirror/theme/material.css"
import "codemirror/lib/codemirror.css"
import './style.less'
const name = pkgJson.name



registerComponent('CodeMirror', CodeMirror)

const state = {
    data: {
    }
}

@actionMixin('base')
class action {
    constructor(option) {
        Object.assign(this, option.mixins)
    }

    onChange = (e) => {
        this.base.setState({ 'data.input': e.target.value })
        console.log(this.base.getState('data.input'))
    }
}

const view = {
    component: 'div',
    className: 'code-mirror',
    children: [{
        component: 'CodeMirror',

import pkgJson from './package.json'
import { actionMixin } from 'maka'
import './style.less'

const name = pkgJson.name

const state = {
    data: {
        content: 'hello ',
        input: ''
    }
}

@actionMixin('base')
class action {
    constructor(option) {
        Object.assign(this, option.mixins)
    }

    onChange = (e) => {
        this.base.setState({ 'data.input': e.target.value })
        console.log(this.base.getState('data.input'))
    }
}

const view = {
    component: 'div',
    className:'home-chart',
    children: [{
        component: 'Echarts',

import { actionMixin, fetch, getAction, navigate } from 'maka'

console.log(getAction('numberHelper'))

@actionMixin('base', 'toast', 'numberHelper')
export default class action {
    constructor(option) {
        Object.assign(this, option.mixins)
    }

    signOut = () => {
        fetch.clearAccessToken()
        navigate.redirect('/sign-in')
    }

    setting = () => {
        this.toast.info('你就告诉我啥不能做吧 !!!', 1)
    }

    setperson = async () => { 
        var openPage = this.base.context.get('openPage')

import { actionMixin, fetch } from 'maka'
import React from 'react'

@actionMixin('base', 'lodash', 'moment', 'modal', 'message')
export default class action {
    constructor(option) {
        Object.assign(this, option.mixins)
    }

    onInit = () => {
        if (this.component.props.setOkListener)
            this.component.props.setOkListener(this.onOk)
        this.load()
    }

    load = async () => {
        if (this.component.props.customerId || this.component.props.customerId == 0) {
            var resp = await fetch.post('/v1/customer/findById', { id: this.component.props.customerId })
            this.base.setState({ 'data.form': resp })
        }

import { actionMixin, fetch } from 'maka'
import React from 'react'

@actionMixin('base', 'lodash', 'moment', 'modal', 'message')
export default class action {
    constructor(option) {
        Object.assign(this, option.mixins)
    }
    

    onInit = () => {
        if (this.component.props.setOkListener)
            this.component.props.setOkListener(this.onOk)
        this.load()
    }

    load = async () => {
        if (this.component.props.personId || this.component.props.personId == 0) {
            var resp = await fetch.post('/v1/person/findById', { id: this.component.props.personId })
            this.base.setState({ 'data.form': resp })

import { actionMixin, fetch, createAppElement } from 'maka'

@actionMixin('base', 'lodash', 'moment', 'tableHelper', 'modal', 'message')
export default class action {
    constructor(option) {
        Object.assign(this, option.mixins)
        this.searchReload = this.lodash.debounce(this.searchReload, 200)
    }

    onInit = () => {
        //设置监听tab激活事件
        this.component.props.addTabActiveListener 
            && this.component.props.addTabActiveListener(this.component.props.appFullName, this.tabActive)


        const pagination = this.base.gs('data.pagination')
        this.load(pagination)
    }

import { actionMixin, fetch } from 'maka'
import React from 'react'

@actionMixin('base', 'lodash', 'moment', 'modal', 'message')
export default class action {
    constructor(option) {
        Object.assign(this, option.mixins)
    }

    onInit = () => {
        if (this.component.props.setOkListener)
            this.component.props.setOkListener(this.onOk)
        this.load()
    }

    load = async () => {
        if (this.component.props.customerGroupId || this.component.props.customerGroupId == 0) {
            var resp = await fetch.post('/v1/customer/group/findById', { id: this.component.props.customerGroupId })
            this.base.setState({ 'data.form': resp })
        }

import { actionMixin, fetch, createAppElement } from 'maka'

@actionMixin('base', 'lodash', 'moment', 'tableHelper', 'treeHelper', 'modal', 'message')
export default class action {
    constructor(option) {
        Object.assign(this, option.mixins)
        this.searchReload = this.lodash.debounce(this.searchReload, 200)
    }

    onInit = () => {
        const pagination = this.base.gs('data.pagination')
        this.load('all', pagination)
    }

    load = async (type, pagination, filter = { search: '' }) => {
        var tree, list, customers
        switch (type) {
            case 'all':
                tree = (await fetch.post('/v1/customer/group/queryAll', {})) || []

async function beforeRegister() {
    await load(['antd', 'fixed-data-table'])
    registerComponent('ctrl', components)
    registerTemplate('tpl', templates)
    registerAction('moment', moment, true)
    registerAction('lodash', lodash, true)
    registerAction('modal', components.Modal, true)
    registerAction('message', getComponent('antd.message'), true)
    registerAction('notification', getComponent('antd.notification'), true)

    Object.keys(actions).forEach(key => {
        registerAction(key, actions[key], key == 'numberHelper')
    })

}

async function beforeRegister() {
    await load(['antd'])
}