import Nano , { Component , Fragment } from 'nano-jsx' ; import { Application , ApplicationConfigState , ProjectItemImpl } from '../../Types' ; import { isNil } from 'licia' ; import { settingStore } from '../Store' ; import { compareChar } from '../../Utils' ; import { i18n , sentenceKey } from '../../i18n' ; import { iconMap } from '../../Icon' ; export interface BadgeInfo { readonly show : boolean ; readonly class : string ; readonly text : string ; } export interface CatalogueProps { applications : Array < Application < ProjectItemImpl > > ; } export interface CatalogueState { applicationGroupMap : { [ key ] : Array < Application < ProjectItemImpl > > ; } ; } export class Catalogue extends Component < CatalogueProps , CatalogueState > { store = settingStore . use ( ) ; constructor ( props ) { super ( props ) ; let map = { } ; for ( let app of this . props . applications ) { let group = app . group ; if ( isNil ( map [ group ] ) ) { map [ group ] = [ ] ; } map [ group ] . push ( app ) ; } this . state = { applicationGroupMap : map , } ; } override didMount ( ) { this . store . subscribe ( ( newState , prevState ) => { if ( newState . catalogueUpdate !== prevState . catalogueUpdate ) this . update ( ) ; } ) ; } override didUnmount ( ) { this . store . cancel ( ) ; } help ( ) { utools . shellOpenExternal ( 'https://yuanliao.info/d/3978' ) ; } survey ( ) { utools . ubrowser . goto ( 'https://wj.qq.com/s2/9430048/c591/' ) . run ( { width : 1200 , height : 800 } ) ; } home ( ) { utools . shellOpenExternal ( 'https://github.com/LanyuanXiaoyao-Studio/utools-recent-projects' ) ; } badge ( application ) { switch ( application . isFinishConfig ( ) ) { case ApplicationConfigState . empty : return { show : false , class : '' , text : '' } ; case ApplicationConfigState . undone : return { show : true , class : 'badge badge-unready' , text : i18n . t ( sentenceKey . unready ) } ; case ApplicationConfigState . done : return { show : true , class : 'badge badge-ready' , text : i18n . t ( sentenceKey . ready ) } ; case ApplicationConfigState . error : return { show : true , class : 'badge badge-error' , text : i18n . t ( sentenceKey . error ) } ; } } override render ( ) { return ( < Fragment > < ul class = "nav" > < li class = "nav-item" > < a href = "#information-card" > < i class = "icon icon-people" / > < b > { i18n . t ( sentenceKey . systemInformation ) } < /b> < /a> < /li> < li class = "nav-item" > < a href = "#application-setting-card" > < i class = "icon icon-edit" / > < b > { i18n . t ( sentenceKey . pluginSetting ) } < /b> < /a> < /li> < li class = "nav-item" > < a href = "#" onclick = { ( ) => this . help ( ) } > < i class = "icon icon-message" / > < b > { i18n . t ( sentenceKey . settingDocument ) } < /b> < /a> < /li> < li class = "nav-item" > < a href = "#" onclick = { ( ) => this . home ( ) } > < i class = "icon icon-link" / > < b > { i18n . t ( sentenceKey . sourceCodeRepository ) } < /b> < /a> < /li> < li class = "nav-item" > < a href = "#" onclick = { ( ) => this . survey ( ) } > < i class = "icon icon-emoji" / > < b > { i18n . t ( sentenceKey . requestMoreApplication ) } < /b> < /a> < /li> < div class = "divider" / > { Object . keys ( this . state . applicationGroupMap ) . sort ( ( a , b ) => compareChar ( a , b ) ) . map ( key => ( < li class = "nav-item" > < a > < b > { key } < /b> < /a> < ul class = "nav" > { this . state . applicationGroupMap [ key ] . map ( app => ( < li class = { 'nav-item ' + this . badge ( app ) . class } data - badge = { this . badge ( app ) . text } > < a href = { '#' + app . id } > < img class = "catalogue-app-icon" src = { iconMap [ app . icon ] ?? '' } alt = { app . name } / > < span class = "catalogue-app-name" > { app . name } < /span> < /a> < /li>))} < /ul> < /li>))} < /ul> < /Fragment>); } }