@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 3.81 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),r=require("@lexical/react/LexicalTypeaheadMenuPlugin"),i=require("lexical"),n=require("react"),a=require("react-dom"),s=require("@mui/material/Paper"),u=require("@mui/material/MenuList"),l=require("@mui/material/MenuItem"),o=require("@mui/material/ListItemText"),c=require("@mui/material/ListItemIcon"),d=require("@mui/icons-material/PersonAdd"),m=require("@mui/material/Divider"),h=require("../nodes/MentionNode.js"),f=require("../hooks/useMentionLookupService.js"),x=require("../../../StatusAvatar/StatusAvatar.container.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function g(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var j=g(a),N=p(s),b=p(u),$=p(l),M=p(o),O=p(c),v=p(d),P=p(m);const q="NexusRichTextMention",A={NAME:`\\b[A-Z][^\\s${r.PUNCTUATION}]`,PUNCTUATION:r.PUNCTUATION}.PUNCTUATION,C=["@"].join(""),I=`[^${C}${A}\\s]`,T=new RegExp(`(^|\\s|\\()([${C}]((?:${I}${`(?:\\.[ |$]| |[${A}]|)`}){0,75}))$`),y=new RegExp(`(^|\\s|\\()([${C}]((?:${I}){0,50}))$`);function L(e){return function(e,t){let r=T.exec(e);if(null===r&&(r=y.exec(e)),null!==r){const e=r[1],i=r[3];if(i.length>=t)return{leadOffset:r.index+e.length,matchingString:i,replaceableString:r[2]}}return null}(e,0)}class U extends r.MenuOption{constructor(e,t,r){super(e),Object.defineProperty(this,"id",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"name",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"user",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.id=e,this.name=t,this.user=r}}exports.MentionPlugin=a=>{const{allowedMentionUsers:s,onShare:u,t:l}=a,[o]=t.useLexicalComposerContext(),[c,d]=n.useState(null),m=f.useMentionLookupService(c,s),p=r.useBasicTypeaheadTriggerMatch("/",{minLength:0}),g=n.useMemo((()=>m.map((e=>new U(e.id,`${e.firstName||""} ${e.lastName||""}`.trim(),e))).slice(0,5)),[m]),A=n.useCallback(((e,t,r)=>{o.update((()=>{const i=h.createMentionNode(`@${e.name}`,e.user);t&&t.replace(i),i.select(),r()}))}),[o]),C=n.useCallback((e=>null!==p(e,o)?null:L(e)),[p,o]);return e.jsx(r.LexicalTypeaheadMenuPlugin,{onQueryChange:d,onSelectOption:A,triggerFn:C,options:g,commandPriority:i.COMMAND_PRIORITY_NORMAL,menuRenderFn:(t,{selectedIndex:r,selectOptionAndCleanUp:i,setHighlightedIndex:n})=>{if(t.current&&m.length){const a=t.current.getBoundingClientRect().top,s=45*(g.length+1)+25,o=window.innerHeight-a<s?a-s:"unset";return j.createPortal(e.jsx(N.default,{"data-testid":`${q}-root`,className:`${q}-root`,sx:{width:320,maxWidth:"100%",position:"fixed",zIndex:e=>e.zIndex.drawer+1,top:o},elevation:7,children:e.jsxs(b.default,{"data-testid":`${q}-menuList`,className:`${q}-menuList`,children:[g.map(((t,a)=>t.user&&e.jsxs($.default,{"data-testid":`${q}-menuItem`,className:`${q}-menuItem`,selected:r===a,onClick:()=>{n(a),i(t)},onMouseEnter:()=>{n(a)},children:[e.jsx(O.default,{children:e.jsx(x.StatusAvatar,{firstName:t.user.firstName,lastName:t.user.lastName})}),e.jsx(M.default,{sx:{ml:4},children:`${t.user.firstName} ${t.user.lastName}`})]},a))),e.jsx(P.default,{},"divider"),e.jsxs($.default,{"data-testid":`${q}-shareWithAnotherUser`,className:`${q}-shareWithAnotherUser`,onClick:()=>{d(null),u?.()},children:[e.jsx(O.default,{children:e.jsx(v.default,{})}),e.jsx(M.default,{sx:{ml:4},children:l("shareWithAnotherUser")})]},"share")]})}),t.current)}return null}})},exports.getPossibleQueryMatch=L;