zarm/es/popper/index.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

import React, { useEffect, useRef, useState, useMemo, useImperativeHandle, cloneElement, forwardRef } from 'react';
import { createBEM } from '@zarm-design/bem';
import { useClick, useFloating, flip, shift, useInteractions, offset, autoUpdate, arrow, useHover, useFocus, useDismiss } from '@floating-ui/react-dom-interactions';
import Transition from '../transition';
import { canUseDOM, getElementSize, renderToContainer } from '../utils/dom';
import { ConfigContext } from '../config-provider';
import { getTransitionName, getTransformOrigin } from './utils';
import mergeRefs from '../utils/mergeRefs';
var directionMap = {
  top: 'top',
  'top-left': 'top-start',
  'top-right': 'top-end',
  right: 'right',
  'right-top': 'right-start',
  'right-bottom': 'right-end',
  bottom: 'bottom',
  'bottom-left': 'bottom-start',
  'bottom-right': 'bottom-end',
  left: 'left',
  'left-top': 'left-start',
  'left-bottom': 'left-end'
};
var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls,
      globalMountContainer = _React$useContext.mountContainer;

  var visible = props.visible,
      mountContainer = props.mountContainer,
      direction = props.direction,
      destroy = props.destroy,
      trigger = props.trigger,
      animationDuration = props.animationDuration,
      hasArrow = props.hasArrow,
      animationType = props.animationType,
      content = props.content,
      children = props.children,
      arrowPointAtCenter = props.arrowPointAtCenter,
      onVisibleChange = props.onVisibleChange;
  var bem = createBEM('popper', {
    prefixCls: prefixCls
  });
  var isVisible = trigger === 'manual' && visible;

  var _useState = useState(isVisible),
      _useState2 = _slicedToArray(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var arrowRef = useRef(null);
  var middleware = [offset(function (_ref) {
    var placement = _ref.placement;

    var _getElementSize = getElementSize(arrowRef.current),
        width = _getElementSize.width,
        height = _getElementSize.height;

    var side = placement.split('-')[0];
    var value = side === 'bottom' || side === 'top' ? height : width;
    return value;
  }), flip(), shift()];

  if (hasArrow) {
    middleware.push(arrow({
      element: arrowRef
    }));
  }

  var _useFloating = useFloating({
    open: open,
    onOpenChange: function onOpenChange(state) {
      setOpen(state);
      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(state);
    },
    middleware: middleware,
    placement: directionMap[direction],
    whileElementsMounted: autoUpdate
  }),
      x = _useFloating.x,
      y = _useFloating.y,
      reference = _useFloating.reference,
      floating = _useFloating.floating,
      strategy = _useFloating.strategy,
      context = _useFloating.context,
      _update = _useFloating.update;

  useImperativeHandle(ref, function () {
    return {
      update: function update() {
        _update();
      }
    };
  });

  function computeArrowStyle(ctx) {
    var _ctx$middlewareData;

    var _ref2 = (ctx === null || ctx === void 0 ? void 0 : (_ctx$middlewareData = ctx.middlewareData) === null || _ctx$middlewareData === void 0 ? void 0 : _ctx$middlewareData.arrow) || {},
        arrowX = _ref2.x,
        arrowY = _ref2.y;

    if (arrowRef.current) {
      var postion = ctx.placement.split('-');

      if (!postion[1] || arrowPointAtCenter) {
        return {
          left: x != null ? "".concat(arrowX, "px") : '',
          top: y != null ? "".concat(arrowY, "px") : ''
        };
      }

      return {};
    }
  }

  var _useInteractions = useInteractions([useHover(context, {
    restMs: 100,
    enabled: trigger === 'hover',
    delay: {
      open: props.mouseEnterDelay,
      close: props.mouseLeaveDelay
    }
  }), useClick(context, {
    enabled: trigger === 'click'
  }), useFocus(context, {
    enabled: trigger === 'focus'
  }), useDismiss(context, {
    enabled: trigger !== 'manual'
  })]),
      getReferenceProps = _useInteractions.getReferenceProps,
      getFloatingProps = _useInteractions.getFloatingProps;

  var transitionName = getTransitionName(prefixCls, directionMap[direction], animationType);
  useEffect(function () {
    setOpen(isVisible);
  }, [isVisible]);

  var hidden = function hidden() {
    setOpen(false);
  };

  var toolTip = /*#__PURE__*/React.createElement(Transition, {
    nodeRef: floating,
    duration: animationDuration,
    visible: open,
    onLeaveEnd: hidden,
    tranisitionName: transitionName,
    destroy: destroy
  }, function (_ref3, setNodeRef) {
    var style = _ref3.style,
        className = _ref3.className;
    return renderToContainer(mountContainer !== null && mountContainer !== void 0 ? mountContainer : globalMountContainer, /*#__PURE__*/React.createElement("div", _extends({}, getFloatingProps({
      ref: setNodeRef,
      className: bem([_defineProperty({}, "".concat(direction), true), props.className, className]),
      style: _objectSpread(_objectSpread(_objectSpread({}, props.style), style), {}, {
        position: strategy,
        top: y !== null && y !== void 0 ? y : 0,
        left: x !== null && x !== void 0 ? x : 0,
        // animationDuration: `${animationDuration}ms`,
        transformOrigin: getTransformOrigin(context.placement),
        WebkitTransformOrigin: getTransformOrigin(context.placement)
      })
    }), {
      "data-popper-placement": context.placement
    }), /*#__PURE__*/React.createElement("div", {
      className: bem('content')
    }, content, hasArrow && /*#__PURE__*/React.createElement("span", {
      className: bem('arrow'),
      ref: arrowRef,
      style: computeArrowStyle(context)
    }))));
  });
  var newRef = useMemo(function () {
    return mergeRefs([reference, children.ref]);
  }, [reference, children]);
  var child = /*#__PURE__*/React.isValidElement(children) ? children : /*#__PURE__*/React.createElement("span", null, children);

  var childrenProps = _objectSpread(_objectSpread({}, children && children.props), trigger === 'contextMenu' && {
    onContextMenu: function onContextMenu(e) {
      e.preventDefault();
      setOpen(true);
    }
  });

  return /*#__PURE__*/React.createElement(React.Fragment, null, toolTip, /*#__PURE__*/cloneElement(child, getReferenceProps(_objectSpread({
    ref: newRef
  }, childrenProps))));
});
Popper.defaultProps = {
  hasArrow: false,
  destroy: false,
  arrowPointAtCenter: false,
  trigger: (canUseDOM && /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent) ? 'click' : 'hover') || 'click',
  direction: 'top',
  mouseEnterDelay: 150,
  mouseLeaveDelay: 100,
  visible: false,
  animationType: 'zoom-fade',
  onVisibleChange: function onVisibleChange() {}
};
export default Popper;