@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
64 lines • 2.75 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { Icon } from '@lobehub/ui';
import { Flex, Tooltip } from 'antd';
import { CircleAlert } from 'lucide-react';
import React, { memo, useEffect } from 'react';
import { useOptionsMap } from "../../provider";
import { useSelectOrDelete } from "../../hooks";
import { MentionNode } from "./node";
import { useStyles } from "./style";
import { DELETE_MENTION_COMMAND } from "./utils";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var MentionNodeComponent = /*#__PURE__*/memo(function (_ref) {
var nodeKey = _ref.nodeKey,
variable = _ref.variable;
var optionsMap = useOptionsMap();
var _useLexicalComposerCo = useLexicalComposerContext(),
_useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
editor = _useLexicalComposerCo2[0];
var _useSelectOrDelete = useSelectOrDelete(nodeKey, DELETE_MENTION_COMMAND),
_useSelectOrDelete2 = _slicedToArray(_useSelectOrDelete, 2),
ref = _useSelectOrDelete2[0],
isSelected = _useSelectOrDelete2[1];
var option = optionsMap === null || optionsMap === void 0 ? void 0 : optionsMap[variable];
var _useStyles = useStyles({
isSelected: isSelected,
isError: !option || !!option.error
}),
styles = _useStyles.styles;
useEffect(function () {
if (!editor.hasNodes([MentionNode])) {
throw new Error('MentionsNodePlugin: MentionNode not registered on editor');
}
}, [editor]);
var Item = /*#__PURE__*/_jsx(Flex, {
className: styles.root,
ref: ref,
children: /*#__PURE__*/_jsxs(Flex, {
align: "center",
gap: 2,
children: [(!option || option.error) && /*#__PURE__*/_jsx(Icon, {
className: styles.error,
icon: CircleAlert
}), (option === null || option === void 0 ? void 0 : option.icon) && /*#__PURE__*/_jsx(Flex, {
children: option.icon
}), /*#__PURE__*/_jsx(Flex, {
className: styles.text,
gap: 2,
title: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable,
children: /*#__PURE__*/_jsx("span", {
children: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable
})
})]
})
});
if (option !== null && option !== void 0 && option.error) {
return /*#__PURE__*/_jsx(Tooltip, {
title: option === null || option === void 0 ? void 0 : option.error,
children: Item
});
}
return Item;
});