import Nano , { Component , Fragment } from 'nano-jsx' ; import { CustomCss , SpectreCss , SpectreIconCss } from './css' ; import { ApplicationImpl , Platform , ProjectItemImpl } from '../Types' ; import { SettingCard } from './components/SettingCard' ; import { Catalogue } from './components/Catalogue' ; import { Announcement } from './components/Announcement' ; import { contain } from 'licia' ; import { InformationCard } from './components/InformationCard' ; import { compareChar , isDevelopment , platformFromUtools } from '../Utils' ; import { ApplicationSettingCard } from './components/application-settings/ApplicationSettingCard' ; import { Context } from '../Context' ; import { applications } from '../Applications' ; import { i18n , sentenceKey } from '../i18n' ; interface RootProps { context : Context ; } interface RootState { applications : Array < ApplicationImpl < ProjectItemImpl > > ; platform : Platform ; } class Root extends Component < RootProps , RootState > { constructor ( props ) { super ( props ) ; let platform = platformFromUtools ( ) ; this . state = { applications : applications . filter ( app => contain ( app . platform , platform ) ) , platform : platform , } ; this . state . applications . forEach ( app => app . update ( utools . getNativeId ( ) ) ) ; } override render ( ) { return ( < Fragment > < head > < title /> < meta name = "viewport" content = "width=device-width, initial-scale=1" / > { } < style class = "custom" > { SpectreCss } < /style> < style class = "custom" > { SpectreIconCss } < /style> < style class = "custom" > { CustomCss } < /style> { } < script src = "index.js" / > < /head> < body > { } < div id = "root" / > < div class = { utools . isDarkColors ( ) ? 'container dark' : 'container' } > < div class = "columns" > < div class = "column col-3" > { } < Catalogue applications = { this . state . applications } / > < /div> < div class = "column col-9" > { isDevelopment ( ) ? < Fragment > < div class = "text-error text-center" > < b > { i18n . t ( sentenceKey . devTip ) } < /b> < /div> < /Fragment> : < Fragment />} { } { } < InformationCard platform = { this . state . platform } /> < ApplicationSettingCard context = { this . props . context } / > { } { this . state . applications . sort ( ( a1 , a2 ) => compareChar ( a1 . group , a2 . group ) ) . map ( app => ( < SettingCard context = { this . props . context } application = { app } / > ) ) } < div class = "gap" / > < div class = "gap" / > < /div> < /div> < Announcement / > < /div> < /body> < /Fragment>); } } export class ApplicationUI { render ( context , root ) { Nano . render ( < Root context = { context } / > , root ) ; } }