withBlueBackground Pattern #2

withBlueBackground.tsx

import * as React from 'react';

type ColorShade = 'light' | 'dark';

export interface InjectedBlueBackgroundProps {
  style?: React.CSSProperties;
}

interface WithBlueBackgroundProps {
  shade?: ColorShade;
}

const getBlueShade = (shade?: ColorShade) => {
  switch (shade) {
    case 'dark':
      return 'navy';
    case 'light':
      return 'skyblue';
    default:
      return 'blue';
  }
};

const withBlueBackground = <P extends InjectedBlueBackgroundProps>(
  UnwrappedComponent: React.ComponentType<P>
) =>
  class WithBlueBackground extends React.Component<
    P & WithBlueBackgroundProps
  > {
    render() {
      return (
        <UnwrappedComponent
          {...this.props}
          style={Object.assign({}, this.props.style, {
            backgroundColor: getBlueShade(this.props.shade),
          })}
        />
      );
    }
  };
    
export default withBlueBackground;