message: Refactor PopperFocus
diff: -import React from 'react'
  +import React, { useState } from 'react'
  import { Manager, PopperProps, Reference } from 'react-popper'
  -import { withStyles, WithStylesProps } from '../../../styles'
  +import { useStyles } from '../../../styles'
  import { PopperContent, PopperContentProps } from './PopperContent'
  -export interface PopperFocusProps extends WithStylesProps {
  +export interface PopperFocusProps {
  placement?: PopperProps['placement']
  offset?: PopperContentProps['offset']
  + children?: React.ReactNode
  renderPopper?(): React.ReactNode
  }
  -export interface PopperFocusState {
  - show: boolean
  -}
  -
  /**
  * Creates a popper element when the children is hovered or focused.
  */
  -@withStyles
  -export class PopperFocus extends React.PureComponent<PopperFocusProps, PopperFocusState> {
  -
  - static defaultProps: Partial<PopperFocusProps> = {
  - placement: 'right',
  - }
  -
  - constructor(props: PopperFocusProps) {
  - super(props)
  - this.state = {
  - show: false,
  - }
  - }
  -
  - render() {
  - const { css, placement, offset } = this.props
  - const styles = {
  +export function PopperFocus(props: PopperFocusProps) {
  + const { placement, offset, renderPopper, children } = props
  + const [isShown, setShown] = useState(false)
  + const { classes } = useStyles(() => ({
  wrapper: {
  display: 'inline-block',
  },
  - }
  + }))
  +
  + const show = () => setShown(true)
  + const hide = () => setShown(false)
  return (
  <Manager>
  <Reference>
  {refProps => (
  <div
  - className={css(styles.wrapper)}
  - onMouseEnter={this.show}
  - onMouseLeave={this.hide}
  - onFocus={this.show}
  - onBlur={this.hide}
  - data-show={this.state.show}
  + className={classes.wrapper}
  + onMouseEnter={show}
  + onMouseLeave={hide}
  + onFocus={show}
  + onBlur={hide}
  + data-show={isShown}
  ref={refProps.ref}
  >
  - {React.Children.only(this.props.children)}
  + {React.Children.only(children)}
  </div>
  )}
  </Reference>
  - {this.props.renderPopper &&
  - <PopperContent show={this.state.show} placement={placement} offset={offset}>
  - {this.props.renderPopper()}
  + {renderPopper && (
  + <PopperContent show={isShown} placement={placement} offset={offset}>
  + {renderPopper()}
  </PopperContent>
  - }
  + )}
  </Manager>
  )
  }
  - show = () => {
  - this.setState({ show: true })
  - }
  -
  - hide = () => {
  - this.setState({ show: false })
  - }
  -}
  +PopperFocus.defaultProps = {
  + placement: 'right',
  +} as Partial<PopperFocusProps>
  