@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
89 lines (88 loc) • 2.98 kB
JavaScript
import { Flex } from 'antd';
import { escapeRegExp } from 'lodash-es';
import React, { memo, useEffect, useMemo, useRef } from 'react';
import Typography from "../../../Typography";
import { useStyles } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Text = Typography.Text;
export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
var index = _ref.index,
isSelected = _ref.isSelected,
_onClick = _ref.onClick,
_onMouseEnter = _ref.onMouseEnter,
option = _ref.option,
queryString = _ref.queryString,
_ref$showIcon = _ref.showIcon,
showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon;
var _useStyles = useStyles({
isSelected: isSelected,
disabled: option.disabled
}),
styles = _useStyles.styles;
var label = option.label;
var _useMemo = useMemo(function () {
var before = label;
var middle = '';
var after = '';
if (queryString) {
var regex = new RegExp(escapeRegExp(queryString), 'i');
var match = regex.exec(option.label);
if (match) {
before = label.slice(0, Math.max(0, match.index));
middle = match[0];
after = label.slice(Math.max(0, match.index + match[0].length));
}
}
return {
before: before,
middle: middle,
after: after
};
}, [option.label, queryString, label]),
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,
gap: 4,
onClick: function onClick() {
return _onClick === null || _onClick === void 0 ? void 0 : _onClick(index, option);
},
onMouseEnter: function onMouseEnter() {
return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(index, option);
},
ref: ref,
tabIndex: -1,
title: option.htmlTitle || option.label,
children: [showIcon && /*#__PURE__*/_jsx(Flex, {
className: styles.menuItemIcon,
children: option.icon
}), /*#__PURE__*/_jsxs("div", {
className: styles.menuItemLabel,
children: [before, /*#__PURE__*/_jsx(Text, {
mark: true,
children: middle
}), after]
}), /*#__PURE__*/_jsx(Flex, {
children: option.extraElement
})]
}, option.key);
});
MentionMenuItem.displayName = 'MentionMenuItem';