@yuntijs/ui 1.0.0-beta.111 → 1.0.0-beta.113

package/es/Mentions/index.js

@@ -8,6 +8,8 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { ConfigProvider } from 'antd';
+// @Todo: 升级 0.25.0 后，ops-console 使用的时候出现了只输入 / 无法触发的问题
+
 import { $getRoot, TextNode } from 'lexical';
 import React, { useMemo } from 'react';
 import { isBrowser } from "../utils/tools";

package/es/Mentions/plugins/mention-picker/index.js

@@ -4,7 +4,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { ConfigProvider, Tree } from 'antd';
 import { flatMap } from 'lodash-es';
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { DEFAULT_PUNCTUATION, PRE_TRIGGER_CHARS } from "../../constants";
 import { useCheckForMentionMatch } from "../../hooks";
@@ -65,9 +65,36 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       closeMenu();
     });
   }, [editor, onSelect, queryString, trigger]);
+  var preSelectedIndex = useRef();
+  var handleDisabledItem = useCallback(function (itemProps) {
+    var selectedIndex = itemProps.selectedIndex,
+      setHighlightedIndex = itemProps.setHighlightedIndex;
+    if (selectedIndex !== null) {
+      var _flatOptions$selected;
+      if ((_flatOptions$selected = flatOptions[selectedIndex]) !== null && _flatOptions$selected !== void 0 && _flatOptions$selected.disabled) {
+        var newIndex = selectedIndex;
+        // 如果是最后一项，则回到第一项
+        if (selectedIndex === flatOptions.length - 1) {
+          newIndex = flatOptions.length === 1 ? null : 0;
+          // @ts-ignore
+          setHighlightedIndex(newIndex);
+        } else if (selectedIndex !== preSelectedIndex.current) {
+          var _preSelectedIndex$cur;
+          if (selectedIndex > ((_preSelectedIndex$cur = preSelectedIndex.current) !== null && _preSelectedIndex$cur !== void 0 ? _preSelectedIndex$cur : 0)) {
+            newIndex++;
+          } else {
+            newIndex--;
+          }
+          setHighlightedIndex(newIndex);
+        }
+      }
+      preSelectedIndex.current = selectedIndex;
+    }
+  }, [flatOptions]);
   var renderMenuTree = useCallback(function (itemProps) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp;
+    handleDisabledItem(itemProps);
     return /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         components: {
@@ -104,11 +131,12 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
         treeData: options
       })
     });
-  }, [options, editor, flatOptions, queryString]);
+  }, [handleDisabledItem, options, editor, flatOptions, queryString]);
   var renderMenu = useCallback(function (anchorElementRef, itemProps, _matchingString) {
     var selectedIndex = itemProps.selectedIndex,
       selectOptionAndCleanUp = itemProps.selectOptionAndCleanUp,
       setHighlightedIndex = itemProps.setHighlightedIndex;
+    handleDisabledItem(itemProps);
     if (anchorElementRef.current) {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx("div", {
         className: cx(styles.menuOverlay, overlayClassName),
@@ -132,7 +160,7 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
       }), anchorElementRef.current);
     }
     return null;
-  }, [cx, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
+  }, [cx, handleDisabledItem, options, overlayClassName, queryString, renderMenuTree, styles.menuOverlay]);
   return /*#__PURE__*/_jsx(LexicalTypeaheadMenuPlugin, {
     anchorClassName: styles.anchor,
     menuRenderFn: renderMenu,

package/es/Mentions/plugins/mention-picker/menu-item.js

@@ -1,6 +1,6 @@
 import { Flex } from 'antd';
 import { escapeRegExp } from 'lodash-es';
-import React, { memo, useMemo } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import Typography from "../../../Typography";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +43,22 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
     before = _useMemo.before,
     middle = _useMemo.middle,
     after = _useMemo.after;
+  var ref = useRef(null);
+
+  // 自动滚动
+  useEffect(function () {
+    if (isSelected) {
+      var _ref$current;
+      ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [isSelected]);
+  useEffect(function () {
+    option.setRefElement(ref === null || ref === void 0 ? void 0 : ref.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/_jsxs(Flex, {
     align: "center",
     className: styles.menuItem,
@@ -53,7 +69,7 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(index, option);
     },
-    ref: option.setRefElement,
+    ref: ref,
     tabIndex: -1,
     title: option.htmlTitle || option.label,
     children: [showIcon && /*#__PURE__*/_jsx(Flex, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.111",
+  "version": "1.0.0-beta.113",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",