@kdcloudjs/kdesign 1.6.34 → 1.6.35

package/es/anchor/anchor.js

@@ -19,44 +19,33 @@ import { toArray } from '../_utils/react-children';
 import { useResizeObserver } from '../_utils/hooks';
 var sharpMatcherRegx = /#(\S+)$/;
 export var AnchorTypes = tuple('bookmarks', 'menu', 'advanced');
-
 function getDefaultContainer() {
   return window;
 }
-
 function getOffsetTop(element, container) {
   if (!element.getClientRects().length) {
     return 0;
   }
-
   var rect = element.getBoundingClientRect();
-
   if (rect.width || rect.height) {
     if (container === window) {
       container = element.ownerDocument.documentElement;
       return rect.top - container.clientTop;
     }
-
     return rect.top - container.getBoundingClientRect().top;
   }
-
   return rect.top;
 }
-
 function isWindow(obj) {
   return obj !== null && obj !== undefined && obj === obj.window;
 }
-
 function getScroll(target, top) {
   var _a;
-
   if (typeof window === 'undefined') {
     return 0;
   }
-
   var method = top ? 'scrollTop' : 'scrollLeft';
   var result = 0;
-
   if (isWindow(target)) {
     result = target[top ? 'pageYOffset' : 'pageXOffset'];
   } else if (target instanceof Document) {
@@ -64,43 +53,35 @@ function getScroll(target, top) {
   } else if (target) {
     result = target[method];
   }
-
   if (target && !isWindow(target) && typeof result !== 'number') {
     result = (_a = (target.ownerDocument || target).documentElement) === null || _a === void 0 ? void 0 : _a[method];
   }
-
   return result;
 }
-
 function easeInOutCubic(t, b, c, d) {
   var cc = c - b;
   t /= d / 2;
-
   if (t < 1) {
     return cc / 2 * t * t * t + b;
   }
-
   return cc / 2 * ((t -= 2) * t * t + 2) + b;
 }
-
 function scrollTo(y) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _options$getContainer = options.getContainer,
-      getContainer = _options$getContainer === void 0 ? function () {
-    return window;
-  } : _options$getContainer,
-      callback = options.callback,
-      _options$duration = options.duration,
-      duration = _options$duration === void 0 ? 450 : _options$duration;
+    getContainer = _options$getContainer === void 0 ? function () {
+      return window;
+    } : _options$getContainer,
+    callback = options.callback,
+    _options$duration = options.duration,
+    duration = _options$duration === void 0 ? 450 : _options$duration;
   var container = getContainer();
   var scrollTop = getScroll(container, true);
   var startTime = Date.now();
-
   var frameFunc = function frameFunc() {
     var timestamp = Date.now();
     var time = timestamp - startTime;
     var nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
-
     if (isWindow(container)) {
       ;
       container.scrollTo(window.pageXOffset, nextScrollTop);
@@ -111,102 +92,85 @@ function scrollTo(y) {
       ;
       container.scrollTop = nextScrollTop;
     }
-
     if (time < duration) {
       window.requestAnimationFrame(frameFunc);
     } else if (typeof callback === 'function') {
       callback();
     }
   };
-
   window.requestAnimationFrame(frameFunc);
 }
-
 var InternalAnchor = function InternalAnchor(props, ref) {
   var _a;
-
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls,
-      userDefaultProps = _useContext.compDefaultProps;
-
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
   var anchorProps = getCompProps('Anchor', userDefaultProps, props);
   var customPrefixcls = anchorProps.prefixCls,
-      className = anchorProps.className,
-      children = anchorProps.children,
-      type = anchorProps.type,
-      onChange = anchorProps.onChange,
-      onClick = anchorProps.onClick,
-      getCurrentAnchor = anchorProps.getCurrentAnchor,
-      _anchorProps$offsetTo = anchorProps.offsetTop,
-      offsetTop = _anchorProps$offsetTo === void 0 ? 0 : _anchorProps$offsetTo,
-      targetOffset = anchorProps.targetOffset,
-      getContainer = anchorProps.getContainer,
-      _anchorProps$bounds = anchorProps.bounds,
-      bounds = _anchorProps$bounds === void 0 ? 5 : _anchorProps$bounds,
-      style = anchorProps.style,
-      _anchorProps$lockedIc = anchorProps.lockedIcon,
-      lockedIcon = _anchorProps$lockedIc === void 0 ? true : _anchorProps$lockedIc,
-      icon = anchorProps.icon,
-      affix = anchorProps.affix,
-      dropdownStyle = anchorProps.dropdownStyle,
-      onVisibleChange = anchorProps.onVisibleChange;
+    className = anchorProps.className,
+    children = anchorProps.children,
+    type = anchorProps.type,
+    onChange = anchorProps.onChange,
+    onClick = anchorProps.onClick,
+    getCurrentAnchor = anchorProps.getCurrentAnchor,
+    _anchorProps$offsetTo = anchorProps.offsetTop,
+    offsetTop = _anchorProps$offsetTo === void 0 ? 0 : _anchorProps$offsetTo,
+    targetOffset = anchorProps.targetOffset,
+    getContainer = anchorProps.getContainer,
+    _anchorProps$bounds = anchorProps.bounds,
+    bounds = _anchorProps$bounds === void 0 ? 5 : _anchorProps$bounds,
+    style = anchorProps.style,
+    _anchorProps$lockedIc = anchorProps.lockedIcon,
+    lockedIcon = _anchorProps$lockedIc === void 0 ? true : _anchorProps$lockedIc,
+    icon = anchorProps.icon,
+    affix = anchorProps.affix,
+    dropdownStyle = anchorProps.dropdownStyle,
+    onVisibleChange = anchorProps.onVisibleChange;
   var anchorPrefixCls = getPrefixCls(prefixCls, 'anchor', customPrefixcls); // 锚点样式前缀
-
   devWarning(AnchorTypes.indexOf(type) === -1, 'anchor', "cannot found anchor type '".concat(type, "'"));
-
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeLink = _useState2[0],
-      setActiveLink = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    activeLink = _useState2[0],
+    setActiveLink = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      fixedTop = _useState4[0],
-      setFixedTop = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    fixedTop = _useState4[0],
+    setFixedTop = _useState4[1];
   var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      links = _useState6[0],
-      setLinks = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    links = _useState6[0],
+    setLinks = _useState6[1];
   var _useState7 = useState({}),
-      _useState8 = _slicedToArray(_useState7, 2),
-      anchorPosition = _useState8[0],
-      setAnchorPosition = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    anchorPosition = _useState8[0],
+    setAnchorPosition = _useState8[1];
   var _useState9 = useState(0),
-      _useState10 = _slicedToArray(_useState9, 2),
-      listWidth = _useState10[0],
-      setListWidth = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    listWidth = _useState10[0],
+    setListWidth = _useState10[1];
   var _useState11 = useState(0),
-      _useState12 = _slicedToArray(_useState11, 2),
-      menuWrapWidth = _useState12[0],
-      setMenuWrapWidth = _useState12[1];
-
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuWrapWidth = _useState12[0],
+    setMenuWrapWidth = _useState12[1];
   var _useState13 = useState(0),
-      _useState14 = _slicedToArray(_useState13, 2),
-      listPostion = _useState14[0],
-      setListPosition = _useState14[1];
-
+    _useState14 = _slicedToArray(_useState13, 2),
+    listPostion = _useState14[0],
+    setListPosition = _useState14[1];
   var _useState15 = useState([0]),
-      _useState16 = _slicedToArray(_useState15, 2),
-      positionHistory = _useState16[0],
-      setPositionHistory = _useState16[1];
-
+    _useState16 = _slicedToArray(_useState15, 2),
+    positionHistory = _useState16[0],
+    setPositionHistory = _useState16[1];
   var _useState17 = useState(!!props.visible),
-      _useState18 = _slicedToArray(_useState17, 2),
-      optionShow = _useState18[0],
-      setOptionShow = _useState18[1];
-
+    _useState18 = _slicedToArray(_useState17, 2),
+    optionShow = _useState18[0],
+    setOptionShow = _useState18[1];
   var _useState19 = useState(false),
-      _useState20 = _slicedToArray(_useState19, 2),
-      isLocked = _useState20[0],
-      setIsLocked = _useState20[1];
-
-  var isAdcanced = type === 'advanced'; // ref
-
+    _useState20 = _slicedToArray(_useState19, 2),
+    isLocked = _useState20[0],
+    setIsLocked = _useState20[1];
+  var isAdcanced = type === 'advanced';
+  // ref
   var wrapperRef = React.useRef(null);
   var inkRef = React.useRef(null);
   var linkContentRef = React.useRef(null);
@@ -215,8 +179,8 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var normalRef = React.useRef(null);
   var anchorRef = ref || normalRef;
   var linksWidthRef = React.useRef([]);
-  var wrapperClass = classNames(className, _defineProperty({}, "".concat(anchorPrefixCls, "-wrapper"), true)); // classes
-
+  var wrapperClass = classNames(className, _defineProperty({}, "".concat(anchorPrefixCls, "-wrapper"), true));
+  // classes
   var anchorMenuClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-menu"), true));
   var anchorAdvancedClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-advanced"), true));
   var inkClass = classNames("".concat(anchorPrefixCls, "-line-slider"), {
@@ -229,55 +193,42 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     var anchorNode = (isAdcanced ? wrapperRef : anchorRef).current;
     var inkNode = inkRef.current;
     var linkNode = anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.getElementsByClassName("".concat(anchorPrefixCls, "-link-title-active"))[0];
-
     if (linkNode && inkNode) {
       inkNode.style.top = "".concat(linkNode.offsetTop + 1, "px");
     }
   }, [anchorPrefixCls, anchorRef, isAdcanced]);
-  var mounting = React.useRef(true); // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  var mounting = React.useRef(true);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(function () {
     var _a;
-
     if (mounting.current) {
       mounting.current = false;
-
       if (linkContentRef.current) {
         var _context;
-
         var nodelist = (_a = linkContentRef.current) === null || _a === void 0 ? void 0 : _a.children;
-
         var linksWidth = _mapInstanceProperty(_context = _Array$from(nodelist)).call(_context, function (item) {
           return item.getBoundingClientRect().width;
         });
-
         linksWidthRef.current = linksWidth;
       }
-
       return;
     }
-
     updateInk();
   });
   useResizeObserver(anchorRef.current, function () {
     var _context2;
-
     var _a;
-
     var nodelist = (_a = linkContentRef.current) === null || _a === void 0 ? void 0 : _a.children;
     if (!nodelist) return;
-
     var linksWidth = _mapInstanceProperty(_context2 = _Array$from(nodelist)).call(_context2, function (item) {
       return item.getBoundingClientRect().width;
     });
-
     linksWidthRef.current = linksWidth;
   });
   useEffect(function () {
     if (linkContentRef.current) {
       setTimeout(function () {
         var _a;
-
         var width = ((_a = linkContentRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
         setListWidth(width);
       }, 0);
@@ -287,22 +238,18 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     if (menuWrapRef.current) {
       setTimeout(function () {
         var _a;
-
         setMenuWrapWidth(((_a = menuWrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0);
       }, 0);
     }
   }, [menuWrapRef]);
-
   var registerLink = function registerLink(link) {
     if (!_includesInstanceProperty(links).call(links, link)) {
       setLinks(function (pre) {
         var _context3;
-
         return _concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(pre), [link]);
       });
     }
   };
-
   var getScrollContainer = useCallback(function () {
     var getFunc = getContainer || getDefaultContainer;
     return getFunc();
@@ -314,16 +261,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     var container = getScrollContainer();
     links.forEach(function (link) {
       var sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
-
       if (!sharpLinkMatch) {
         return;
       }
-
       var target = document.getElementById(sharpLinkMatch[1]);
-
       if (target) {
         var top = getOffsetTop(target, container);
-
         if (top < offsetTop + bounds) {
           linkSections.push({
             link: link,
@@ -332,33 +275,26 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         }
       }
     });
-
     if (linkSections.length) {
       var maxSection = linkSections.reduce(function (prev, curr) {
         return curr.top > prev.top ? curr : prev;
       });
       return maxSection.link;
     }
-
     return '';
   }, [getScrollContainer, links]);
-
   var handleScrollTo = function handleScrollTo(link) {
     setCurrentActiveLink(link);
     var container = getScrollContainer();
     var scrollTop = getScroll(container, true);
     var sharpLinkMatch = sharpMatcherRegx.exec(link);
-
     if (!sharpLinkMatch) {
       return;
     }
-
     var targetElement = document.getElementById(sharpLinkMatch[1]);
-
     if (!targetElement) {
       return;
     }
-
     var eleOffsetTop = getOffsetTop(targetElement, container);
     var y = scrollTop + eleOffsetTop;
     y -= targetOffset !== undefined ? targetOffset : offsetTop || 0;
@@ -366,12 +302,10 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       getContainer: getScrollContainer
     });
   };
-
   var setCurrentActiveLink = useCallback(function (link) {
     if (activeLink === link) {
       return undefined;
     }
-
     setActiveLink(typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link);
     onChange === null || onChange === void 0 ? void 0 : onChange(link);
   }, [onChange, setActiveLink, activeLink, getCurrentAnchor]);
@@ -379,16 +313,13 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     if (affix && type !== 'advanced' && anchorRef.current) {
       var container = getScrollContainer();
       var top = getOffsetTop(anchorRef.current, container);
-
       if (top <= offsetTop) {
         setFixedTop(true);
       }
-
       if (top > offsetTop) {
         setFixedTop(false);
       }
     }
-
     var currentActiveLink = getAnchor(targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds);
     currentActiveLink && setCurrentActiveLink(currentActiveLink);
   }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef, targetOffset]);
@@ -402,10 +333,9 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   useEffect(function () {
     if (!isAdcanced && anchorRef && anchorRef.current) {
       var _anchorRef$current$ge = anchorRef.current.getBoundingClientRect(),
-          top = _anchorRef$current$ge.top,
-          width = _anchorRef$current$ge.width,
-          height = _anchorRef$current$ge.height;
-
+        top = _anchorRef$current$ge.top,
+        width = _anchorRef$current$ge.width,
+        height = _anchorRef$current$ge.height;
       setAnchorPosition({
         top: top,
         width: width,
@@ -413,13 +343,11 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       });
     }
   }, [anchorRef, getScrollContainer, isAdcanced]);
-
   var handleVisibleChange = function handleVisibleChange(visible) {
     !isLocked && onVisibleChange && onVisibleChange(visible);
     if (props.visible !== undefined) return;
     !isLocked && setOptionShow(visible);
   };
-
   var popperProps = _extends(_extends({
     autoPlacement: false
   }, anchorProps), {
@@ -429,15 +357,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     gap: -(((_a = (ref || iconRef).current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0),
     onVisibleChange: handleVisibleChange
   });
-
   var fixedRef = React.useRef(null);
-
   if (type === 'advanced' && isLocked) {
     if (fixedRef.current) {
       var _fixedRef$current$get = fixedRef.current.getBoundingClientRect(),
-          left = _fixedRef$current$get.left,
-          top = _fixedRef$current$get.top;
-
+        left = _fixedRef$current$get.left,
+        top = _fixedRef$current$get.top;
       popperProps.popperStyle = {
         position: 'fixed',
         left: left,
@@ -445,10 +370,8 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       };
     }
   }
-
   var addChildrenProps = function addChildrenProps(linksChildren) {
     var _context4;
-
     return _mapInstanceProperty(_context4 = toArray(linksChildren)).call(_context4, function (item, indx) {
       if (!item) return item;
       return /*#__PURE__*/React.cloneElement(item, {
@@ -457,7 +380,6 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       });
     });
   };
-
   var anchorBookmarksContent = function anchorBookmarksContent(ref) {
     return /*#__PURE__*/React.createElement("div", {
       ref: ref,
@@ -477,20 +399,15 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       ref: inkRef
     })), addChildrenProps(children)));
   };
