Stateful functional component (with specific states)

example.js

// @flow

import React, { StyleSheet, View } from "react-native"
import Stateful from "../Stateful"
import Link from "../Link"
import Icon from "../Icon"
import * as colors from "../colors.js"

type Props = {
  name: string,
  icon: string,
  to: string,
}

/* eslint-disable react/no-multi-comp */
const SidebarItem = Stateful((props: Props, state): ReactElement => {
  return (
    <Link
      style={ styles.box }
      to={ props.to }
    >
      <Icon
        size={ 24 }
        name={ props.icon }
        color={
          state.hovered
          ? colors.blue.toString()
          : colors.grey.toString()
        }
      />
      <View
        style={ [
          styles.text,
          state.hovered && styles.textHovered,
        ] }
      >
        { props.name }
      </View>
    </Link>
  )
})

const styles = StyleSheet.create({
  box: {
    textAlign: "center",
    padding: 10,
  },
  icon: {

  },
  text: {
    padding: 5,
    fontSize: 12,
    color: colors.grey.toString(),
  },
  textHovered: {
    color: colors.blue.toString(),
  },
})

export default SidebarItem

Stateful.js

// @flow

import React, { Component } from "react"

type Props = Object

type State = {
  hovered: boolean,
  focused: boolean,
  depressed: boolean,
}

const stateful = (FunctionalComponent: Function): ReactElement => {
  return class Stateful extends Component<void, Props, State> {

    props: Props;

    state: State = {
      hovered: false,
      focused: false,
      depressed: false,
    };

    handleMouseEnter: Function = (): void => {
      this.setState({ hovered: true })
    };

    handleMouseLeave: Function = (): void => {
      this.setState({ hovered: false })
    };

    handleFocus: Function = (): void => {
      this.setState({ focused: true })
    };

    handleBlur: Function = (): void => {
      this.setState({ focused: false })
    };

    handleMouseDown: Function = (): void => {
      this.setState({ depressed: true })
    };

    handleMouseUp: Function = (): void => {
      this.setState({ depressed: false })
    };

    render() {
      return (
        React.cloneElement(
          React.Children.only(FunctionalComponent(this.props, this.state)),
          {
            onMouseEnter: this.handleMouseEnter,
            onMouseLeave: this.handleMouseLeave,
            onFocus: this.handleFocus,
            onBlur: this.handleBlur,
            onMouseDown: this.handleMouseDown,
            onMouseUp: this.handleMouseUp,
          }
        )
      )
    }
  }
}

export default stateful