package Ġtech . k zen . auto . client . objects . document . report . formula Ċ Ċ import Ġkotlinx . browser . document Ċ import Ġkotlinx . css .* Ċ import Ġkotlinx . html . title Ċ import Ġreact . R Builder Ċ import Ġreact . RP ure Component Ċ import Ġreact . dom . attrs Ċ import Ġreact . setState Ċ import Ġstyled . css Ċ import Ġstyled . styled Div Ċ import Ġtech . k zen . auto . client . wrap . material . Cancel Icon Ċ import Ġtech . k zen . auto . client . wrap . material . Material IconButton Ċ import Ġtech . k zen . auto . client . wrap . material . Material Input Label Ċ import Ġtech . k zen . auto . client . wrap . material . icon ByName Ċ import Ġtech . k zen . auto . client . wrap . react Style Ċ import Ġtech . k zen . auto . client . wrap . select . React Select Ċ import Ġtech . k zen . auto . client . wrap . select . React Select Option Ċ import Ġkotlin . js . Json Ċ import Ġkotlin . js . json ĊĊ Ċ class ĠFormula Reference Controller ( ĊĠĠĠ Ġprops : ĠProps Ċ ): ĊĠĠĠ ĠRP ure Component < Formula Reference Controller . Props , ĠFormula Reference Controller . State >( props ) Ċ { ĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġinterface ĠProps : Ġreact . Props Ġ{ ĊĠĠĠĠĠĠĠ Ġvar Ġinput Columns : ĠList < String > ĊĠĠĠĠĠĠĠ Ġvar Ġedit Disabled : ĠBoolean ĊĠĠĠĠĠĠĠ Ġvar Ġon Added : Ġ( String ) Ġ-> ĠUnit ĊĠĠĠĠĠĠĠ Ġvar Ġadd Label : ĠString ĊĠĠĠĠĠĠĠ Ġvar Ġadd Icon : ĠString ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġinterface ĠState : Ġreact . State Ġ{ ĊĠĠĠĠĠĠĠ Ġvar Ġadding : ĠBoolean ĊĠĠĠĠĠĠĠ Ġvar Ġselected Column : ĠString ? ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġoverride Ġfun ĠState . init ( props : ĠProps ) Ġ{ ĊĠĠĠĠĠĠĠ Ġadding Ġ= Ġfalse ĊĠĠĠĠĠĠĠ Ġselected Column Ġ= Ġnull ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġprivate Ġfun Ġon Add () Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġadding Ġ= Ġtrue ĊĠĠĠĠĠĠĠĠĠĠĠ Ġselected Column Ġ= Ġnull ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun Ġon Cancel () Ġ{ ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġadding Ġ= Ġfalse Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġselected Column Ġ= Ġnull ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun Ġon Value Change ( columnName : ĠString ) Ġ{ ĊĠĠĠĠĠĠĠ Ġprops . on Added . invoke ( columnName ) ĊĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġselected Column Ġ= ĠcolumnName ĊĠĠĠĠĠĠĠĠĠĠĠ Ġadding Ġ= Ġfalse ĊĠĠĠĠĠĠĠĠĠĠĠ Ġselected Column Ġ= Ġnull ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġ// ---------------------------------------------------------------- ------------------------------------------------ - ĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( state . adding ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginBottom Ġ= Ġ(- 1 ). em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠmarginLeft Ġ= Ġ 0 . 5 . em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwhite Space Ġ= ĠWhite Space . nowrap ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( state . adding ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġwidth Ġ= Ġ 1 5 . em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Select () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Cancel () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġrender Add Button () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Add Button () Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġprops . add Label ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Material IconButton :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Add () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon ByName ( props . add Icon ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Cancel () Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . inline Block ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Material IconButton :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtitle Ġ= Ġ" Cancel " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Cancel () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchild ( Cancel Icon :: class ) Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} ĊĊĊĠĠĠ Ġprivate Ġfun ĠR Builder . render Select () Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġselect Id Ġ= Ġ" material - react - select - id " ĊĊĠĠĠĠĠĠĠ Ġchild ( Material Input Label :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠhtmlFor Ġ= Ġselect Id ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġreact Style Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠfontSize Ġ= Ġ 0 . 8 . em ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Column " ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġval Ġselect Options Ġ= Ġprops ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. input Columns ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. map Ġ{ ĠReact Select Option ( it , Ġit ) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. to Typed Array () ĊĊĠĠĠĠĠĠĠ Ġchild ( React Select :: class ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġid Ġ= Ġselect Id ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġselect Options . find Ġ{ Ġit . value Ġ== Ġstate . selected Column Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġoptions Ġ= Ġselect Options ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġconsole . log (" ^^^^ ^ Ġselected : Ġ$ it ") ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Value Change ( it . value ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġis Disabled Ġ= Ġprops . edit Disabled ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// Ġhttps :// stackoverflow . com / a / 5 1 8 4 4 5 4 2 / 1 9 4 1 3 5 9 ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġstyle Transformer : Ġ( Json , ĠJson ) Ġ-> ĠJson Ġ= Ġ{ Ġbase , Ġ_ Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġtransformed Ġ= Ġjson () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtransformed . add ( base ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtransformed [" background "] Ġ= Ġ" transparent " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtransformed ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġreact Styles Ġ= Ġjson () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġreact Styles [" control "] Ġ= Ġstyle Transformer ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyles Ġ= Ġreact Styles ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠNB : Ġthis Ġwas Ġcausing Ġclipping Ġwhen Ġused Ġin ĠConditional Step Display Ġtable , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠĠ Ġsee : Ġhttps :// react - select . com / advanced # portal ing ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmenu Portal Target Ġ= Ġdocument . body !! ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ }