recompose-example.ts

import * as React from 'react';
import {
  compose,
  StateHandler,
  StateHandlerMap,
  withStateHandlers,
} from 'recompose';

export interface DialogMenuItemProps {
  icon?: string;
  isActive?: boolean;

  onClick(): any;
}

interface StateProps {
  isHovered: boolean;
}

type StateHandlerProps = StateHandlerMap<StateProps> & {
  handleMouseLeave(): StateHandler<StateProps>;
  handleMouseOver(): StateHandler<StateProps>;
};

type EnhancedDialogMenuItemProps =
  DialogMenuItemProps &
  StateProps &
  StateHandlerProps;

export const DialogMenuItem: React.SFC<EnhancedDialogMenuItemProps> = props => (
  <li
    className={`pointer pa3 ${props.isHovered || props.isActive ? 'bg-light-gray' : ''}`}
    onClick={props.onClick}
    onMouseOver={props.handleMouseOver}
    onMouseLeave={props.handleMouseLeave}>
    {props.icon && <i className={`fas fa-${props.icon} fa-lg mid-gray mr3`} />}
    {props.children}
  </li>
);
export default compose<
  EnhancedDialogMenuItemProps,
  DialogMenuItemProps
>(
  withStateHandlers<
    StateProps & DialogMenuItemProps,
    StateHandlerProps,
    DialogMenuItemProps
  >(
    (props) => ({
      ...props,
      isHovered: false,
    }),
    {
      handleMouseLeave: (state) => () => ({
        ...state,
        isHovered: state.isActive ? true : false,
      }),
      handleMouseOver: (state) => () => ({
        ...state,
        isHovered: true,
      }),
    }
  )
)(DialogMenuItem);