import * as React from 'react' ; import { allowedKeys , allowedValues } from './Allowed' ; import { stepThrough } from './StepThrough' ; export interface ExternalProps { oocss ? : string ; } export interface InjectedProps { style ? : Object ; oocss ? : any ; } export interface Options { key ? : string ; } export const OOCSS = ( ) => Component => { const result = class YourComponentName extends React . Component < any , any > { styleObject : Array < any > ; constructor ( props ) { super ( props ) ; this . state = { style : { } } ; this . styleObject = [ ] ; } componentDidMount ( ) { let { oocss } = this . props ; oocss ? this . convertClassToStyle ( oocss ) : null ; } componentDidUpdate ( prevProps ) { if ( prevProps . oocss !== this . props . oocss ) { this . convertClassToStyle ( this . props . oocss ) ; } } convertClassToStyle ( classNames , currentClassIndex ? ) { let classesArray = classNames . split ( ' ' ) ; let classIndex = currentClassIndex || 0 ; let amountOfClasses = classesArray . length ; let currentClass = classesArray [ classIndex ] ; if ( classIndex < amountOfClasses ) { stepThrough ( currentClass ) . shiftKey ( allowedKeys ) . shiftValue ( allowedValues , data => { this . styleObject . push ( data ) ; } ) . shiftMeasurement ( ) ; return this . convertClassToStyle ( classNames , classIndex + 1 ) ; } else { this . setState ( { style : Object . assign ( { } , ... this . styleObject ) } ) ; } } render ( ) { return < Component { ... this . props } style = { Object . assign ( { } , this . state . style , this . props . style ) } / > ; } } ; return result ; } ;