"use strict";

exports.__esModule = true;
exports.default = void 0;

require("core-js/modules/web.dom.iterable");

require("core-js/modules/es6.array.iterator");

require("core-js/modules/es6.object.keys");

require("core-js/modules/es6.object.assign");

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ = require("./..");

var _lodash = require("lodash");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

/**
 * @category communication
 * @component popover
 * @variations collab-ui-react
 */
var Popover =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Popover, _React$Component);

  function Popover() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isOpen: false,
      isHovering: false
    };

    _this.delayedHide = function (e) {
      var _this$props = _this.props,
          delay = _this$props.delay,
          hideDelay = _this$props.hideDelay,
          onClose = _this$props.onClose;
      var isHovering = _this.state.isHovering;
      if (isHovering) return;

      if (_this.showTimerId) {
        clearTimeout(_this.showTimerId);
        _this.showTimerId = null;
      }

      var popoverHideTime = hideDelay ? hideDelay : delay;
      _this.hideTimerId = setTimeout(function () {
        _this.hideTimerId = null;

        _this.setState({
          isOpen: false,
          isHovering: false
        }, onClose && onClose(e));
      }, popoverHideTime);
      e && e.stopPropagation();
    };

    _this.delayedShow = function (e) {
      var _this$props2 = _this.props,
          delay = _this$props2.delay,
          showDelay = _this$props2.showDelay;

      if (_this.hideTimerId) {
        clearTimeout(_this.hideTimerId);
        _this.hideTimerId = null;
      }

      var popoverShowTime = showDelay ? showDelay : delay;
      _this.showTimerId = setTimeout(function () {
        _this.showTimerId = null;

        _this.setState({
          isOpen: true,
          isHovering: true
        });
      }, popoverShowTime);
      e && e.stopPropagation();
    };

    _this.handleClose = function (e) {
      var onClose = _this.props.onClose;

      _this.setState({
        isOpen: false
      }, onClose && onClose(e));
    };

    _this.handleMouseEnter = function (e) {
      var children = _this.props.children;
      children.props.onMouseEnter && children.props.onMouseEnter(e);
      return !_this.showTimerId && !_this.state.isOpen && _this.delayedShow(e);
    };

    _this.delayCheckHover = function (e) {
      var hoverDelay = _this.props.hoverDelay;
      e.persist();

      _this.setState({
        isHovering: false
      }, function () {
        return setTimeout(function () {
          return _this.delayedHide(e);
        }, hoverDelay);
      });
    };

    _this.handleMouseLeave = function (e) {
      var children = _this.props.children;

      if (_this.hasFocus) {
        return false;
      }

      if (_this.showTimerId) {
        clearTimeout(_this.showTimerId);
        _this.showTimerId = null;
      }

      children.props.onMouseLeave && children.props.onMouseLeave(e);
      return !_this.hideTimerId && _this.state.isOpen && _this.delayCheckHover(e);
    };

    _this.handleBlur = function (e) {
      var children = _this.props.children;
      _this.hasFocus = false;
      children.props.onBlur && children.props.onBlur(e);

      _this.handleMouseLeave(e);
    };

    _this.handleClick = function (e) {
      var _this$props3 = _this.props,
          children = _this$props3.children,
          doesAnchorToggle = _this$props3.doesAnchorToggle;
      var isOpen = _this.state.isOpen;
      _this.hasFocus = true;
      children.props.onClick && children.props.onClick(e);

      if (!_this.showTimerId) {
        return !isOpen ? _this.delayedShow(e) : doesAnchorToggle && _this.handleBlur(e);
      }
    };

    _this.handleFocus = function (e) {
      var children = _this.props.children;
      var isOpen = _this.state.isOpen;
      _this.hasFocus = true;
      children.props.onFocus && children.props.onFocus(e);

      if (!_this.showTimerId) {
        return !isOpen ? _this.delayedShow(e) : _this.handleBlur(e);
      }
    };

    return _this;
  }

  var _proto = Popover.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.props.startOpen && this.delayedShow();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this.hideTimerId && clearTimeout(this.hideTimerId);
    this.showTimerId && clearTimeout(this.showTimerId);
  };

  _proto.render = function render() {
    var _this2 = this;

    var isOpen = this.state.isOpen;

    var _this$props4 = this.props,
        children = _this$props4.children,
        className = _this$props4.className,
        content = _this$props4.content,
        overflowType = _this$props4.overflowType,
        popoverTrigger = _this$props4.popoverTrigger,
        showArrow = _this$props4.showArrow,
        props = _objectWithoutPropertiesLoose(_this$props4, ["children", "className", "content", "overflowType", "popoverTrigger", "showArrow"]);

    var otherProps = (0, _lodash.omit)(Object.assign({}, props), ['delay', 'doesAnchorToggle', 'hideDelay', 'hoverDelay', 'onClose', 'showDelay', 'startOpen']);

    var getTriggers = function getTriggers() {
      var triggerProps = {};

      triggerProps.ref = function (ele) {
        return _this2.anchorRef = ele;
      };

      triggerProps.key = 'child-1';

      switch (popoverTrigger) {
        case 'MouseEnter':
          triggerProps.onMouseEnter = _this2.handleMouseEnter;
          triggerProps.onMouseLeave = _this2.handleMouseLeave;
          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = _this2.handleBlur;
          break;

        case 'Click':
          triggerProps.onClick = _this2.handleClick;
          triggerProps.onBlur = null;
          triggerProps.onFocus = null;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;
          break;

        case 'Focus':
          triggerProps.onFocus = _this2.handleFocus;
          triggerProps.onBlur = _this2.handleBlur;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;
          break;

        case 'None':
          triggerProps.onClick = null;
          triggerProps.onFocus = null;
          triggerProps.onBlur = null;
          triggerProps.onMouseEnter = null;
          triggerProps.onMouseLeave = null;
          break;
      }

      return triggerProps;
    };

    var anchorWithTriggers = children && _react.default.cloneElement(children, getTriggers());

    return _react.default.createElement(_react.default.Fragment, null, anchorWithTriggers, _react.default.createElement(_.EventOverlay, _extends({
      anchorNode: this.anchorRef,
      className: className,
      close: this.handleClose,
      isOpen: isOpen,
      ref: function ref(_ref) {
        return _this2.overlay = _ref;
      },
      showArrow: showArrow,
      style: {
        overflow: overflowType
      }
    }, popoverTrigger === 'MouseEnter' && {
      onMouseEnter: function onMouseEnter() {
        _this2.setState({
          isHovering: true,
          isOpen: true
        });
      },
      onMouseLeave: function onMouseLeave(e) {
        e.persist();

        _this2.setState({
          isHovering: false
        }, function () {
          return _this2.delayedHide(e);
        });
      }
    }, otherProps), content));
  };

  return Popover;
}(_react.default.Component);

