@kiwicom/smart-faq/src/SmartFAQ/common/Tooltip/HoverHelpTooltip.js

// @flow

import * as React from 'react';
import LogContext from '@kiwicom/nitro/lib/services/log/context';
import type { Context as LogContextType } from '@kiwicom/nitro/lib/services/log/context';
import type { Event } from '@kiwicom/nitro/lib/records/Event';

import HelpTooltip from './HelpTooltip';
import type { Props as HelpTooltipProps } from './HelpTooltip';

type Props = {|
  ...HelpTooltipProps,
  disabled: boolean,
  iconName: string,
  eventToTrack?: Event,
|};

type State = {|
  opened: boolean,
|};

export default class HoverHelpTooltip extends React.PureComponent<
  Props,
  State,
> {
  context: LogContextType;

  static contextType = LogContext;
  static defaultProps = {
    ...HelpTooltip.defaultProps,
    iconName: 'md-info-outline',
    disabled: false,
  };

  state: State = {
    opened: false,
  };

  show = () => {
    const { disabled, eventToTrack } = this.props;

    if (!disabled) {
      this.setState({ opened: true });
    }

    if (eventToTrack) {
      this.context.log(eventToTrack, {});
    }
  };

  hide = () => {
    if (!this.props.disabled) {
      this.setState({ opened: false });
    }
  };

  render() {
    const {
      disabled,
      iconName,
      children,
      content,
      placement,
      mobilePlacement,
      className,
    } = this.props;

    return (
      <HelpTooltip
        content={content}
        placement={placement}
        mobilePlacement={mobilePlacement}
        className={className}
        open={!disabled && this.state.opened}
      >
        <div
          onTouchStart={this.show}
          onTouchEnd={this.hide}
          onMouseEnter={this.show}
          onMouseLeave={this.hide}
          style={{ display: 'flex', alignItems: 'center' }}
        >
          {children ?? (
            <div>
              <i className={iconName} />
            </div>
          )}
        </div>
      </HelpTooltip>
    );
  }
}