license import React from 'react' ; import hoistNonReactStatics from 'hoist-non-react-statics' ; import { ThemeContext } from './themeContext' ; import { ThemeType } from './theme.service' ; import { Styles } from '../style/style.service' ; import { EvaProp } from '../style/styled' ; interface PrivateProps < T > { forwardedRef ? : React . RefObject < T > ; } export interface ThemedComponentProps < T extends Styles < T > = any > { eva ? : EvaProp ; } export type ThemedComponentClass < P , S extends Styles < S > > = React . ComponentClass < ThemedComponentProps < S > & P > ; interface PrivateProps < T > { forwardedRef ? : React . RefObject < T > ; } type CreateStylesFunction < T extends Styles < T > > = ( theme : ThemeType ) => T ; param Component param createStyles overview-example overview-example export const withStyles = < P extends object , S > ( Component , createStyles ? ) : ThemedComponentClass < P , S > => { type WrappingProps = PrivateProps < WrappedElementInstance > & WrappedProps ; type WrappedProps = ThemedComponentProps < S > & P ; type WrappingElement = React . ReactElement < WrappingProps > ; type WrappedElementInstance = React . ReactInstance ; class Wrapper extends React . PureComponent < WrappingProps > { private withThemedProps = ( props , theme ) : WrappedProps => { const style = createStyles && createStyles ( theme ) ; return { ... props , eva : { theme , style , } , } ; } ; private renderWrappedElement = ( theme ) : React . ReactElement < ThemedComponentProps < S > > => { const { forwardedRef , ... restProps } = this . props ; const props = this . withThemedProps ( restProps as P , theme ) ; return ( < Component { ... props } ref = { forwardedRef } / > ) ; } ; public render ( ) { return ( < ThemeContext . Consumer > { this . renderWrappedElement } < /ThemeContext.Consumer>); } } const WrappingElement = ( props , ref ) : WrappingElement => { return ( < Wrapper { ... props } forwardedRef = { ref } / > ) ; } ; const ThemedComponent = React . forwardRef < WrappedElementInstance , WrappingProps > ( WrappingElement ) ; ThemedComponent . displayName = Component . displayName || Component . name ; hoistNonReactStatics ( ThemedComponent , Component ) ; return ThemedComponent ; } ;