import React from "react"; import PropTypes from "prop-types"; import IconButton from "../icon-button"; import Tooltip from "../tooltip"; import { handleAnyClick } from "../utils/event"; import uniqueId from "lodash/uniqueId"; import Aside from "../aside"; import { desktop } from "../utils/device"; import Backdrop from "../backdrop"; import Heading from "../heading"; import throttle from "lodash/throttle"; import { Content, HeaderContent, Body } from "./styled-help-button"; class HelpButton extends React.Component { constructor(props) { super(props); this.state = { isOpen: false, displayType: this.getTypeByWidth(), hideTooltip: false, }; this.ref = React.createRef(); this.refTooltip = React.createRef(); this.id = this.props.id || uniqueId(); this.throttledResize = throttle(this.resize, 300); } afterShow = () => { this.refTooltip.current.updatePosition(); //console.log(`afterShow ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e); this.setState({ isOpen: true }, () => { handleAnyClick(true, this.handleClick); }); if (this.state.hideTooltip) { this.refTooltip.current.hideTooltip(); } }; afterHide = () => { //console.log(`afterHide ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e); if (this.state.isOpen && !this.state.hideTooltip) { this.setState({ isOpen: false }, () => { handleAnyClick(false, this.handleClick); }); } }; handleClick = (e) => { //console.log(`handleClick ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e); if (!this.ref.current.contains(e.target)) { //console.log(`hideTooltip() tooltipId=${this.props.tooltipId}`, this.refTooltip.current); this.refTooltip.current.hideTooltip(); } }; onClose = () => { this.setState({ isOpen: false }); }; componentDidMount() { window.addEventListener("resize", this.throttledResize); } componentWillUnmount() { handleAnyClick(false, this.handleClick); window.removeEventListener("resize", this.throttledResize); } componentDidUpdate(prevProps) { if (this.props.displayType !== prevProps.displayType) { this.setState({ displayType: this.getTypeByWidth() }); } if (this.state.isOpen && this.state.displayType === "aside") { window.addEventListener("popstate", this.popstate, false); } } popstate = () => { window.removeEventListener("popstate", this.popstate, false); this.onClose(); window.history.go(1); }; resize = () => { if (this.props.displayType !== "auto") return; const type = this.getTypeByWidth(); if (type === this.state.displayType) return; this.setState({ displayType: type }); }; getTypeByWidth = () => { if (this.props.displayType !== "auto") return this.props.displayType; return window.innerWidth < desktop.match(/\d+/)[0] ? "aside" : "dropdown"; }; onClick = () => { let state = false; if (this.state.displayType === "aside") { state = true; } this.setState({ isOpen: !this.state.isOpen, hideTooltip: state }); }; render() { const { isOpen, displayType } = this.state; const { tooltipContent, place, offsetTop, offsetBottom, offsetRight, offsetLeft, zIndex, helpButtonHeaderContent, iconName, color, getContent, className, dataTip, style, tooltipColor, } = this.props; return (