@kdcloudjs/kdesign 1.0.2

package/lib/anchor/anchor-link.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _hooks = require("../_utils/hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var AnchorLink = function AnchorLink(props) {
+  var customPrefixcls = props.prefixCls,
+      href = props.href,
+      title = props.title,
+      children = props.children,
+      className = props.className,
+      isFirstLevel = props.isFirstLevel;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var anchorLinkPrefixCls = getPrefixCls(prefixCls, 'anchor', customPrefixcls); // 锚点样式前缀
+
+  var _useContext2 = (0, _react.useContext)(_context.default),
+      activeLink = _useContext2.activeLink,
+      scrollTo = _useContext2.scrollTo,
+      onClick = _useContext2.onClick,
+      type = _useContext2.type,
+      registerLink = _useContext2.registerLink;
+
+  var prevHref = (0, _hooks.usePrevious)(href);
+  var mounting = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (mounting.current) {
+      registerLink(href);
+      mounting.current = false;
+      return;
+    }
+
+    if (prevHref !== href) {
+      registerLink(href);
+    }
+  }, [href, registerLink, prevHref]);
+
+  var handleClick = function handleClick(e) {
+    var anchorElement = document.getElementById(href.replace('#', ''));
+
+    if (anchorElement) {
+      anchorElement.scrollIntoView();
+    }
+
+    onClick === null || onClick === void 0 ? void 0 : onClick(e, {
+      title: title,
+      href: href
+    });
+    scrollTo(href);
+  };
+
+  var renderAnchorLink = function renderAnchorLink() {
+    var _classNames2;
+
+    var active = activeLink === href;
+    var anchorLinkClasses = (0, _classnames.default)("".concat(anchorLinkPrefixCls, "-link"), (0, _defineProperty2.default)({}, "".concat(anchorLinkPrefixCls, "-link-active"), active), className);
+    var titleClassName = (0, _classnames.default)("".concat(anchorLinkPrefixCls, "-link-title"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(anchorLinkPrefixCls, "-link-title-active"), active), (0, _defineProperty2.default)(_classNames2, "".concat(anchorLinkPrefixCls, "-link-title-secondary"), !isFirstLevel && type === 'bookmarks'), _classNames2));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: anchorLinkClasses
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      title: typeof title === 'string' ? title : '',
+      className: titleClassName,
+      onClick: handleClick
+    }, title), type !== 'menu' && children);
+  };
+
+  return renderAnchorLink();
+};
+
+var _default = AnchorLink;
+exports.default = _default;

package/lib/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/lib/anchor/anchor.js

