@skbkontur/markdown 2.4.2 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/src/Markdown/Markdown.js

@@ -135,7 +135,7 @@ export var Markdown = function (props) {
         if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
             var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
             var position = getCursorCoordinates(textareaNode, guid);
-            return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onUserSelect: handleSelectUser }));
+            return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onSelectUser: handleSelectUser }));
         }
     }
     function handleChangeViewMode(mode) {

package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.d.ts

@@ -1,7 +1,7 @@
 import { Menu } from '@skbkontur/react-ui/internal/Menu';
 import { ChangeEvent, MouseEvent, RefObject, SyntheticEvent } from 'react';
-import { Token, User } from '../types';
+import { Token } from '../types';
 export declare function mentionActions(event: ChangeEvent<HTMLTextAreaElement> | MouseEvent<HTMLTextAreaElement> | SyntheticEvent<HTMLTextAreaElement, Event>, setToken: (token?: Token) => void): void;
-export declare const useMenuKeyListener: (onUserSelect: (login: string, name: string) => void, users?: User[], menuRef?: RefObject<Menu>) => void;
+export declare const useMenuKeyListener: (onChangeHighlightedIndex: (step: number) => void, onSelectUser: () => void, menuRef?: RefObject<Menu>) => void;
 export declare const getMentionValue: (mention?: Token | null) => string;
 export declare function getAvatarUrl(sid: undefined | null | string): string;

package/src/Markdown/MarkdownHelpers/markdownMentionHelpers.js

@@ -12,28 +12,30 @@ export function mentionActions(event, setToken) {
         setToken(undefined);
     }
 }
-export var useMenuKeyListener = function (onUserSelect, users, menuRef) {
+export var useMenuKeyListener = function (onChangeHighlightedIndex, onSelectUser, menuRef) {
     useEffect(function () {
         var keyListener = function (event) {
-            var _a;
             if (menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) {
                 if (ArrowsVertical.includes(event.key)) {
                     event.preventDefault();
-                    if (event.key === 'ArrowUp')
+                    if (event.key === 'ArrowUp') {
                         menuRef.current.up();
-                    if (event.key === 'ArrowDown')
+                        onChangeHighlightedIndex(-1);
+                    }
+                    if (event.key === 'ArrowDown') {
                         menuRef.current.down();
+                        onChangeHighlightedIndex(1);
+                    }
                 }
-                if (event.key === 'Enter' && (users === null || users === void 0 ? void 0 : users.length)) {
+                if (event.key === 'Enter') {
                     event.preventDefault();
-                    var selected = users[menuRef.current.state.highlightedIndex];
-                    onUserSelect((_a = selected.login) !== null && _a !== void 0 ? _a : '', selected.name);
+                    onSelectUser();
                 }
             }
         };
         window.addEventListener('keydown', keyListener);
         return function () { return window.removeEventListener('keydown', keyListener); };
-    }, [menuRef, onUserSelect, users]);
+    }, [menuRef, onSelectUser, onChangeHighlightedIndex]);
 };
 export var getMentionValue = function (mention) { var _a, _b; return (_b = (_a = mention === null || mention === void 0 ? void 0 : mention.value) === null || _a === void 0 ? void 0 : _a.replace('@', '')) !== null && _b !== void 0 ? _b : ''; };
 export function getAvatarUrl(sid) {

package/src/Markdown/MarkdownMention.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { User } from './types';
 interface Props {
     getUsersApi: (value: string) => Promise<User[]>;
-    onUserSelect: (login: string, name: string) => void;
+    onSelectUser: (login: string, name: string) => void;
     value: string;
     x: number;
     y: number;

package/src/Markdown/MarkdownMention.js

@@ -43,11 +43,14 @@ import { MARKDOWN_RENDER_CONTAINER, INPUT_DEBOUNCE_TIME } from './constants';
 import { getMarkdownMentionStyle, MentionMenuItem, UserDescriptions, UserWrapper, Avatar } from './Markdown.styled';
 import { getAvatarUrl, useMenuKeyListener } from './MarkdownHelpers/markdownMentionHelpers';
 export var MarkdownMention = function (_a) {
-    var value = _a.value, onUserSelect = _a.onUserSelect, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
-    var _b = useState(), users = _b[0], setUsers = _b[1];
+    var _b;
+    var value = _a.value, onSelectUser = _a.onSelectUser, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
+    var _c = useState(), users = _c[0], setUsers = _c[1];
+    var _d = useState(0), highlightedIndex = _d[0], setHighlightedIndex = _d[1];
     var menuRef = useRef(null);
     var markdownMentionsRef = useRef(document.getElementById(MARKDOWN_RENDER_CONTAINER));
     var timerRef = useRef(INPUT_DEBOUNCE_TIME);
+    var usersLength = (_b = users === null || users === void 0 ? void 0 : users.length) !== null && _b !== void 0 ? _b : 0;
     if (!markdownMentionsRef.current) {
         var container = document.createElement('div');
         container.id = MARKDOWN_RENDER_CONTAINER;
@@ -75,14 +78,35 @@ export var MarkdownMention = function (_a) {
             Toast.push('Ошибка в получении списка пользователей');
         }
     }, [getUsersApi, value]);
-    useMenuKeyListener(onUserSelect, users, menuRef);
-    if (!(users === null || users === void 0 ? void 0 : users.length))
+    useEffect(function () {
+        setHighlightedIndex(0);
+    }, [users]);
+    useMenuKeyListener(handleChangeHighlightedIndex, function () { return handleSelectUser(highlightedIndex); }, menuRef);
+    if (!usersLength)
         return null;
     return createPortal(React.createElement(ZIndex, { priority: "Toast", style: getMarkdownMentionStyle(x, y) },
-        React.createElement(Menu, { ref: menuRef, preventWindowScroll: true, hasShadow: true, maxHeight: 300, width: 320 }, users === null || users === void 0 ? void 0 : users.map(function (user) { return (React.createElement(MentionMenuItem, { key: user.id, onClick: function () { var _a; return onUserSelect((_a = user === null || user === void 0 ? void 0 : user.login) !== null && _a !== void 0 ? _a : '', user.name); } },
+        React.createElement(Menu, { ref: menuRef, preventWindowScroll: true, hasShadow: true, initialSelectedItemIndex: 0, maxHeight: 300, width: 320 }, users === null || users === void 0 ? void 0 : users.map(function (user, idx) { return (React.createElement(MentionMenuItem, { key: user.id, onClick: function () { return handleSelectUser(idx); } },
             React.createElement(UserWrapper, null,
                 React.createElement(Avatar, { height: 48, width: 48, src: getAvatarUrl(user.sid) }),
                 React.createElement("div", null,
                     React.createElement("div", null, user.name),
                     React.createElement(UserDescriptions, null, user === null || user === void 0 ? void 0 : user.teams.map(function (t) { return t.caption; }).join(', ')))))); }))), markdownMentionsRef.current);
+    function handleChangeHighlightedIndex(step) {
+        var usersLengthIndex = usersLength - 1;
+        if (step === -1 && !highlightedIndex)
+            setHighlightedIndex(usersLengthIndex);
+        else if (step === 1 && highlightedIndex === usersLengthIndex)
+            setHighlightedIndex(0);
+        else
+            setHighlightedIndex(highlightedIndex + step);
+    }
+    function handleSelectUser(idx) {
+        if (users) {
+            var selectedUser = users[idx];
+            if (selectedUser) {
+                var login = selectedUser.login, name_1 = selectedUser.name;
+                onSelectUser(login, name_1);
+            }
+        }
+    }
 };