license import React from 'react' ; import merge from 'lodash.merge' ; import { SchemaProcessor } from '@eva-design/processor' ; import { CustomSchemaType , SchemaType , ThemeStyleType , } from '@eva-design/dss' ; import { StyleProvider } from '../style/styleProvider.component' ; import { ThemeProviderProps } from '../theme/themeProvider.component' ; import { ModalPanel } from '../modal/modalPanel.component' ; interface EvaRuntimeProcessingProps { mapping : SchemaType ; customMapping ? : CustomSchemaType ; } interface EvaBuildtimeProcessingProps { styles : ThemeStyleType ; } type EvaProcessingProps = EvaRuntimeProcessingProps | EvaBuildtimeProcessingProps ; export type ApplicationProviderProps = EvaProcessingProps & ThemeProviderProps ; export type ApplicationProviderElement = React . ReactElement < ApplicationProviderProps > ; interface State { styles : ThemeStyleType ; } extends React . Component property property property property property overview-example overview-example export class ApplicationProvider extends React . Component < ApplicationProviderProps , State > { public state : State = { styles : ( this . props as EvaBuildtimeProcessingProps ) . styles , } ; private schemaProcessor : SchemaProcessor = new SchemaProcessor ( ) ; constructor ( props ) { super ( props ) ; if ( ! this . state . styles ) { const { mapping , customMapping } = this . props as EvaRuntimeProcessingProps ; this . state . styles = this . createStyles ( mapping , customMapping ) ; } } private createStyles = ( mapping , custom ) : ThemeStyleType => { const customizedMapping = merge ( { } , mapping , custom ) ; return this . schemaProcessor . process ( customizedMapping ) ; } ; public render ( ) { return ( < StyleProvider theme = { this . props . theme } styles = { this . state . styles } > < ModalPanel > { this . props . children } < /ModalPanel> < /StyleProvider>); } }