@hi-ui/hiui 3.9.0-rc.8 → 4.0.0-beta.1

package/es/popper/utils/popper.js

@@ -1,311 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var root = window;
-var boundariesElement = 'viewport';
-
-var Popper = /*#__PURE__*/function () {
-  function Popper() {
-    var _this = this;
-
-    (0, _classCallCheck2["default"])(this, Popper);
-    (0, _defineProperty2["default"])(this, "getOuterSizes", function (element) {
-      // 注：这里会访问 DOM
-      var _display = element.style.display;
-      var _visibility = element.style.visibility;
-      element.style.display = 'block';
-      element.style.visibility = 'hidden'; // original method
-      // 原始方法
-
-      var styles = root.getComputedStyle(element); // 获取计算后的样式
-
-      var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom); // 上下边距
-
-      var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight); // 左右边距
-
-      var result = {
-        width: element.offsetWidth + y,
-        height: element.offsetHeight + x
-      }; // 重置元素样式
-
-      element.style.display = _display;
-      element.style.visibility = _visibility;
-      return result;
-    });
-    (0, _defineProperty2["default"])(this, "getOffsets", function (popper, reference, position, placement) {
-      var getOffsetRectRelativeToCustomParent = _this.getOffsetRectRelativeToCustomParent,
-          getOuterSizes = _this.getOuterSizes,
-          getOffsetParent = _this.getOffsetParent; // 获取前缀
-
-      placement = placement.split('-')[0];
-      var popperOffsets = {}; // 设置 position
-
-      popperOffsets.position = position; // 判断父元素是否固定定位
-
-      var isParentFixed = popperOffsets.position === 'fixed'; //
-      // 获取相关元素的位置
-      //
-
-      var referenceOffsets = getOffsetRectRelativeToCustomParent(reference, getOffsetParent(popper), isParentFixed); //
-      // 获取 popper 的大小
-      //
-
-      var popperRect = getOuterSizes(popper); //
-      // 计算 popper 的偏移
-      //
-      // 根据 popper 放置位置的不同，我们用不同的方法计算
-
-      if (['right', 'left'].indexOf(placement) !== -1) {
-        // 如果在水平方向，应当和相关元素垂直居中对齐
-        // top 应当为相关元素的 top 加上二者的高度差的一半，这样才能保证垂直居中对齐
-        popperOffsets.top = referenceOffsets.top + referenceOffsets.height / 2 - popperRect.height / 2;
-
-        if (placement === 'left') {
-          // 如果在左边，则 left 应为相关元素的 left 减去 popper 的宽度
-          popperOffsets.left = referenceOffsets.left - popperRect.width;
-        } else {
-          // 如果在右边，则 left 应为相关元素的 right
-          popperOffsets.left = referenceOffsets.right;
-        }
-      } else {
-        // 如果在垂直方向，应当和相关元素水平居中对齐
-        // left 应当为相关元素的 left 加上二者的宽度差的一半
-        popperOffsets.left = referenceOffsets.left + referenceOffsets.width / 2 - popperRect.width / 2;
-
-        if (placement === 'top') {
-          // 如果在上边，则 top 应当为相关元素的 top 减去 popper 的高度
-          popperOffsets.top = referenceOffsets.top - popperRect.height;
-        } else {
-          // 如果在下边，则 top 应当为 相关元素的 bottom
-          popperOffsets.top = referenceOffsets.bottom;
-        }
-      } // 给 popperOffsets 对象增加宽度和高度值
-
-
-      popperOffsets.width = popperRect.width;
-      popperOffsets.height = popperRect.height;
-      return {
-        popper: popperOffsets,
-        // popper 的相关信息
-        reference: referenceOffsets // 相关元素的相关信息
-
-      };
-    });
-    (0, _defineProperty2["default"])(this, "setStyle", function (element, styles) {
-      function isNumeric(n) {
-        // 是否是数字
-        return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
-      }
-
-      Object.keys(styles).forEach(function (prop) {
-        var unit = ''; // 为如下的属性增加单位
-
-        if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
-          unit = 'px';
-        }
-
-        element.style[prop] = styles[prop] + unit;
-      });
-    });
-    (0, _defineProperty2["default"])(this, "setupEventListeners", function (element, callback) {
-      // 1 DOM access here
-      // 注：这里会访问 DOM，原作者回复我说，这是他用来记录哪里访问到了 DOM
-      // this.state.updateBound = this.update.bind(this)
-      // 浏览器窗口改变的时候更新边界
-      _this.scrollCallback = function () {
-        callback(target);
-      };
-
-      root.addEventListener('resize', _this.scrollCallback); // 如果边界元素是窗口，就不需要监听滚动事件
-
-      if (boundariesElement !== 'window') {
-        var target = _this.getScrollParent(element); // 获取相关元素可滚动的父级
-        // 这里可能是 `body` 或 `documentElement`（Firefox上），等价于要监听根元素
-
-
-        if (target === root.document.body || target === root.document.documentElement) {
-          target = root;
-        } // 监听滚动事件
-
-
-        target.addEventListener('scroll', _this.scrollCallback);
-      }
-    });
-    (0, _defineProperty2["default"])(this, "isBody", function (element) {
-      var getNodeName = _this.getNodeName;
-      return element ? ['html', 'body', '#document'].includes(getNodeName(element)) : true;
-    });
-    (0, _defineProperty2["default"])(this, "getScrollParent", function (element) {
-      // return document.body
-      var getStyleComputedProperty = _this.getStyleComputedProperty,
-          getScrollParent = _this.getScrollParent,
-          getNodeName = _this.getNodeName;
-      var parent = element.parentNode;
-
-      if (['html', 'body', '#document'].includes(getNodeName(element))) {
-        // $FlowFixMe: assume body is always available
-        return document.documentElement || document.body;
-      }
-
-      if (!parent) {
-        // 没有父级
-        return element;
-      }
-
-      if (parent === root.document) {
-        // Firefox 会将 scrollTop的判断放置的 `documentElement` 而非 `body` 上
-        // 我们将判断二者谁大于0来返回正确的元素
-        if (root.document.body.scrollTop) {
-          return root.document.body;
-        } else {
-          return root.document.documentElement;
-        }
-      } // Firefox 要求我们也要检查 `-x` 以及 `-y`
-
-
-      if (['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-x')) !== -1 || ['scroll', 'auto'].indexOf(getStyleComputedProperty(parent, 'overflow-y')) !== -1) {
-        // 如果检测到的 scrollParent 是 body，我们将对其父元素做一次额外的检测
-        // 这样在 Chrome 系的浏览器中会得到 body，其他情况下会得到 documentElement
-        // 修复 issue #65
-        return parent;
-      }
-
-      return getScrollParent(element.parentNode);
-    });
-    (0, _defineProperty2["default"])(this, "isFixed", function (element) {
-      var getStyleComputedProperty = _this.getStyleComputedProperty,
-          isFixed = _this.isFixed,
-          getNodeName = _this.getNodeName;
-
-      if (['html', 'body', '#document'].includes(getNodeName(element))) {
-        // $FlowFixMe: assume body is always available
-        return false;
-      }
-
-      if (getStyleComputedProperty(element, 'position') === 'fixed') {
-        // position 为 fixed
-        return true;
-      } // 判断父元素是否固定
-
-
-      return element.parentNode ? isFixed(element.parentNode) : element;
-    });
-    (0, _defineProperty2["default"])(this, "getStyleComputedProperty", function (element, property) {
-      // 注：这里会访问 DOM
-      var css = window.getComputedStyle(element, null);
-      return css[property];
-    });
-    (0, _defineProperty2["default"])(this, "_getPosition", function (popper, reference) {
-      var getOffsetParent = _this.getOffsetParent,
-          isFixed = _this.isFixed;
-      var container = getOffsetParent(reference); // 获取父元素的偏移
-
-      if (_this._options.forceAbsolute) {
-        // 强制使用绝对定位
-        return 'absolute';
-      } // 判断 popper 是否使用固定定位
-      // 如果相关元素位于固定定位的元素中，popper 也应当使用固定固定定位来使它们可以同步滚动
-
-
-      var isParentFixed = isFixed(reference, container);
-      return isParentFixed ? 'fixed' : 'absolute';
-    });
-    (0, _defineProperty2["default"])(this, "getOffsetParent", function (element) {
-      // 注：这里会访问 DOM
-      var offsetParent = element.offsetParent;
-      return offsetParent === root.document.body || !offsetParent ? root.document.documentElement : offsetParent;
-    });
-    (0, _defineProperty2["default"])(this, "getOffsetRectRelativeToCustomParent", function (element, parent, fixed) {
-      var getScrollParent = _this.getScrollParent,
-          getBoundingClientRect = _this.getBoundingClientRect;
-      var elementRect = getBoundingClientRect(element);
-      var parentRect = getBoundingClientRect(parent);
-
-      if (fixed) {
-        // 固定定位
-        var scrollParent = getScrollParent(parent);
-        parentRect.top += scrollParent.scrollTop;
-        parentRect.bottom += scrollParent.scrollTop;
-        parentRect.left += scrollParent.scrollLeft;
-        parentRect.right += scrollParent.scrollLeft;
-      }
-
-      var rect = {
-        top: elementRect.top - parentRect.top,
-        left: elementRect.left - parentRect.left,
-        bottom: elementRect.top - parentRect.top + elementRect.height,
-        right: elementRect.left - parentRect.left + elementRect.width,
-        width: elementRect.width,
-        height: elementRect.height
-      };
-      return rect;
-    });
-    (0, _defineProperty2["default"])(this, "getBoundingClientRect", function (element) {
-      var rect = element.getBoundingClientRect(); // IE11以下
-
-      var isIE = navigator.userAgent.indexOf('MSIE') !== -1; // 修复 IE 的文档的边界 top 值总是 0 的bug
-
-      var rectTop = isIE && element.tagName === 'HTML' ? -element.scrollTop : rect.top;
-      return {
-        left: rect.left,
-        top: rectTop,
-        right: rect.right,
-        bottom: rect.bottom,
-        width: rect.right - rect.left,
-        height: rect.bottom - rectTop
-      };
-    });
-    (0, _defineProperty2["default"])(this, "removeEventListeners", function (element) {
-      var getScrollParent = _this.getScrollParent; // 注：这里会访问 DOM
-      // 移除 resize 事件监听
-
-      root.removeEventListener('resize', _this.scrollCallback);
-
-      if (boundariesElement !== 'window') {
-        // 如果边界元素不是窗口，说明还监听了滚动事件
-        var target = getScrollParent(element);
-
-        if (target === root.document.body || target === root.document.documentElement) {
-          target = root;
-        } // 移除滚动事件监听
-
-
-        target.removeEventListener('scroll', _this.scrollCallback);
-      } // 更新回调摄者为空
-
-
-      _this.scrollCallback = null;
-    });
-  }
-
-  (0, _createClass2["default"])(Popper, [{
-    key: "getNodeName",
-    value: function getNodeName(element) {
-      return element ? (element.nodeName || '').toLowerCase() : null;
-    }
-    /**
-     * 防止overlay的合适的位置位置  在auto时候有效
-     * @method
-     * @memberof Popper
-     * @ignore
-     * @argument {Eement} element 给定的元素
-     * @argument {String} property 属性
-     */
-
-  }]);
-  return Popper;
-}();
-
-exports["default"] = Popper;

