@kdcloudjs/kdesign 1.7.48-usePopper.1 → 1.7.48

package/es/popper/index.d.ts

@@ -1,51 +0,0 @@
-import React from 'react';
-export declare const Placements: ["top", "left", "right", "bottom", "topLeft", "topRight", "bottomLeft", "bottomRight", "leftTop", "leftBottom", "rightTop", "rightBottom"];
-export declare type PlacementType = typeof Placements[number];
-export declare const Triggers: ["hover", "focus", "click", "contextMenu"];
-export declare type TriggerType = typeof Triggers[number];
-export declare type RenderFunction = () => React.ReactNode;
-export interface PopperProps {
-    gap?: number;
-    arrow?: boolean;
-    visible?: boolean;
-    prefixCls?: string;
-    arrowSize?: number;
-    disabled?: boolean;
-    arrowOffset?: number;
-    scrollHidden?: boolean;
-    mouseEnterDelay?: number;
-    mouseLeaveDelay?: number;
-    defaultVisible?: boolean;
-    autoPlacement?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    popperClassName?: string;
-    popperStyle?: React.CSSProperties;
-    placement?: PlacementType;
-    tip?: any;
-    trigger?: TriggerType | Array<TriggerType>;
-    clickToClose?: boolean;
-    onTrigger?: (trigger: TriggerType) => void;
-    onVisibleChange?: (visible: boolean) => void;
-    getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;
-    getPopupContainer?: (locatorNode: HTMLElement) => HTMLElement;
-    onTransitionEnd?: (e: React.TransitionEvent) => void;
-    onAnimationEnd?: (e: React.AnimationEvent) => void;
-    children?: React.ReactNode;
-}
-export declare const popperPlacementMap: {
-    top: string;
-    left: string;
-    right: string;
-    bottom: string;
-    topLeft: string;
-    topRight: string;
-    bottomLeft: string;
-    bottomRight: string;
-    leftTop: string;
-    leftBottom: string;
-    rightTop: string;
-    rightBottom: string;
-};
-export declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<unknown>>;
-export default Popper;

package/es/popper/index.js

