shineout/es/Popover/Panel.js

Shein 前端组件库

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { Component } from '../component';
import { getPosition } from '../utils/dom/popover';
import { isFunc } from '../utils/is';
import { getParent } from '../utils/dom/element';
import { popoverClass } from './styles';
import { docSize } from '../utils/dom/document';
import isDOMElement from '../utils/dom/isDOMElement';
import { Provider as AbsoluteProvider } from '../Table/context';
import { consumer, Provider } from './context';
import { getUidStr } from '../utils/uid';
import { isInDocument } from '../utils/dom/isInDocument';
import getCommonContainer from '../utils/dom/popContainer';
import { Provider as ScrollProvider } from '../Scroll/context';

var emptyEvent = function emptyEvent(e) {
  return e.stopPropagation();
};

var DefaultProps = {
  background: '',
  trigger: 'hover',
  mouseEnterDelay: 0,
  mouseLeaveDelay: 0,
  priorityDirection: 'vertical',
  showArrow: true
};

var Panel =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(Panel, _Component);

  function Panel(props) {
    var _this;

    _this = _Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isRendered", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "chain", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "parentElement", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "placeholder", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "container", void 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "delayTimeout", void 0);

    _this.state = {
      show: props.defaultVisible || false
    };
    _this.isRendered = false;
    _this.chain = [];
    _this.id = "popover_" + getUidStr();
    _this.placeholderRef = _this.placeholderRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.clickAway = _this.clickAway.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleShow = _this.handleShow.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleHide = _this.handleHide.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.setShow = _this.setShow.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.bindChain = _this.bindChain.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.handleCancel = _this.handleCancel.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.createContainer = _this.createContainer.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.element = document.createElement('div');
    return _this;
  }

  var _proto = Panel.prototype;

  _proto.componentDidMount = function componentDidMount() {
    _Component.prototype.componentDidMount.call(this);

    var bindChain = this.props.bindChain;
    if (bindChain) bindChain(this.id);
    this.parentElement = this.placeholder.parentElement;
    this.bindEvents();

    if (this.props.visible) {
      this.createContainer();
      this.forceUpdate();
    }
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    if (this.props.visible === true || nextProps.visible === true) return true;
    if (this.state.show === true || nextState.show === true) return true;
    return false;
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.props.visible) {
      this.createContainer();
    }

    if (this.props.trigger !== prevProps.trigger) {
      this.bindEvents();
    }

    if (this.props.zIndex !== prevProps.zIndex && this.element) {
      this.element.style.zIndex = String(this.props.zIndex);
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    _Component.prototype.componentWillUnmount.call(this);

    this.parentElement.removeEventListener('mouseenter', this.handleShow);
    this.parentElement.removeEventListener('mouseleave', this.handleHide);
    this.parentElement.removeEventListener('click', this.handleShow);
    document.removeEventListener('click', this.clickAway);
    document.removeEventListener('mousedown', this.clickAway);
    if (!this.container) return;

    if (this.container === getCommonContainer()) {
      if (this.element && this.element.parentNode) {
        this.element.parentNode.removeChild(this.element);
      }
    } else if (this.container && this.container.parentNode) {
      this.container.parentNode.removeChild(this.container);
    }
  };

  _proto.setShow = function setShow(show) {
    var _this2 = this;

    var _this$props = this.props,
        onVisibleChange = _this$props.onVisibleChange,
        mouseEnterDelay = _this$props.mouseEnterDelay,
        mouseLeaveDelay = _this$props.mouseLeaveDelay,
        trigger = _this$props.trigger;
    var delay = show ? mouseEnterDelay : mouseLeaveDelay;
    this.delayTimeout = setTimeout(function () {
      if (onVisibleChange) onVisibleChange(show);

      _this2.setState({
        show: show
      });

      if (show && _this2.props.onOpen) _this2.props.onOpen();
      if (!show && _this2.props.onClose) _this2.props.onClose();

      if (show) {
        _this2.bindScrollDismiss(true);

        document.addEventListener('mousedown', _this2.clickAway);
      } else {
        _this2.bindScrollDismiss(false);

        document.removeEventListener('mousedown', _this2.clickAway);
      }
    }, trigger === 'hover' ? delay : 0);
  };

  _proto.getPositionStr = function getPositionStr() {
    var position = this.props.position;
    var priorityDirection = this.props.priorityDirection;
    if (position) return position;
    var rect = this.parentElement.getBoundingClientRect();
    var horizontalPoint = rect.left + rect.width / 2;
    var verticalPoint = rect.top + rect.height / 2;
    var windowHeight = docSize.height;
    var windowWidth = docSize.width;
    var tempPriorityDirection = priorityDirection;

    if (priorityDirection === 'auto') {
      var maxX = Math.max(rect.left, windowWidth - rect.left - rect.width);
      var maxY = Math.max(rect.top, windowHeight - rect.top - rect.height);
      tempPriorityDirection = maxX > maxY ? 'horizontal' : 'vertical';
    }

    if (tempPriorityDirection === 'horizontal') {
      if (horizontalPoint > windowWidth / 2) position = 'left';else position = 'right';

      if (verticalPoint > windowHeight * 0.6) {
        position += '-bottom';
      } else if (verticalPoint < windowHeight * 0.4) {
        position += '-top';
      }
    } else {
      if (verticalPoint > windowHeight / 2) position = 'top';else position = 'bottom';

      if (horizontalPoint > windowWidth * 0.6) {
        position += '-right';
      } else if (horizontalPoint < windowWidth * 0.4) {
        position += '-left';
      }
    }

    return position;
  };

  _proto.getContainer = function getContainer() {
    var getPopupContainer = this.props.getPopupContainer;
    var container;
    if (getPopupContainer) container = getPopupContainer();

    if (container && isDOMElement(container)) {
      var child = document.createElement('div');
      child.setAttribute('style', ' position: absolute; top: 0px; left: 0px; width: 100% ');
      return container.appendChild(child);
    }

    return getCommonContainer();
  };

  _proto.createContainer = function createContainer() {
    var zIndex = this.props.zIndex;

    if (!this.container || !isInDocument(this.container)) {
      this.container = this.getContainer();
      this.element.style.zIndex = String(zIndex);
      this.container.appendChild(this.element);
    }
  };

  _proto.updatePosition = function updatePosition(position) {
    var _this3 = this;

    var pos = getPosition(position, this.parentElement, this.container); // eslint-disable-next-line

    Object.keys(pos).forEach(function (attr) {
      _this3.element.style[attr] = String(pos[attr]);
    });
  };

  _proto.bindEvents = function bindEvents() {
    var _this$props2 = this.props,
        trigger = _this$props2.trigger,
        clickToCancelDelay = _this$props2.clickToCancelDelay,
        _this$props2$mouseEnt = _this$props2.mouseEnterDelay,
        mouseEnterDelay = _this$props2$mouseEnt === void 0 ? DefaultProps.mouseEnterDelay : _this$props2$mouseEnt;

    if (trigger === 'hover') {
      this.parentElement.addEventListener('mouseenter', this.handleShow);
      this.parentElement.addEventListener('mouseleave', this.handleHide);
      this.element.addEventListener('mouseenter', this.handleShow);
      this.element.addEventListener('mouseleave', this.handleHide);
      this.parentElement.removeEventListener('click', this.handleShow);

      if (clickToCancelDelay && mouseEnterDelay > 0) {
        this.parentElement.addEventListener('click', this.handleCancel);
      }
    } else {
      this.parentElement.addEventListener('click', this.handleShow);
      this.parentElement.removeEventListener('click', this.handleCancel);
      this.parentElement.removeEventListener('mouseenter', this.handleShow);
      this.parentElement.removeEventListener('mouseleave', this.handleHide);
      this.element.removeEventListener('mouseenter', this.handleShow);
      this.element.removeEventListener('mouseleave', this.handleHide);
    }
  };

  _proto.placeholderRef = function placeholderRef(el) {
    this.placeholder = el;
  };

  _proto.clickAway = function clickAway(e) {
    var target = e.target;
    if (this.parentElement.contains(target)) return;
    if (this.element.contains(target)) return;
    if (getParent(target, "." + popoverClass('_'))) return;
    this.handleHide(0);
  };

  _proto.bindScrollDismiss = function bindScrollDismiss(show) {
    var scrollDismiss = this.props.scrollDismiss;
    if (!scrollDismiss) return;
    var target = document;
    if (typeof scrollDismiss === 'function') target = scrollDismiss() || document;
    var method = show ? target.addEventListener : target.removeEventListener;
    method.call(target, 'scroll', this.handleHide);
  };

  _proto.bindChain = function bindChain(id) {
    this.chain.push(id);
  };

  _proto.handleShow = function handleShow() {
    this.createContainer();
    if (this.delayTimeout) clearTimeout(this.delayTimeout);
    if (this.state.show) return;
    this.setShow(true);
  };

  _proto.isChildren = function isChildren(el) {
    for (var i = 0; i < this.chain.length; i++) {
      if (getParent(el, "." + this.chain[i])) return true;
    }

    return false;
  };

  _proto.handleCancel = function handleCancel() {
    if (this.delayTimeout) clearTimeout(this.delayTimeout);
  };

  _proto.handleHide = function handleHide(e) {
    if (e && this.isChildren(e.relatedTarget)) return;
    if (this.delayTimeout) clearTimeout(this.delayTimeout);
    this.setShow(false);
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        background = _this$props3.background,
        border = _this$props3.border,
        children = _this$props3.children,
        type = _this$props3.type,
        visible = _this$props3.visible,
        showArrow = _this$props3.showArrow,
        useTextStyle = _this$props3.useTextStyle,
        destroy = _this$props3.destroy;
    var show = typeof visible === 'boolean' ? visible : this.state.show;

    if ((!this.isRendered || destroy) && !show || !this.parentElement || !children) {
      return React.createElement("noscript", {
        ref: this.placeholderRef
      });
    }

    this.isRendered = true;
    var colorStyle = {
      background: background,
      borderColor: border
    };
    var innerStyle = Object.assign({}, this.props.style, {
      background: background
    });
    var position = this.getPositionStr(); // eslint-disable-next-line

    var style = this.element.style;

    if (show) {
      // 先隐藏再设置样式这样可以减少回流
      style.display = 'none';
      this.updatePosition(position);
      if (background) style.background = background;
      if (border) style.borderColor = border;
      style.display = 'block';
    } else {
      style.display = 'none';
    }

    this.element.className = classnames(popoverClass('_', position, type), this.props.className, this.id);
    var childrened = isFunc(children) ? children(this.handleHide) : children;
    if (typeof childrened === 'string' || useTextStyle) childrened = React.createElement("span", {
      className: popoverClass('text')
    }, childrened);
    return ReactDOM.createPortal([showArrow && React.createElement("div", {
      key: "arrow",
      className: popoverClass('arrow'),
      style: colorStyle
    }), React.createElement("div", {
      key: "content",
      onClick: emptyEvent,
      className: popoverClass('content'),
      style: innerStyle
    }, React.createElement(Provider, {
      value: this.bindChain
    }, React.createElement(ScrollProvider, {
      value: {
        element: undefined
      }
    }, React.createElement(AbsoluteProvider, {
      value: false
    }, childrened))))], this.element);
  };

  return Panel;
}(Component);

_defineProperty(Panel, "defaultProps", DefaultProps);

export default consumer(Panel);