package Ġsamples . tabs Ċ Ċ import Ġan td . button . button Ċ import Ġan td . tabs .* Ċ import Ġkotlin ext . js .* Ċ import Ġreact .* Ċ import Ġreact . dom . div Ċ import Ġreact . dom . js Style Ċ import Ġstyled .* Ċ Ċ interface ĠCustom Add Trigger Demo State Ġ: ĠR State Ġ{ ĊĠĠĠ Ġvar Ġactive Key : ĠString ĊĠĠĠ Ġvar Ġpan es : ĠArray < Any > Ċ } Ċ Ċ class ĠCustom Add Trigger Demo Ġ: ĠR Component < R Props , ĠCustom Add Trigger Demo State >() Ġ{ ĊĠĠĠ Ġprivate Ġvar Ġnew TabIndex Ġ= Ġ 0 ĊĊĠĠĠ Ġprivate Ġval ĠhandleChange : Ġ( String ) Ġ-> ĠUnit Ġ= Ġ{ Ġkey Ġ-> ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġactive Key Ġ= Ġkey ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġval Ġhandle Edit : Ġ( Any , ĠTabs Edit Action ) Ġ-> ĠUnit Ġ= Ġ{ Ġtarget Key , Ġaction Ġ-> ĊĠĠĠĠĠĠĠ Ġwhen Ġ( action ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ" remove " Ġ-> Ġremove ( target Key . unsafe Cast < String >()) ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġval Ġadd : Ġ() Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġnew Key Ġ= Ġ" new Tab ${ new TabIndex ++ }" ĊĊĠĠĠĠĠĠĠ Ġval Ġtab Pan es Ġ= Ġstate . pan es . plus ( js Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" New ĠTab " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcontent Ġ= Ġ" New ĠTab ĠP ane " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġnew Key ĊĠĠĠĠĠĠĠ Ġ}. unsafe Cast < Any >()) ĊĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġpan es Ġ= Ġtab Pan es ĊĠĠĠĠĠĠĠĠĠĠĠ Ġactive Key Ġ= Ġnew Key ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġprivate Ġval Ġremove : Ġ( String ) Ġ-> ĠUnit Ġ= Ġ{ Ġtarget Key Ġ-> ĊĠĠĠĠĠĠĠ Ġvar Ġkey Ġ= Ġstate . active Key ĊĠĠĠĠĠĠĠ Ġvar Ġlast Index Ġ= Ġ 0 ĊĊĠĠĠĠĠĠĠ Ġstate . pan es . forEach Indexed Ġ{ Ġi , Ġpane Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( pane . as Dynamic (). key . unsafe Cast < String >() Ġ== Ġtarget Key ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlast Index Ġ= Ġi Ġ+ Ġ 1 ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġval Ġtab Pan es Ġ= Ġstate . pan es . filter Ġ{ Ġpane Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġpane . as Dynamic (). key . unsafe Cast < String >() Ġ!= Ġtarget Key ĊĠĠĠĠĠĠĠ Ġ}. to Typed Array () ĊĊĠĠĠĠĠĠĠ Ġif Ġ( tab Pan es . isNotEmpty () Ġ&& Ġkey Ġ== Ġtarget Key ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġif Ġ( last Index Ġ== Ġ 0 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtab Pan es [ last Index ]. as Dynamic (). key . unsafe Cast < String >() ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtab Pan es [ 0 ]. as Dynamic (). key . unsafe Cast < String >() ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġpan es Ġ= Ġtab Pan es ĊĠĠĠĠĠĠĠĠĠĠĠ Ġactive Key Ġ= Ġkey ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġoverride Ġfun ĠCustom Add Trigger Demo State . init () Ġ{ ĊĠĠĠĠĠĠĠ Ġpan es Ġ= ĠarrayOf ( ĊĠĠĠĠĠĠĠĠĠĠĠ Ġjs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Tab Ġ 1 " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcontent Ġ= Ġ" Content Ġof ĠTab Ġ 1 " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" 1 " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠĠĠĠĠ Ġjs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Tab Ġ 2 " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcontent Ġ= Ġ" Content Ġof ĠTab Ġ 2 " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġ" 2 " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ). unsafe Cast < Array < Any >>() ĊĠĠĠĠĠĠĠ Ġactive Key Ġ= Ġpan es [ 0 ]. as Dynamic (). key . unsafe Cast < String >() ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . js Style Ġ= Ġjs Ġ{ ĠmarginBottom Ġ= Ġ 1 6 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġbutton Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onClick Ġ= Ġ{ Ġadd () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" ADD " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġtabs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhide Add Ġ= Ġtrue ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= ĠhandleChange ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġactive Key Ġ= Ġstate . active Key ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtype Ġ= Ġ" editable - card " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Edit Ġ= Ġhandle Edit ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstate . pan es . map Ġ{ Ġpane Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtab Pane Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtab Ġ= Ġpane . as Dynamic (). title . unsafe Cast < String >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġkey Ġ= Ġpane . as Dynamic (). key . unsafe Cast < String >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġclo s able Ġ= Ġpane . as Dynamic (). clo s able . unsafe Cast < Boolean >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ pane . as Dynamic (). content . unsafe Cast < String >() ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}. to Typed Array () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠR Builder . custom Add Trigger Demo () Ġ= Ġchild ( Custom Add Trigger Demo :: class ) Ġ{} Ċ Ċ fun ĠR Builder . custom Add Trigger () Ġ{ ĊĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠ Ġcss Ġ{ Ġ+ Tabs Styles . custom Add Trigger Ġ} ĊĠĠĠĠĠĠĠ Ġcustom Add Trigger Demo () ĊĠĠĠ Ġ} Ċ } Ċ