@@ -1,418 +0,0 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
-import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
-import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useEffect, useRef, useState, Children, forwardRef } from 'react';
-import { createPopper } from '@popperjs/core';
-import { tuple } from '../_utils/type';
-import classnames from 'classnames';
-import debounce from 'lodash/debounce';
-import ReactDOM from 'react-dom';
-import { isFragment } from '../_utils/reactNode';
-import { ConfigContext } from '../config-provider';
-export var Placements = tuple('top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom');
-export var Triggers = tuple('hover', 'focus', 'click', 'contextMenu');
-var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-var generateGetBoundingClientRect = function generateGetBoundingClientRect() {
-  var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return function () {
-    return {
-      width: 0,
-      height: 0,
-      top: y,
-      right: x,
-      bottom: y,
-      left: x
-    };
-  };
-};
-var virtualElement = {
-  getBoundingClientRect: generateGetBoundingClientRect()
-};
-export var popperPlacementMap = {
-  top: 'top',
-  left: 'left',
-  right: 'right',
-  bottom: 'bottom',
-  topLeft: 'top-start',
-  topRight: 'top-end',
-  bottomLeft: 'bottom-start',
-  bottomRight: 'bottom-end',
-  leftTop: 'left-start',
-  leftBottom: 'left-end',
-  rightTop: 'right-start',
-  rightBottom: 'right-end'
-};
-var placementFlip = {
-  bottom: 'bottom',
-  top: 'bottom',
-  right: 'left',
-  left: 'right'
-};
-var getRealPlacement = function getRealPlacement(key) {
-  return popperPlacementMap[key] ? popperPlacementMap[key] : 'top';
-};
-var getFallbackPlacements = function getFallbackPlacements(key) {
-  var _context, _context2, _context3, _context4;
-  var prefix = key.split('-')[0];
-  var suffix = ['']; // , '-start', '-end']
-  return _toConsumableArray(_filterInstanceProperty(_context = _flatInstanceProperty(_context2 = _mapInstanceProperty(_context3 = _toConsumableArray(_filterInstanceProperty(_context4 = _Object$keys(placementFlip)).call(_context4, function (r) {
-    var _context5;
-    return _includesInstanceProperty(_context5 = [prefix, placementFlip[prefix]]).call(_context5, r);
-  }))).call(_context3, function (d) {
-    return _mapInstanceProperty(suffix).call(suffix, function (o) {
-      return d + o;
-    });
-  })).call(_context2)).call(_context, function (f) {
-    return f !== key;
-  }));
-};
-var getRealDom = function getRealDom(locatorRef, locatorElement) {
-  var _a;
-  if (!locatorRef.current) return locatorRef.current;
-  var REF_NAME_OBJ = {
-    Input: 'input',
-    InputNumber: 'input',
-    Select: 'select',
-    Upload: 'input'
-  };
-  if (locatorRef.current.tagName) return locatorRef.current;
-  var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
-  return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
-};
-var isTarget = function isTarget(domRef, e, locatorElement) {
-  var _a;
-  if (domRef && (domRef === null || domRef === void 0 ? void 0 : domRef.current)) {
-    var dom = getRealDom(domRef, locatorElement);
-    return dom ? dom === e.target || ((_a = dom === null || dom === void 0 ? void 0 : dom.contains) === null || _a === void 0 ? void 0 : _a.call(dom, e.target)) : false;
-  }
-  return false;
-};
-export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context6, _context7, _context8;
-  var _a;
-  var _React$useContext = React.useContext(ConfigContext),
-    getPrefixCls = _React$useContext.getPrefixCls,
-    pkgPrefixCls = _React$useContext.prefixCls;
-  var prefixCls = props.prefixCls,
-    onTrigger = props.onTrigger,
-    style = props.style,
-    popperStyle = props.popperStyle,
-    _props$arrow = props.arrow,
-    arrow = _props$arrow === void 0 ? false : _props$arrow,
-    onVisibleChange = props.onVisibleChange,
-    className = props.className,
-    popperClassName = props.popperClassName,
-    tip = props.tip,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'top' : _props$placement,
-    visible = props.visible,
-    _props$arrowSize = props.arrowSize,
-    arrowSize = _props$arrowSize === void 0 ? 4.25 : _props$arrowSize,
-    _props$gap = props.gap,
-    defaultGap = _props$gap === void 0 ? 4 : _props$gap,
-    _props$scrollHidden = props.scrollHidden,
-    scrollHidden = _props$scrollHidden === void 0 ? false : _props$scrollHidden,
-    _props$mouseEnterDela = props.mouseEnterDelay,
-    mouseEnterDelay = _props$mouseEnterDela === void 0 ? 0.1 : _props$mouseEnterDela,
-    _props$mouseLeaveDela = props.mouseLeaveDelay,
-    mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
-    _props$defaultVisible = props.defaultVisible,
-    defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
-    _props$autoPlacement = props.autoPlacement,
-    autoPlacement = _props$autoPlacement === void 0 ? true : _props$autoPlacement,
-    _props$clickToClose = props.clickToClose,
-    clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
-    _props$getTriggerElem = props.getTriggerElement,
-    getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
-      return locatorNode;
-    } : _props$getTriggerElem,
-    getPopupContainer = props.getPopupContainer,
-    _onTransitionEnd = props.onTransitionEnd,
-    _onAnimationEnd = props.onAnimationEnd,
-    children = props.children;
-  // const trigger = 'click'
-  // const arrow = false
-  var popperPrefixCls = getPrefixCls(pkgPrefixCls, 'popper');
-  var referenceContentCls = "".concat(popperPrefixCls, "-reference-content");
-  var childrenInner = /*#__PURE__*/React.isValidElement(children) && !isFragment(children) ? children : /*#__PURE__*/React.createElement("span", null, children);
-  var referenceElement = Children.only(childrenInner);
-  var popperElement = typeof tip === 'function' ? tip() : tip;
-  var popperRefInner = useRef(null);
-  var popperRef = ref || popperRefInner;
-  var popperInstance = useRef(null);
-  var referenceRef = useRef(null);
-  // const referenceRef: any = referenceInnerRef
-  var container = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer(getRealDom(referenceRef, referenceElement) || document.body)) || document.body;
-  // console.log('referenceElement', container, children, referenceElement)
-  var _useState = useState(typeof visible === 'undefined' ? defaultVisible : visible),
-    _useState2 = _slicedToArray(_useState, 2),
-    visibleInner = _useState2[0],
-    setVisibleInner = _useState2[1];
-  var _useState3 = useState(visibleInner),
-    _useState4 = _slicedToArray(_useState3, 2),
-    exist = _useState4[0],
-    setExist = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var _useState7 = useState(getRealPlacement(placement)),
-    _useState8 = _slicedToArray(_useState7, 2),
-    placementInner = _useState8[0],
-    setPlacementInner = _useState8[1];
-  var delayRef = useRef();
-  var clearDelay = function clearDelay() {
-    if (typeof delayRef.current !== 'undefined') {
-      clearTimeout(delayRef.current);
-      delayRef.current = null;
-    }
-  };
-  var triggerOpen = function triggerOpen(nextOpen) {
-    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.1;
-    console.log('triggerOpen', nextOpen, delay);
-    clearDelay();
-    if (delay === 0) {
-      if (visibleInner !== nextOpen) {
-        if (nextOpen) {
-          onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
-        }
-        if (typeof visible === 'undefined') {
-          setVisibleInner(nextOpen);
-        }
-        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
-      }
-    } else {
-      if (visibleInner !== nextOpen) {
-        delayRef.current = setTimeout(function () {
-          if (nextOpen) {
-            onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
-          }
-          if (typeof visible === 'undefined') {
-            setVisibleInner(nextOpen);
-          }
-          onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
-        }, delay * 1000);
-      }
-    }
-  };
-  var onTriggerInner = function onTriggerInner(nextOpen, triggerType) {
-    var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-    triggerOpen(nextOpen, triggerType, delay);
-  };
-  var onClick = function onClick(e) {
-    var _a, _b;
-    onTriggerInner(!visibleInner, 'click', 0);
-    (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-  };
-  var onFocus = function onFocus(e) {
-    var _a, _b;
-    onTriggerInner(true, 'focus', 0);
-    (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-  };
-  var onBlur = function onBlur(e) {
-    var _a, _b;
-    onTriggerInner(false, 'focus', 0);
-    (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-  };
-  var onContextMenu = function onContextMenu(e) {
-    var _a, _b;
-    e.preventDefault();
-    virtualElement.getBoundingClientRect = generateGetBoundingClientRect(e.clientX, e.clientY);
-    onTriggerInner(!visibleInner, 'contextMenu', 0);
-    (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-  };
-  var onMouseOver = function onMouseOver(e) {
-    var _a, _b;
-    console.log('onMouseOver');
-    onTriggerInner(true, 'hover', mouseEnterDelay);
-    (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onMouseOver) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-  };
-  var onMouseLeave = function onMouseLeave(e) {
-    var _a, _b;
-    console.log('onMouseLeave');
-    onTriggerInner(false, 'hover', mouseLeaveDelay);
-    (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-  };
-  useEffect(function () {
-    if (typeof visible !== 'undefined') {
-      setVisibleInner(visible);
-    }
-  }, [visible]);
-  useEffect(function () {
-    setPlacementInner(getRealPlacement(placement));
-  }, [placement]);
-  useEffect(function () {
-    var scrollHandle = debounce(function (e) {
-      var _a, _b;
-      if (visibleInner) {
-        var isPopper = e.target === popperRef.current || ((_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target));
-        if (scrollHidden && !isPopper) {
-          triggerOpen(false);
-        }
-      }
-    }, 10);
-    if (visibleInner) {
-      document.addEventListener('scroll', scrollHandle, true);
-    }
-    return function () {
-      document.removeEventListener('scroll', scrollHandle, true);
-    };
-  }, [visibleInner, scrollHidden, popperRef]);
-  useEffect(function () {
-    var clickHandle = debounce(function (e) {
-      if (visibleInner) {
-        var isReference = isTarget(referenceRef, e, referenceElement) || isTarget(popperRef, e, referenceElement);
-        console.log('click----', visibleInner, clickToClose, isReference);
-        if (clickToClose && !isReference) {
-          triggerOpen(false, '', 0);
-        }
-      }
-    }, 10);
-    if (visibleInner) {
-      document.addEventListener('click', clickHandle, true);
-    }
-    return function () {
-      document.removeEventListener('click', clickHandle, true);
-    };
-  }, [visibleInner, clickToClose, referenceRef, popperRef]);
-  useEffect(function () {
-    var realDom = getRealDom(referenceRef, referenceElement);
-    var triggerNode = getTriggerElement(realDom);
-    if (trigger === 'click') {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('click', onClick);
-    } else if (trigger === 'focus') {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('focus', onFocus);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('blur', onBlur);
-    } else if (trigger === 'contextMenu') {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('contextmenu', onContextMenu);
-    } else {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('mouseover', onMouseOver);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('mouseleave', onMouseLeave);
-    }
-    return function () {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('click', onClick);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('focus', onClick);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('blur', onClick);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('contextmenu', onContextMenu);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('mouseover', onMouseOver);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('mouseleave', onMouseLeave);
-    };
-  }, [getTriggerElement, visibleInner, referenceElement, referenceRef]);
-  var popperModifiers = [{
-    name: 'offset',
-    options: {
-      offset: [0, defaultGap + (arrow ? 5 : 0)]
-    }
-  }, {
-    name: 'preventOverflow',
-    enabled: autoPlacement,
-    options: {
-      altBoundary: disabled,
-      mainAxis: true
-    }
-  }, {
-    name: 'flip',
-    enabled: autoPlacement,
-    options: {
-      altBoundary: disabled,
-      fallbackPlacements: autoPlacement ? getFallbackPlacements(placementInner) : undefined
-    }
-  }, {
-    name: 'onUpdate',
-    enabled: true,
-    phase: 'afterWrite',
-    fn: function fn(_ref) {
-      var state = _ref.state;
-      setPlacementInner(state.placement);
-    }
-  }];
-  var popperOptionsInner = {
-    placement: placementInner,
-    modifiers: popperModifiers,
-    strategy: 'fixed'
-  };
-  useEnhancedEffect(function () {
-    var _a, _b;
-    console.log('-----1', exist, popperInstance.current);
-    if (visibleInner) {
-      if (!exist) {
-        setExist(true);
-      } else {
-        setActive(true);
-        setTimeout(function () {
-          return setActive(false);
-        }, 1000);
-        if (popperInstance.current) {
-          (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.setOptions(function (options) {
-            return _extends(_extends({}, options), popperOptionsInner);
-          });
-          (_b = popperInstance.current) === null || _b === void 0 ? void 0 : _b.forceUpdate();
-        }
-      }
-    }
-  }, [visibleInner, placementInner]);
-  useEnhancedEffect(function () {
-    console.log('-----2', exist);
-    if (!exist || disabled) {
-      return undefined;
-    }
-    var current = getRealDom(referenceRef, referenceElement);
-    if (current) {
-      popperInstance.current = createPopper(trigger === 'contextMenu' ? virtualElement : (current === null || current === void 0 ? void 0 : current.closest(".".concat(referenceContentCls))) || current, popperRef.current, popperOptionsInner);
-    }
-    return function () {
-      var _a;
-      console.log('-----3');
-      (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.destroy();
-    };
-  }, [exist, disabled]);
-  if (children === null || typeof children === 'undefined') {
-    return null;
-  }
-  var popperContainerProps = {
-    ref: popperRef,
-    className: classnames(popperPrefixCls, referenceContentCls, {
-      hidden: !visibleInner
-    }),
-    onTransitionEnd: function onTransitionEnd(e) {
-      return _onTransitionEnd === null || _onTransitionEnd === void 0 ? void 0 : _onTransitionEnd(e);
-    }
-  };
-  var arrowStyle = _defineProperty({}, "--arrowSize", arrowSize + 'px');
-  var popperProps = {
-    className: classnames(["".concat(popperPrefixCls, "-content")], [_concatInstanceProperty(_context6 = "".concat(popperPrefixCls, "-")).call(_context6, placementInner)], _defineProperty({}, _concatInstanceProperty(_context7 = "".concat(popperPrefixCls, "-")).call(_context7, placementInner, "-out"), !visibleInner), _defineProperty({}, _concatInstanceProperty(_context8 = "".concat(popperPrefixCls, "-")).call(_context8, placementInner, "-in"), active), prefixCls, popperClassName, className),
-    style: _extends(_extends(_extends({}, arrow ? arrowStyle : {}), popperStyle), style),
-    onMouseOver: trigger === 'hover' ? function () {
-      return onTriggerInner(true, 'hover', mouseEnterDelay);
-    } : undefined,
-    onMouseLeave: trigger === 'hover' ? function () {
-      return onTriggerInner(false, 'hover', mouseLeaveDelay);
-    } : undefined,
-    onAnimationEnd: function onAnimationEnd(e) {
-      return _onAnimationEnd === null || _onAnimationEnd === void 0 ? void 0 : _onAnimationEnd(e);
-    }
-  };
-  var referenceProps = {
-    ref: referenceRef,
-    className: classnames((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.className, referenceContentCls)
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(referenceElement, referenceProps), exist && container && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", _extends({}, popperContainerProps), /*#__PURE__*/React.createElement("div", _extends({}, popperProps), popperElement, arrow && /*#__PURE__*/React.createElement("div", {
-    className: 'arrow',
-    "data-popper-arrow": ""
-  }))), container));
-});
-Popper.displayName = 'Popper';
-export default Popper;

package/es/popper/style/css.js

@@ -1,2 +0,0 @@
-import '../../style/index.css';
-import './index.css';