package Ġcomp Ċ Ċ import Ġkotlinx . html . js . on Blur Function Ċ import Ġkotlinx . html . js . onClick Function Ċ import Ġorg . w 3 c . dom . HTML InputElement Ċ import Ġorg . w 3 c . dom . events . Event Ċ import Ġreact .* Ċ import Ġreact . dom .* Ċ import Ġrest . Json Employee Ċ import Ġrest . Links Ċ Ċ class ĠEmployee List : ĠR Component < Employee List . Props , R State >() Ġ{ ĊĠĠĠ Ġvar Ġrefs : dynamic Ġ= Ġnull ĊĊĠĠĠ Ġinterface ĠProps : R Props { ĊĠĠĠĠĠĠĠ Ġvar Ġemployees : ĠList < Json Employee > ĊĠĠĠĠĠĠĠ Ġvar Ġon Navigate : Ġ( String )-> Unit ĊĠĠĠĠĠĠĠ Ġvar ĠonDelete : Ġ( Json Employee )-> Unit ĊĠĠĠĠĠĠĠ Ġvar ĠonUpdate PageSize : Ġ( Int )-> Unit ĊĠĠĠĠĠĠĠ Ġvar Ġlinks : ĠLinks ĊĠĠĠĠĠĠĠ Ġvar ĠpageSize : Int ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġinput Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs [" ref "] Ġ= Ġ" pageSize " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs [" defaultValue "] Ġ= Ġprops . pageSize Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĠonClick Function Ġ= Ġ:: handle Input Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ Ġon Blur Function Ġ= Ġ:: handle Input Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġtable Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtbody Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtr Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġth Ġ{ Ġ+" First ĠName " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġth Ġ{ Ġ+" Last ĠName " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġth Ġ{ Ġ+" Description " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġth Ġ{ Ġ+" delete " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . employees . map Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠEmployee ( it , Ġit ._ links . self ?. href Ġ?: Ġ""){ props . onDelete ( it )} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġval Ġl Ġ= Ġprops . links ĊĠĠĠĠĠĠĠ ĠarrayOf (" <<" Ġto Ġl . first , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ"< " Ġto Ġl . prev , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" >" Ġto Ġl . next , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" >> " Ġto Ġl . last ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. map {( str , Ġlink )-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif ( link != null ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbutton Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs { onClick Function Ġ= Ġ{ handle Nav ( it , Ġlink . href )}} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ str ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun Ġhandle Nav ( e : ĠEvent , Ġhref : String ){ ĊĠĠĠĠĠĠĠ Ġe . preventDefault () ĊĠĠĠĠĠĠĠ Ġprops . on Navigate ( href ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġfun Ġhandle Input ( e : ĠEvent ) Ġ{ ĊĠĠĠĠĠĠĠ Ġe . preventDefault () ĊĠĠĠĠĠĠĠ Ġval Ġinput Ġ= Ġfind DOM Node ( this . refs [" pageSize "]) Ġas ĠHTML InputElement ĊĠĠĠĠĠĠĠ Ġval Ġps Ġ= Ġinput . value . toInt () ĊĠĠĠĠĠĠĠ Ġif ("^ [ 0 - 9 ]+ $ ". to Regex (). matches ( input . value )) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġprops . on Update PageSize ( ps ) ĊĠĠĠĠĠĠĠ Ġelse ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput . value Ġ= Ġprops . pageSize . toString () ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠR Builder . Employee List ( employees : ĠList < Json Employee >, ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlinks : Links , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠpageSize : Int , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Navigate : Ġ( String )-> Unit , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonDelete : Ġ( Json Employee )-> Unit , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonUpdate PageSize : Ġ( Int )-> Unit ) ĊĠĠĠĠĠĠĠ Ġ= Ġchild ( Employee List :: class ) Ġ{ ĊĠĠĠ Ġattrs . employees Ġ= Ġemployees ĊĠĠĠ Ġattrs . links Ġ= Ġlinks ĊĠĠĠ Ġattrs . pageSize Ġ= ĠpageSize ĊĠĠĠ Ġattrs . on Navigate Ġ= Ġon Navigate ĊĠĠĠ Ġattrs . onDelete Ġ= ĠonDelete ĊĠĠĠ Ġattrs . on Update PageSize Ġ= ĠonUpdate PageSize Ċ } Ċ