@@ -0,0 +1,561 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AnchorTypes = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _utils = require("../_utils");
+
+var _type = require("../_utils/type");
+
+var _context6 = _interopRequireDefault(require("./context"));
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+var _index = require("../index");
+
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+
+var _reactChildren = require("../_utils/react-children");
+
+var _hooks = require("../_utils/hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var sharpMatcherRegx = /#(\S+)$/;
+var AnchorTypes = (0, _type.tuple)('bookmarks', 'menu', 'advanced');
+exports.AnchorTypes = AnchorTypes;
+
+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 = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var anchorProps = (0, _utils.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); // 锚点样式前缀
+
+  (0, _devwarning.default)(AnchorTypes.indexOf(type) === -1, 'anchor', "cannot found anchor type '".concat(type, "'"));
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeLink = _useState2[0],
+      setActiveLink = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      fixedTop = _useState4[0],
+      setFixedTop = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      links = _useState6[0],
+      setLinks = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      anchorPosition = _useState8[0],
+      setAnchorPosition = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(0),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      listWidth = _useState10[0],
+      setListWidth = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      menuWrapWidth = _useState12[0],
+      setMenuWrapWidth = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      listPostion = _useState14[0],
+      setListPosition = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([0]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      positionHistory = _useState16[0],
+      setPositionHistory = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(!!props.visible),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      optionShow = _useState18[0],
+      setOptionShow = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      isLocked = _useState20[0],
+      setIsLocked = _useState20[1];
+
+  var isAdcanced = type === 'advanced'; // ref
+
+  var wrapperRef = _react.default.useRef(null);
+
+  var inkRef = _react.default.useRef(null);
+
+  var linkContentRef = _react.default.useRef(null);
+
+  var iconRef = _react.default.useRef(null);
+
+  var menuWrapRef = /*#__PURE__*/_react.default.createRef();
+
+  var normalRef = _react.default.useRef(null);
+
+  var anchorRef = ref || normalRef;
+
+  var linksWidthRef = _react.default.useRef([]);
+
+  var wrapperClass = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-wrapper"), true)); // classes
+
+  var anchorMenuClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-menu"), true));
+  var anchorAdvancedClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-advanced"), true));
+  var inkClass = (0, _classnames.default)("".concat(anchorPrefixCls, "-ink-line"), {
+    visible: activeLink
+  });
+
+  _react.default.useEffect(function () {
+    setOptionShow(!!props.visible);
+  }, [props.visible]);
+
+  var updateInk = (0, _react.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.default.useRef(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  (0, _react.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 = (0, _map.default)(_context = (0, _from.default)(nodelist)).call(_context, function (item) {
+          return item.getBoundingClientRect().width;
+        });
+        linksWidthRef.current = linksWidth;
+      }
+
+      return;
+    }
+
+    updateInk();
+  });
+  (0, _hooks.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 = (0, _map.default)(_context2 = (0, _from.default)(nodelist)).call(_context2, function (item) {
+      return item.getBoundingClientRect().width;
+    });
+    linksWidthRef.current = linksWidth;
+  });
+  (0, _react.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]);
+  (0, _react.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 (!(0, _includes.default)(links).call(links, link)) {
+      setLinks(function (pre) {
+        var _context3;
+
+        return (0, _concat.default)(_context3 = []).call(_context3, (0, _toConsumableArray2.default)(pre), [link]);
+      });
+    }
+  };
+
+  var getScrollContainer = (0, _react.useCallback)(function () {
+    var getFunc = getContainer || getDefaultContainer;
+    return getFunc();
+  }, [getContainer]);
+  var getAnchor = (0, _react.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 = (0, _react.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 = (0, _react.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]);
+  (0, _react.useEffect)(function () {
+    getScrollContainer().addEventListener('scroll', handleScroll);
+    handleScroll();
+    return function () {
+      return window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, getScrollContainer]);
+  (0, _react.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 = (0, _extends2.default)((0, _extends2.default)({}, 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 (0, _map.default)(_context4 = (0, _reactChildren.toArray)(linksChildren)).call(_context4, function (item, indx) {
+      if (!item) return item;
+      return /*#__PURE__*/_react.default.cloneElement(item, {
+        isFirstLevel: true,
+        key: indx
+      });
+    });
+  };
+
+  var anchorBookmarksContent = function anchorBookmarksContent(ref) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref,
+      className: wrapperClass,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: anchorPrefixCls,
+      style: fixedTop ? {
+        position: 'fixed',
+        top: offsetTop || 0,
+        width: anchorPosition.width
+      } : undefined
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(anchorPrefixCls, "-ink")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: inkClass,
+      ref: inkRef
+    })), addChildrenProps(children)));
+  };
+
+  var renderLeftArrow = function renderLeftArrow() {
+    var leftClasses = (0, _classnames.default)("".concat(anchorMenuClass, "-left-arrows"), (0, _defineProperty2.default)({}, "".concat(anchorMenuClass, "-left-arrows-disabled"), listPostion === 0));
+
+    var handleLeft = function handleLeft() {
+      if (listPostion === 0) return;
+      var positions = (0, _toConsumableArray2.default)(positionHistory);
+      positions.pop();
+      setPositionHistory(positions);
+      setListPosition(positions[positions.length - 1]);
+    };
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: leftClasses,
+      onClick: handleLeft
+    }, /*#__PURE__*/_react.default.createElement(_index.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 = (0, _classnames.default)("".concat(anchorMenuClass, "-right-arrows"), (0, _defineProperty2.default)({}, "".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 (0, _concat.default)(_context5 = []).call(_context5, (0, _toConsumableArray2.default)(pre), [posiostion]);
+      });
+      setListPosition(posiostion);
+    };
+
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: rightClasses,
+      onClick: handleRight
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-right"
+    }));
+  };
+
+  var anchorMenuContent = /*#__PURE__*/_react.default.createElement("div", {
+    ref: anchorRef,
+    className: "".concat(anchorPrefixCls, "-menu-wrapper"),
+    style: (0, _extends2.default)({
+      width: '100%'
+    }, style)
+  }, /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: "".concat(anchorPrefixCls, "-menu-wrap"),
+    ref: menuWrapRef,
+    style: {
+      maxWidth: listWidth
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: linkContentRef,
+    className: "".concat(anchorPrefixCls, "-menu-link-list"),
+    style: {
+      left: "".concat(listPostion, "px")
+    }
+  }, children)), renderRightArrow()));
+
+  var renderAnchorAdvanced = function renderAnchorAdvanced() {
+    var iconList = (0, _reactChildren.toArray)(lockedIcon);
+
+    var unlock = iconList[0] || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "unlock-solid"
+    });
+
+    var lock = iconList[1] || /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "lock-solid"
+    });
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: anchorAdvancedClass,
+      style: dropdownStyle
+    }, lockedIcon !== false && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(anchorPrefixCls, "-advanced-lock"),
+      onClick: function onClick() {
+        return setIsLocked(!isLocked);
+      }
+    }, isLocked ? lock : unlock), anchorBookmarksContent(wrapperRef));
+  };
+
+  var anchorAdvancedContent = (0, _usePopper.default)( /*#__PURE__*/_react.default.createElement("span", {
+    className: "".concat(anchorPrefixCls, "-advanced-arrows"),
+    ref: isAdcanced ? ref || iconRef : null
+  }, icon || /*#__PURE__*/_react.default.createElement(_index.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.default.createElement(_context6.default.Provider, {
+    value: {
+      registerLink: registerLink,
+      activeLink: activeLink,
+      scrollTo: handleScrollTo,
+      onClick: onClick,
+      type: type
+    }
+  }, renderAnchorContent(type));
+};
+
+var Anchor = /*#__PURE__*/_react.default.forwardRef(InternalAnchor);
+
+Anchor.displayName = 'Anchor';
+var _default = Anchor;
+exports.default = _default;

package/lib/anchor/context.d.ts

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