-
   var renderLeftArrow = function renderLeftArrow() {
     var leftClasses = classNames("".concat(anchorMenuClass, "-left-arrows"), _defineProperty({}, "".concat(anchorMenuClass, "-left-arrows-disabled"), listPostion === 0));
-
     var handleLeft = function handleLeft() {
       if (listPostion === 0) return;
-
       var positions = _toConsumableArray(positionHistory);
-
       positions.pop();
       setPositionHistory(positions);
       setListPosition(positions[positions.length - 1]);
     };
-
     return /*#__PURE__*/React.createElement("span", {
       className: leftClasses,
       onClick: handleLeft
@@ -498,36 +415,29 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       type: "arrow-left"
     }));
   };
-
   var findCurrentLinkPosition = function findCurrentLinkPosition(linksWidth, boxWidth, position) {
     if (!linksWidth.length) return 0;
     var offset = 0;
-
     for (var index = 0; index < linksWidth.length - 1; index++) {
       if (linksWidth[index] + offset < boxWidth - position) {
         offset += linksWidth[index];
       }
     }
-
     return offset;
   };
-
   var renderRightArrow = function renderRightArrow() {
     var canActionRightArrow = listPostion === menuWrapWidth - listWidth;
     var rightClasses = classNames("".concat(anchorMenuClass, "-right-arrows"), _defineProperty({}, "".concat(anchorMenuClass, "-right-arrows-disabled"), canActionRightArrow));
-
     var handleRight = function handleRight() {
       if (canActionRightArrow) return;
       var offset = findCurrentLinkPosition(linksWidthRef.current, menuWrapWidth, listPostion);
       var posiostion = offset + menuWrapWidth >= listWidth ? menuWrapWidth - listWidth : -offset;
       setPositionHistory(function (pre) {
         var _context5;
-
         return _concatInstanceProperty(_context5 = []).call(_context5, _toConsumableArray(pre), [posiostion]);
       });
       setListPosition(posiostion);
     };
-
     return /*#__PURE__*/React.createElement("span", {
       className: rightClasses,
       onClick: handleRight
@@ -535,7 +445,6 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       type: "arrow-right"
     }));
   };
