instacart/Snacks

// Higher order component that force updates component on themer change
// and passes down theme through props
import React, { Component } from 'react'
import { isValidElementType } from 'react-is'
import PropTypes from 'prop-types'
import themer from './index'
import { cleanConfig, themePropTypes } from './utils'
 
Function `withTheme` has a Cognitive Complexity of 16 (exceeds 5 allowed). Consider refactoring.
function withTheme(options = {}) {
  // This allows us to maintain backwards compatibility with withTheme(Component)
  // while supporting withTheme(options)(Component)
  if (isValidElementType(options)) {
    return withTheme()(options)
  }
 
  return function wrapWithTheme(WrappedComponent) {
    class WithTheme extends Component {
      static displayName = `withTheme(${WrappedComponent.name ||
        WrappedComponent.displayName ||
        'Component'})`
 
      static propTypes = {
        forwardedRef: PropTypes.oneOfType([
          PropTypes.func,
          PropTypes.shape({ current: PropTypes.any }),
        ]),
        snacksTheme: themePropTypes,
      }
 
      componentDidMount() {
        this.unsubscribe = themer.subscribe(this.onThemeChange)
        this.validateSnacksTheme()
      }
 
      componentWillUnmount() {
        this.unsubscribe()
      }
 
      onThemeChange = () => {
        this.forceUpdate()
      }
 
      themeIsValid() {
        const { snacksTheme } = this.props
        return Boolean(snacksTheme) && typeof snacksTheme === 'object'
      }
 
      validateSnacksTheme() {
        if (process.env.NODE_ENV !== 'production') {
          // eslint-disable-line no-undef
          const { snacksTheme } = this.props
          const themeIsBad = snacksTheme && !Object.keys(cleanConfig(snacksTheme)).length
          if (themeIsBad) {
            throw new Error(
              `Recieved an invalid snacksTheme Prop. Expected undefined or an object and instead got ${typeof snacksTheme}`
            )
          }
        }
      }
 
      render() {
        const { snacksTheme, forwardedRef, ...rest } = this.props
        const theme = this.themeIsValid() ? snacksTheme : themer.themeConfig
 
        return <WrappedComponent ref={forwardedRef} snacksTheme={theme} {...rest} />
      }
    }
 
    if (options.forwardRef) {
      const withThemeForwardRef = (props, ref) => {
        return <WithTheme {...props} forwardedRef={ref} />
      }
 
      // gives us ForwardRef(withTheme(ComponentName)) in dev tools and snapshots
      withThemeForwardRef.displayName = WithTheme.displayName
 
      return React.forwardRef(withThemeForwardRef)
    }
 
    return WithTheme
  }
}
 
export default withTheme