frontend/ts/src/ui/layout.ts


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

import { h, Html } from 'lib/rx'
import * as icons from 'lib/icons'
import * as L from 'lib/loadable'

export function columns(xs: Array<Html>): Html {
    return h('div', { className: 'g-Columns' }, xs)
}

export function loading(): Html {
    return h('div',
        { className: 'g-Loading' },
        icons.spinner()
    )
}

export function error(message: string): Html {
    return h('div',
        { className: 'g-Error' },
        message
    )
}

export function loadable<T>(loadable: L.Loadable<T>, view: (t: T) => Html): Html {
    switch (loadable.key) {
        case 'INIT':
            return undefined
        case 'LOADING':
            return loading()
        case 'LOADED':
            return view(loadable.value)
        case 'FAILURE':
            return error(loadable.error)
    }
}