package Ġsamples . skeleton Ċ Ċ import Ġan td . divider . divider Ċ import Ġan td . form . form Ċ import Ġan td . form . form Item Ċ import Ġan td . radio . Radio ChangeEvent Ċ import Ġan td . radio . radioButton Ċ import Ġan td . radio . radio Group Ċ import Ġan td . skeleton . skeleton Avatar Ċ import Ġan td . skeleton . skeleton Button Ċ import Ġan td . skeleton . skeleton Image Ċ import Ġan td . skeleton . skeleton Input Ċ import Ġan td . switch . switch Ċ import Ġkotlin ext . js . js Ċ import Ġorg . w 3 c . dom . events . MouseEvent Ċ import Ġreact . R Builder Ċ import Ġreact . R Component Ċ import Ġreact . R Props Ċ import Ġreact . R State Ċ import Ġreact . dom . br Ċ import Ġreact . dom . div Ċ import Ġreact . setState Ċ import Ġstyled . css Ċ import Ġstyled . styled Div Ċ Ċ private Ġinterface ĠDemo State Ġ: ĠR State Ġ{ ĊĠĠĠ Ġvar Ġactive : ĠBoolean ĊĠĠĠ Ġvar Ġsize : ĠString ĊĠĠĠ Ġvar Ġbutton Shape : ĠString ĊĠĠĠ Ġvar Ġavatar Shape : ĠString Ċ } Ċ Ċ private Ġclass ĠDemo Ġ: ĠR Component < R Props , ĠDemo State >() Ġ{ ĊĠĠĠ Ġval Ġhandle Active Change Ġ= Ġ{ Ġchecked : ĠBoolean , Ġ_: ĠMouseEvent Ġ-> ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ Ġactive Ġ= Ġchecked Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġhandle Size Change Ġ= Ġ{ Ġe : ĠRadio ChangeEvent Ġ-> ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ Ġsize Ġ= Ġe . target . value . unsafe Cast < String >() Ġ} ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġhandle Shape Change Ġ= Ġ Ġ{ Ġprop : ĠString , Ġe : ĠRadio ChangeEvent Ġ-> ĊĠĠĠĠĠĠĠ Ġval ĠnewState : Ġdynamic Ġ= Ġobject Ġ{} ĊĊĠĠĠĠĠĠĠ ĠnewState [" active "] Ġ= Ġstate . active ĊĠĠĠĠĠĠĠ ĠnewState [" size "] Ġ= Ġstate . size ĊĠĠĠĠĠĠĠ ĠnewState [ prop ] Ġ= Ġe . target . value . unsafe Cast < String >() ĊĊĠĠĠĠĠĠĠ ĠsetState ( newState . unsafe Cast < Demo State >()) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠDemo State . init () Ġ{ ĊĠĠĠĠĠĠĠ Ġactive Ġ= Ġfalse ĊĠĠĠĠĠĠĠ Ġsize Ġ= Ġ" default " ĊĠĠĠĠĠĠĠ Ġbutton Shape Ġ= Ġ" default " ĊĠĠĠĠĠĠĠ Ġavatar Shape Ġ= Ġ" circle " ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġskeleton Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġactive Ġ= Ġstate . active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsize Ġ= Ġstate . size ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġshape Ġ= Ġstate . button Shape ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġskeleton Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġactive Ġ= Ġstate . active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsize Ġ= Ġstate . size ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġshape Ġ= Ġstate . button Shape ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġskeleton Avatar Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġactive Ġ= Ġstate . active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsize Ġ= Ġstate . size ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġshape Ġ= Ġstate . avatar Shape ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġskeleton Input Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġjs Ġ{ Ġwidth Ġ= Ġ 2 0 0 Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġactive Ġ= Ġstate . active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsize Ġ= Ġstate . size ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġbr Ġ{} ĊĠĠĠĠĠĠĠ Ġbr Ġ{} ĊĠĠĠĠĠĠĠ Ġskeleton Image Ġ{} ĊĠĠĠĠĠĠĠ Ġdivider Ġ{} ĊĠĠĠĠĠĠĠ Ġform Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlayout Ġ= Ġ" inline " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstyle Ġ= Ġjs Ġ{ Ġmargin Ġ= Ġ" 1 6 px Ġ 0 " Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġform Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġswitch Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġchecked Ġ= Ġstate . active ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġhandle Active Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġform Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . label Ġ= Ġ" size " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Group Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġstate . size ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġhandle Size Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" default " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Default " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" large " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Large " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" small " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Small " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġform Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . label Ġ= Ġ" Button ĠShape " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Group Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġstate . button Shape ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhandle Shape Change (" button Shape ", Ġit ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" default " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Default " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" round " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Round " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" circle " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Circle " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġform Item Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . label Ġ= Ġ" Avatar ĠShape " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Group Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġstate . avatar Shape ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġhandle Shape Change (" avatar Shape ", Ġit ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" square " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Square " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġradio Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġ" circle " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Circle " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ private Ġfun ĠR Builder . demo () Ġ= Ġchild ( Demo :: class ) Ġ{} Ċ Ċ fun ĠR Builder . element () Ġ{ ĊĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠ Ġcss Ġ{ Ġ+ Skeleton Styles . element Ġ} ĊĠĠĠĠĠĠĠ Ġdemo () ĊĠĠĠ Ġ} Ċ } Ċ