package/es/popper/utils/positionUtils.js

@@ -1,314 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getOffset = void 0;
-
-var _popper = _interopRequireDefault(require("./popper"));
-
-var _PopperJS = new _popper["default"](),
-    isBody = _PopperJS.isBody,
-    isFixed = _PopperJS.isFixed,
-    getOffsetRectRelativeToCustomParent = _PopperJS.getOffsetRectRelativeToCustomParent; // 上下防止溢出 就会定位到划出的边缘位置
-
-
-var overflowOffset = function overflowOffset(placement, scrollTop, rect, top, left, width, props) {
-  var topGap = props.topGap,
-      container = props.container;
-  var _top = top;
-
-  switch (placement) {
-    case 'bottom-start':
-      _top = rect.top + rect.height + topGap <= 0 ? scrollTop + topGap : top;
-      break;
-
-    case 'top-start':
-      if (container.clientHeight + rect.height - rect.bottom <= 0) {
-        _top = top - (rect.top - container.clientHeight);
-      }
-
-      break;
-  }
-
-  return {
-    top: _top,
-    width: width,
-    left: left,
-    placement: placement
-  };
-}; // 对于auto的计算方式
-
-
-var positionAuto = function positionAuto(attachEleRect, popperHeight, popperRef, height, containerHeight) {
-  // auto时候 定位比较合适的位置
-  var placement = 'bottom-start';
-  popperHeight === undefined && (popperHeight = 0);
-  var width = popperRef ? popperRef.clientWidth : 0;
-
-  if (popperRef || height) {
-    height && (popperHeight = height);
-  } else if (popperRef && popperRef.clientHeight && popperHeight !== popperRef.clientHeight) {
-    popperHeight = popperRef.clientHeight;
-  } // 上下都放不下的时候 放左右
-
-
-  if (attachEleRect.top + popperHeight + attachEleRect.height > containerHeight) {
-    if (attachEleRect.right > width) {
-      placement = 'right';
-    }
-
-    if (attachEleRect.left > width) {
-      placement = 'left';
-    }
-  } else if (attachEleRect.top < popperHeight) {
-    if (attachEleRect.right > width) {
-      placement = 'right';
-    }
-
-    if (attachEleRect.left > width) {
-      placement = 'left';
-    }
-  } // 上下能放下的时候以上下优先放置
-
-
-  if (attachEleRect.top > popperHeight) {
-    placement = 'top-start';
-  }
-
-  if (attachEleRect.top + popperHeight + attachEleRect.height < containerHeight) {
-    placement = 'bottom-start';
-  }
-
-  return placement;
-};
-
-var caclLeftOrRightPlacement = function caclLeftOrRightPlacement(leftPlacement, rightPlacement, popperRef, widthConstant) {
-  var width = widthConstant.width,
-      popperWidth = widthConstant.popperWidth,
-      poperLeft = widthConstant.poperLeft,
-      containerWidth = widthConstant.containerWidth,
-      attachEleWidth = widthConstant.attachEleWidth;
-  var placement = rightPlacement;
-
-  if (popperWidth === undefined) {
-    var clientWidth = popperRef || {};
-    popperWidth = clientWidth || 0;
-  } // 自动探测边界，第一次时需设置为不可见，否则会闪跳,用来设置class hi-popper__content--hide
-
-
-  if (popperRef || width) {
-    // 元素已挂载到dom且当前popper处于显示状态
-    if (width) {
-      popperWidth = width;
-    } else if (popperRef.clientWidth && popperWidth !== popperRef.clientWidth) {
-      popperWidth = popperRef.clientWidth;
-    }
-
-    poperLeft = poperLeft + (popperWidth - (attachEleWidth || 0));
-
-    if (poperLeft >= containerWidth) {
-      placement = leftPlacement;
-    }
-  }
-
-  return placement;
-}; // 计算popper在元素上面或下面
-
-
-var caclBottomOrTopPlacement = function caclBottomOrTopPlacement(bottomPlacement, topPlacement, popperRef, heightConstant, widthConstant) {
-  var popperHeight = heightConstant.popperHeight,
-      height = heightConstant.height,
-      poperTop = heightConstant.poperTop,
-      containerHeight = heightConstant.containerHeight;
-  var placement = bottomPlacement;
-  popperHeight === undefined && (popperHeight = 0); // 自动探测边界，第一次时需设置为不可见，否则会闪跳,用来设置class hi-popper__content--hide
-
-  if (popperRef || height) {
-    // 元素已挂载到dom且当前popper处于显示状态
-    if (height) {
-      popperHeight = height;
-    } else if (popperRef.clientHeight && popperHeight !== popperRef.clientHeight) {
-      popperHeight = popperRef.clientHeight;
-    }
-
-    poperTop += popperHeight;
-
-    if (poperTop >= containerHeight) {
-      placement = topPlacement;
-    }
-  }
-
-  var topOrbottom = placement === 'top-start' ? 'top' : 'bottom';
-  placement = topOrbottom + '-' + caclLeftOrRightPlacement('end', 'start', popperRef, widthConstant);
-  return placement;
-};
-
-var getPlacement = function getPlacement(attachEleRect, container, props, state, attachEleWidth) {
-  var popperHeight = state.popperHeight,
-      popperRef = state.popperRef,
-      popperWidth = state.popperWidth;
-  var attachEle = props.attachEle,
-      placement = props.placement,
-      height = props.height,
-      _props$width = props.width,
-      width = _props$width === void 0 ? 0 : _props$width,
-      _props$leftGap = props.leftGap,
-      leftGap = _props$leftGap === void 0 ? 0 : _props$leftGap;
-  if (!attachEle) return;
-  var containerHeight = document.documentElement.clientHeight || document.body.clientHeight;
-  var containerWidth = document.documentElement.clientWidth || document.body.clientWidth;
-
-  if (isFixed(attachEle)) {
-    containerHeight = container.clientHeight;
-    containerWidth = container.clientWidth;
-  }
-
-  if (isBody(container)) {
-    containerHeight = document.documentElement.clientHeight || document.body.clientHeight;
-    containerWidth = document.documentElement.clientWidth || document.body.clientWidth;
-  }
-
-  var poperTop = attachEleRect.top + attachEleRect.height;
-  var poperLeft = attachEleRect.left + attachEleRect.width;
-  var widthConstant = {
-    width: width,
-    popperWidth: popperWidth,
-    poperLeft: poperLeft,
-    containerWidth: containerWidth,
-    attachEleWidth: attachEleWidth,
-    leftGap: leftGap
-  };
-  var heightConstant = {
-    popperHeight: popperHeight,
-    height: height,
-    poperTop: poperTop,
-    containerHeight: containerHeight,
-    leftGap: leftGap
-  };
-
-  if (placement === 'top-bottom-start') {
-    placement = caclBottomOrTopPlacement('bottom-start', 'top-start', popperRef, heightConstant, widthConstant);
-  } else if (placement === 'top-bottom') {
-    placement = caclBottomOrTopPlacement('bottom', 'top', popperRef, heightConstant, widthConstant);
-  } else if (placement === 'left-right-start') {
-    placement = caclLeftOrRightPlacement('left-start', 'right-start', popperRef, widthConstant);
-  } else if (placement === 'left-right') {
-    placement = caclLeftOrRightPlacement('left', 'right', popperRef, width, widthConstant);
-  } else if (placement === 'auto') {
-    positionAuto(attachEleRect, popperHeight, popperRef, height, containerHeight);
-  }
-
-  return placement || 'bottom-start';
-};
-
-var getOffset = function getOffset(props, state, status) {
-  var attachEle = props.attachEle,
-      topGap = props.topGap,
-      leftGap = props.leftGap,
-      width = props.width,
-      container = props.container,
-      preventOverflow = props.preventOverflow;
-  if (!attachEle) return;
-  var popperHeight = state.popperHeight,
-      popperWidth = state.popperWidth;
-  var rect = attachEle.getBoundingClientRect();
-
-  if (isFixed(attachEle) && !isBody(container)) {
-    rect = getOffsetRectRelativeToCustomParent(attachEle, container, isFixed(attachEle));
-  }
-
-  var _scrollTop = container.scrollTop;
-  var _scrollLeft = container.scrollLeft; // 兼容处理
-
-  if (isBody(container)) {
-    _scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-    _scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
-  }
-
-  var top = rect.top + _scrollTop;
-  var left = rect.left + _scrollLeft;
-
-  var _width = width === false ? '' : width === undefined ? rect.width : width;
-
-  width = width === false ? popperWidth : width === undefined ? rect.width : width;
-  var placement = getPlacement(rect, container, props, state, rect.width) || 'bottom-start';
-  var rectHeight = rect.height;
-
-  switch (placement) {
-    case 'bottom':
-      top = top + topGap + rectHeight;
-      left = left + leftGap + rect.width / 2;
-      break;
-
-    case 'bottom-start':
-      top = top + topGap + rectHeight;
-      left = left + leftGap;
-      break;
-
-    case 'bottom-end':
-      top = top + topGap + rectHeight;
-      left = left + leftGap - width + rect.width;
-      break;
-
-    case 'top':
-      top = top - topGap;
-      left = left + leftGap + rect.width / 2;
-      break;
-
-    case 'top-start':
-      top = top - topGap;
-      left = left + leftGap;
-      break;
-
-    case 'top-end':
-      top = top - topGap;
-      left = left + leftGap - width + rect.width;
-      break;
-
-    case 'left':
-      top = top + rect.height / 2;
-      left = left - leftGap;
-      break;
-
-    case 'left-start':
-      top = top + topGap;
-      left = left - width;
-      break;
-
-    case 'left-end':
-      top = top + rect.height - topGap - popperHeight;
-      left = left - width;
-      break;
-
-    case 'right':
-      top = top + rect.height / 2;
-      left = left + rect.width + leftGap;
-      break;
-
-    case 'right-start':
-      top = top + topGap;
-      left = left + rect.width + leftGap;
-      break;
-
-    case 'right-end':
-      top = top + rect.height - topGap - popperHeight;
-      left = left + width + leftGap;
-      break;
-  }
-
-  if (preventOverflow) {
-    return overflowOffset(placement = 'bottom-start', _scrollTop, rect, top, left, width, props);
-  }
-
-  return {
-    width: _width,
-    top: top,
-    left: left,
-    placement: placement
-  };
-};
-
-exports.getOffset = getOffset;

package/es/popper/utils/useClickOutside.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = require("react");
-
-var useClickOutside = function useClickOutside(onClickOutside, dom) {
-  var eventName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'click';
-  var attachEle = arguments.length > 3 ? arguments[3] : undefined;
-  var element = (0, _react.useRef)('');
-  var handleOutside = (0, _react.useCallback)(function (e) {
-    var targetElement = typeof dom === 'function' ? dom() : dom;
-    var el = targetElement || element.current;
-
-    if (el) {
-      if (attachEle) {
-        !(attachEle.contains(e.target) || el.contains(e.target)) && onClickOutside(e);
-      } else {
-        !el.contains(e.target) && onClickOutside(e);
-      }
-    }
-  }, [onClickOutside, dom, element]);
-  (0, _react.useEffect)(function () {
-    // 使用事件捕获
-    document.addEventListener(eventName, handleOutside, true);
-    return function () {
-      document.removeEventListener(eventName, handleOutside, true);
-    };
-  }, [eventName, onClickOutside, element]);
-  return element;
-};
-
-var _default = useClickOutside;
-exports["default"] = _default;