Popover.propTypes = {
  /** @prop Children node that should be the popover trigger(this should be a stateful component) */
  children: _propTypes.default.element.isRequired,

  /** @prop Optional CSS class names which goes over popover container | '' */
  className: _propTypes.default.string,

  /** @prop The content that goes into the popover */
  content: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.node]).isRequired,

  /** @prop The delay for popover on hover, click, focus (hide/show) | 0 */
  delay: _propTypes.default.number,

  /** @prop Boolean for whether the Anchor Toggles the Popover | true */
  doesAnchorToggle: _propTypes.default.bool,

  /** @prop The hide delay for popover on hover, click, focus | 0 */
  hideDelay: _propTypes.default.number,

  /** @prop The hover delay for checking whether we are still hovering before closing | 500 */
  hoverDelay: _propTypes.default.number,

  /** @prop Callback function that will execute on close | null */
  onClose: _propTypes.default.func,

  /** @prop Optional prop that controls overflow css style of EventOverlay | 'auto' */
  overflowType: _propTypes.default.string,

  /** @prop Event that will trigger popover appearance | 'MouseEnter' */
  popoverTrigger: _propTypes.default.oneOf(['MouseEnter', 'Click', 'Focus', 'None']),

  /** @prop Boolean for whether the Arrow should show | true */
  showArrow: _propTypes.default.bool,

  /** @prop The show delay for popover on hover, click, focus | 0 */
  showDelay: _propTypes.default.number,

  /** @prop Should Popover start open | false */
  startOpen: _propTypes.default.bool
};
Popover.defaultProps = {
  className: '',
  delay: 0,
  doesAnchorToggle: true,
  hideDelay: 0,
  hoverDelay: 500,
  onClose: null,
  overflowType: 'auto',
  popoverTrigger: 'MouseEnter',
  showArrow: true,
  showDelay: 0,
  startOpen: false
};
Popover.displayName = 'Popover';
var _default = Popover;
/**
* @component popover
* @section default
* @react
import {
  Button,
  Icon,
  List,
  ListItem,
  ListItemSection,
  Popover,
} from '@collab-ui/react';

 export default function ContentDefault() {

    const content = (
      <List>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="edit_20" />
          </ListItemSection>
          <ListItemSection position="center">
            Edit space settings
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="favorite_20" />
          </ListItemSection>
          <ListItemSection position="center">Add to favorites</ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="alert_20" />
          </ListItemSection>
          <ListItemSection position="center">Notifications</ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="accessories_20" />
          </ListItemSection>
          <ListItemSection position="center">
            Add Integrations & Bots
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="stored-info_20" />
          </ListItemSection>
          <ListItemSection position="center">View space policy</ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="archive_20" />
          </ListItemSection>
          <ListItemSection position="center">Archive space</ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="cancel_20" />
          </ListItemSection>
          <ListItemSection position="center">
            Remove space from team
          </ListItemSection>
        </ListItem>
        <ListItem>
          <ListItemSection position="left">
            <Icon name="exit-room_20" />
          </ListItemSection>
          <ListItemSection position="center">Leave space</ListItemSection>
        </ListItem>
      </List>
    );

    const contentFocus = (
      <span key="1" style={{ padding: '10px'}}>Focus</span>
    );

  return (
    <div className="row">
      <div className="docs-example docs-example--spacing">
        <Popover
          content={content}
          popoverTrigger={'Click'}
        >
          <Button children="Click" ariaLabel="Click" />
        </Popover>
      </div>

      <div className="docs-example docs-example--spacing">
        <Popover
          content={content}
          popoverTrigger={'MouseEnter'}
        >
          <Button children="MouseEnter" ariaLabel="MouseEnter" />
        </Popover>
      </div>

      <div className="docs-example docs-example--spacing">
        <Popover
          content={contentFocus}
          popoverTrigger={'Focus'}
        >
          <Button children="Focus" ariaLabel="Focus" />
        </Popover>
      </div>
    </div>
  );
}
**/