-
   var anchorMenuContent = /*#__PURE__*/React.createElement("div", {
     ref: anchorRef,
     className: "".concat(anchorPrefixCls, "-menu-wrapper"),
@@ -564,7 +473,6 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       left: "".concat(listPostion, "px")
     }
   }, children)), renderRightArrow()));
-
   var renderAnchorAdvanced = function renderAnchorAdvanced() {
     var iconList = toArray(lockedIcon);
     var unlock = iconList[0] || /*#__PURE__*/React.createElement(Icon, {
@@ -584,30 +492,24 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       }
     }, isLocked ? lock : unlock), anchorBookmarksContent(wrapperRef));
   };
-
   var anchorAdvancedContent = usePopper( /*#__PURE__*/React.createElement("span", {
     className: "".concat(anchorPrefixCls, "-advanced-arrows"),
     ref: isAdcanced ? ref || iconRef : null
   }, icon || /*#__PURE__*/React.createElement(Icon, {
     type: "location-solid"
   })), renderAnchorAdvanced(), popperProps);
-
   var renderAnchorContent = function renderAnchorContent(anchorType) {
     switch (anchorType) {
       case 'bookmarks':
         return anchorBookmarksContent(anchorRef);
-
       case 'menu':
         return anchorMenuContent;
-
       case 'advanced':
         return anchorAdvancedContent;
-
       default:
         return anchorBookmarksContent(anchorRef);
     }
   };
-
   return /*#__PURE__*/React.createElement(AnchorContext.Provider, {
     value: {
       registerLink: registerLink,
@@ -618,7 +520,6 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     }
   }, renderAnchorContent(type));
 };
-
 var Anchor = /*#__PURE__*/React.forwardRef(InternalAnchor);
 Anchor.displayName = 'Anchor';
 export default Anchor;