@grafana/ui/dist/esm/components/ClickOutsideWrapper/ClickOutsideWrapper.mjs.map

Grafana Components Library

{"version":3,"file":"ClickOutsideWrapper.mjs","sources":["../../../../src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx"],"sourcesContent":["import { PureComponent, createRef } from 'react';\nimport * as React from 'react';\n\nexport interface Props {\n  /**\n   *  Callback to trigger when clicking outside of current element occurs.\n   */\n  onClick: () => void;\n  /**\n   *  Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.\n   */\n  includeButtonPress: boolean;\n  /** Object to attach the click event listener to. */\n  parent: Window | Document;\n  /**\n   * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false.\n   */\n  useCapture?: boolean;\n}\n\ninterface State {\n  hasEventListener: boolean;\n}\n\nexport class ClickOutsideWrapper extends PureComponent<React.PropsWithChildren<Props>, State> {\n  static defaultProps = {\n    includeButtonPress: true,\n    parent: typeof window !== 'undefined' ? window : undefined,\n    useCapture: false,\n  };\n  myRef = createRef<HTMLDivElement>();\n  state = {\n    hasEventListener: false,\n  };\n\n  componentDidMount() {\n    this.props.parent.addEventListener('click', this.onOutsideClick, this.props.useCapture);\n    if (this.props.includeButtonPress) {\n      // Use keyup since keydown already has an event listener on window\n      this.props.parent.addEventListener('keyup', this.onOutsideClick, this.props.useCapture);\n    }\n  }\n\n  componentWillUnmount() {\n    this.props.parent.removeEventListener('click', this.onOutsideClick, this.props.useCapture);\n    if (this.props.includeButtonPress) {\n      this.props.parent.removeEventListener('keyup', this.onOutsideClick, this.props.useCapture);\n    }\n  }\n\n  onOutsideClick: EventListener = (event) => {\n    const domNode = this.myRef.current;\n\n    if (!domNode || (event.target instanceof Node && !domNode.contains(event.target))) {\n      this.props.onClick();\n    }\n  };\n\n  render() {\n    return <div ref={this.myRef}>{this.props.children}</div>;\n  }\n}\n"],"names":[],"mappings":";;;AAwBO,MAAM,4BAA4B,aAAqD,CAAA;AAAA,EAAvF,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAML,IAAA,IAAA,CAAA,KAAA,GAAQ,SAA0B,EAAA;AAClC,IAAQ,IAAA,CAAA,KAAA,GAAA;AAAA,MACN,gBAAkB,EAAA;AAAA,KACpB;AAiBA,IAAA,IAAA,CAAA,cAAA,GAAgC,CAAC,KAAU,KAAA;AACzC,MAAM,MAAA,OAAA,GAAU,KAAK,KAAM,CAAA,OAAA;AAE3B,MAAI,IAAA,CAAC,OAAY,IAAA,KAAA,CAAM,MAAkB,YAAA,IAAA,IAAQ,CAAC,OAAQ,CAAA,QAAA,CAAS,KAAM,CAAA,MAAM,CAAI,EAAA;AACjF,QAAA,IAAA,CAAK,MAAM,OAAQ,EAAA;AAAA;AACrB,KACF;AAAA;AAAA,EArBA,iBAAoB,GAAA;AAClB,IAAK,IAAA,CAAA,KAAA,CAAM,OAAO,gBAAiB,CAAA,OAAA,EAAS,KAAK,cAAgB,EAAA,IAAA,CAAK,MAAM,UAAU,CAAA;AACtF,IAAI,IAAA,IAAA,CAAK,MAAM,kBAAoB,EAAA;AAEjC,MAAK,IAAA,CAAA,KAAA,CAAM,OAAO,gBAAiB,CAAA,OAAA,EAAS,KAAK,cAAgB,EAAA,IAAA,CAAK,MAAM,UAAU,CAAA;AAAA;AACxF;AACF,EAEA,oBAAuB,GAAA;AACrB,IAAK,IAAA,CAAA,KAAA,CAAM,OAAO,mBAAoB,CAAA,OAAA,EAAS,KAAK,cAAgB,EAAA,IAAA,CAAK,MAAM,UAAU,CAAA;AACzF,IAAI,IAAA,IAAA,CAAK,MAAM,kBAAoB,EAAA;AACjC,MAAK,IAAA,CAAA,KAAA,CAAM,OAAO,mBAAoB,CAAA,OAAA,EAAS,KAAK,cAAgB,EAAA,IAAA,CAAK,MAAM,UAAU,CAAA;AAAA;AAC3F;AACF,EAUA,MAAS,GAAA;AACP,IAAA,2BAAQ,KAAI,EAAA,EAAA,GAAA,EAAK,KAAK,KAAQ,EAAA,QAAA,EAAA,IAAA,CAAK,MAAM,QAAS,EAAA,CAAA;AAAA;AAEtD;AArCa,mBAAA,CACJ,YAAe,GAAA;AAAA,EACpB,kBAAoB,EAAA,IAAA;AAAA,EACpB,MAAQ,EAAA,OAAO,MAAW,KAAA,WAAA,GAAc,MAAS,GAAA,KAAA,CAAA;AAAA,EACjD,UAAY,EAAA;AACd,CAAA;;;;"}