@kdcloudjs/kdesign 1.0.2

package/es/anchor/anchor.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export declare type AnchorContainer = HTMLElement | Window;
+export declare const AnchorTypes: ["bookmarks", "menu", "advanced"];
+export declare type AnchorType = typeof AnchorTypes[number];
+export interface AnchorProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    type?: AnchorType;
+    offsetTop?: number;
+    bounds?: number;
+    affix?: boolean;
+    lockedIcon?: boolean | React.ReactNode;
+    icon?: React.ReactNode;
+    dropdownStyle?: React.CSSProperties;
+    visible?: boolean;
+    getContainer?: () => AnchorContainer;
+    getCurrentAnchor?: () => string;
+    onClick?: (e: React.MouseEvent<HTMLElement>, link: {
+        title: React.ReactNode;
+        href: string;
+    }) => void;
+    onChange?: (currentActiveLink: string) => void;
+}
+declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & React.RefAttributes<unknown>>;
+export default Anchor;

package/es/anchor/anchor.js

@@ -0,0 +1,511 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useState, useContext, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { tuple } from '../_utils/type';
+import AnchorContext from './context';
+import devWarning from '../_utils/devwarning';
+import { Icon } from '../index';
+import usePopper from '../_utils/usePopper';
+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;
+}
+
+var InternalAnchor = function InternalAnchor(props, ref) {
+  var _a;
+
+  var _useContext = useContext(ConfigContext),
+      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,
+      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];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      fixedTop = _useState4[0],
+      setFixedTop = _useState4[1];
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      links = _useState6[0],
+      setLinks = _useState6[1];
+
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      anchorPosition = _useState8[0],
+      setAnchorPosition = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listWidth = _useState10[0],
+      setListWidth = _useState10[1];
+
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      menuWrapWidth = _useState12[0],
+      setMenuWrapWidth = _useState12[1];
+
+  var _useState13 = useState(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      listPostion = _useState14[0],
+      setListPosition = _useState14[1];
+
+  var _useState15 = useState([0]),
+      _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];
+
+  var _useState19 = useState(false),
+      _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);
+  var iconRef = React.useRef(null);
+  var menuWrapRef = /*#__PURE__*/React.createRef();
+  var normalRef = React.useRef(null);
+  var anchorRef = ref || normalRef;
+  var linksWidthRef = React.useRef([]);
+  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, "-ink-line"), {
+    visible: activeLink
+  });
+  React.useEffect(function () {
+    setOptionShow(!!props.visible);
+  }, [props.visible]);
+  var updateInk = useCallback(function () {
+    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
+
+  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);
+    }
+  }, [linkContentRef, menuWrapRef, children]);
+  useEffect(function () {
+    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();
+  }, [getContainer]);
+  var getAnchor = useCallback(function () {
+    var offsetTop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var bounds = arguments.length > 1 ? arguments[1] : undefined;
+    var linkSections = [];
+    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,
+            top: top
+          });
+        }
+      }
+    });
+
+    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 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]);
+  var handleScroll = useCallback(function () {
+    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(offsetTop || 0, bounds);
+    currentActiveLink && setCurrentActiveLink(currentActiveLink);
+  }, [affix, setFixedTop, offsetTop, bounds, getAnchor, setCurrentActiveLink, type, getScrollContainer, anchorRef]);
+  useEffect(function () {
+    getScrollContainer().addEventListener('scroll', handleScroll);
+    handleScroll();
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, getScrollContainer]);
+  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;
+
+      setAnchorPosition({
+        top: top,
+        width: width,
+        height: height
+      });
+    }
+  }, [anchorRef, getScrollContainer, isAdcanced]);
+
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    !isLocked && onVisibleChange && onVisibleChange(visible);
+    if (props.visible !== undefined) return;
+
+    if (visible) {
+      setOptionShow(visible);
+      return;
+    }
+
+    !isLocked && setOptionShow(visible);
+  };
+
+  var popperProps = _extends(_extends({}, anchorProps), {
+    prefixCls: anchorPrefixCls,
+    defaultVisible: optionShow,
+    visible: optionShow,
+    gap: -(((_a = (ref || iconRef).current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0),
+    onVisibleChange: handleVisibleChange
+  });
+
+  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, {
+        isFirstLevel: true,
+        key: indx
+      });
+    });
+  };
+
+  var anchorBookmarksContent = function anchorBookmarksContent(ref) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      className: wrapperClass,
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: anchorPrefixCls,
+      style: fixedTop ? {
+        position: 'fixed',
+        top: offsetTop || 0,
+        width: anchorPosition.width
+      } : undefined
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(anchorPrefixCls, "-ink")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: inkClass,
+      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
+    }, /*#__PURE__*/React.createElement(Icon, {
+      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
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-right"
+    }));
+  };
+
+  var anchorMenuContent = /*#__PURE__*/React.createElement("div", {
+    ref: anchorRef,
+    className: "".concat(anchorPrefixCls, "-menu-wrapper"),
+    style: _extends({
+      width: '100%'
+    }, style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: anchorMenuClass,
+    style: fixedTop ? {
+      position: 'fixed',
+      top: offsetTop || 0,
+      width: (style === null || style === void 0 ? void 0 : style.width) || '100px'
+    } : {
+      width: style === null || style === void 0 ? void 0 : style.width
+    }
+  }, renderLeftArrow(), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(anchorPrefixCls, "-menu-wrap"),
+    ref: menuWrapRef,
+    style: {
+      maxWidth: listWidth
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: linkContentRef,
+    className: "".concat(anchorPrefixCls, "-menu-link-list"),
+    style: {
+      left: "".concat(listPostion, "px")
+    }
+  }, children)), renderRightArrow()));
+
+  var renderAnchorAdvanced = function renderAnchorAdvanced() {
+    var iconList = toArray(lockedIcon);
+    var unlock = iconList[0] || /*#__PURE__*/React.createElement(Icon, {
+      type: "unlock-solid"
+    });
+    var lock = iconList[1] || /*#__PURE__*/React.createElement(Icon, {
+      type: "lock-solid"
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: anchorAdvancedClass,
+      style: dropdownStyle
+    }, lockedIcon !== false && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(anchorPrefixCls, "-advanced-lock"),
+      onClick: function onClick() {
+        return setIsLocked(!isLocked);
+      }
+    }, 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,
+      activeLink: activeLink,
+      scrollTo: handleScrollTo,
+      onClick: onClick,
+      type: type
+    }
+  }, renderAnchorContent(type));
+};
+
+var Anchor = /*#__PURE__*/React.forwardRef(InternalAnchor);
+Anchor.displayName = 'Anchor';
+export default Anchor;

package/es/anchor/context.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const AnchorContext: React.Context<any>;
+export default AnchorContext;

package/es/anchor/context.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+var AnchorContext = /*#__PURE__*/React.createContext(null);
+export default AnchorContext;

package/es/anchor/index.d.ts

@@ -0,0 +1,7 @@
+import OriginAnchor from './anchor';
+import AnchorLink from './anchor-link';
+export declare type OriginAnchorProps = typeof OriginAnchor & {
+    Link: typeof AnchorLink;
+};
+declare const Anchor: OriginAnchorProps;
+export default Anchor;

package/es/anchor/index.js

@@ -0,0 +1,5 @@
+import OriginAnchor from './anchor';
+import AnchorLink from './anchor-link';
+var Anchor = OriginAnchor;
+Anchor.Link = AnchorLink;
+export default Anchor;

package/es/anchor/style/css.js

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