/**
* @component popover
* @section delay
* @react

 import {
  Button,
  Popover,
} from '@collab-ui/react';

 export default function PopOverDelay() {

    const contentDelay = (
      <span key="1" style={{ padding: '10px'}}>Delayed</span>
    );

    return (
      <div className="docs-example docs-example--spacing">
        <Popover
          content={contentDelay}
          delay={500}
        >
          <Button children='Hover with Delay' ariaLabel='Hover with Delay' />
        </Popover>
      </div>
    );
}
**/

/**
* @component popover
* @section direction
* @react

 import {
  Button,
  Popover
} from '@collab-ui/react';

 export default function PopOverDirection() {

    const content = (
    <span key="1" style={{ padding: '10px'}}>right-center</span>
  );

  return (
    <div className="docs-example docs-example--spacing">
      <Popover
        content={content}
        direction={'right-center'}
      >
        <Button children='Direction' ariaLabel='Direction' />
      </Popover>
    </div>
  );
}
**/

/**
* @component popover
* @section arrow
* @react

 import {
  Button,
  Popover
} from '@collab-ui/react';

 export default function PopoverArrow() {

  const contentArrow = (
    <span key="1" style={{ padding: '10px'}}>Arrow</span>
  );

  return (
    <div className="docs-example docs-example--spacing">
      <Popover
        content={contentArrow}
        direction={'right-center'}
        showArrow={true}
      >
        <Button children='showArrow' ariaLabel='showArrow' />
      </Popover>
    </div>
  );
}
**/

/**
* @component popover
* @section offset
* @react

 import {
  Button,
  Popover
} from '@collab-ui/react';

 export default function PopoverOffset() {

  const contentOffset = (
    <span key="1" style={{ padding: '10px'}}>Offset</span>
  );

  return (
    <div className="docs-example docs-example--spacing">
      <Popover
        content={contentOffset}
        direction={'top-center'}
        targetOffset={{ vertical: 20 }}
      >
        <Button children='offset' ariaLabel='offset' />
      </Popover>
    </div>
  );
}
**/

/**
* @component popover
* @section contained
* @react

 import {
  Button,
  Popover
} from '@collab-ui/react';

 export default function PopoverContained() {

  const tall = (
    <span key="1" style={{ height: '3000px' }}>Popover(height: 3000px)</span>
  );

  return (
    <Popover
      isContained
      content={tall}
      direction={'bottom-center'}
      popoverTrigger={'Click'}
    >
      <Button children='Tall' ariaLabel='Tall' />
    </Popover>
  );
}
**/

/**
* @component popover
* @section overflow
* @react

 import {
  Button,
  Popover
} from '@collab-ui/react';

 export default function PopoverOverflow() {

  const tall = (
    <span key="1" style={{ height: '3000px' }}>Popover(height: 3000px)</span>
  );

  return (
    <div
      className="docs-example docs-example--spacing"
      style={{
        border: '2px solid #666666',
        width: '100%',
        height: '500px',
        overflow: 'scroll',
        padding: '125px'
      }}
    >
      <Popover
        isContained={true}
        checkOverflow
        content={tall}
        direction={'bottom-center'}
        popoverTrigger={'Click'}
      >
        <Button children='Tall' ariaLabel='Tall' />
      </Popover>
    </div>
  );
}
**/

exports.default = _default;