import { StateProps } from '../example' ; import { registerExamples } from '../register' ; export const schema = { type : 'object' , properties : { toggleTopLayout : { type : 'boolean' } , topString : { type : 'string' } , middleNumber : { type : 'number' } , toggleBottomLayout : { type : 'boolean' } , bottomBoolean : { type : 'boolean' } } } ; export const uischema = { type : 'VerticalLayout' , rule : { effect : 'ENABLE' , condition : { scope : '#/properties/toggleTopLayout' , schema : { const : true } } } , elements : [ { type : 'Control' , scope : '#/properties/topString' } , { type : 'HorizontalLayout' , elements : [ { type : 'Control' , scope : '#/properties/middleNumber' } , { type : 'Group' , label : 'group' , rule : { effect : 'SHOW' , condition : { scope : '#/properties/toggleBottomLayout' , schema : { const : true } } } , elements : [ { type : 'Control' , scope : '#/properties/bottomBoolean' } ] } ] } ] } as any ; export const data = { toggleTopLayout : true , toggleBottomLayout : true , toggleControl : true } ; const actions = [ { 'label' : 'Enable/Disable top layout' , 'apply' : ( props ) => { return { ... props , data : { ... props . data , toggleTopLayout : ! props . data . toggleTopLayout } } ; } } , { 'label' : 'Show/Hide bottom layout' , 'apply' : ( props ) => { return { ... props , data : { ... props . data , toggleBottomLayout : ! props . data . toggleBottomLayout } } ; } } , ] ; registerExamples ( [ { name : 'rule-enable' , label : 'Rule Inheritance' , data , schema , uischema , actions } ] ) ;