@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.
3 lines (2 loc) • 4.1 kB
JavaScript
"use client";
import{jsxs as t,jsx as e}from"react/jsx-runtime";import i,{useState as a,useMemo as r,useEffect as o,useCallback as l}from"react";import n from"@mui/material/TextField";import m from"@mui/material/Autocomplete";import s from"@mui/material/ListItem";import p from"@mui/material/ListItemAvatar";import d from"@mui/material/Avatar";import u from"@mui/material/ListItemText";import c from"@mui/material/Typography";import f from"@mui/icons-material/AccountCircle";import{alpha as h}from"@mui/material/styles";import g from"@mui/material/InputAdornment";import x from"@mui/material/Chip";import b from"@mui/material/Paper";import{EmailRegex as v,KeyCodes as y,EmailIncludedRegex as A}from"../../util/constants.js";import{StatusAvatar as I}from"../../StatusAvatar/StatusAvatar.container.js";import{getFullName as C}from"../../util/functions/index.js";import P from"../locale.json.js";import{useTranslate as S}from"../../locales/index.js";const E="NexusEmailAutoComplete",j=i.forwardRef((({availableUsers:i,loading:j=!1,onSearch:w,emails:L=[],emailLimit:N,onEmailsChange:T,placeholder:k,endAdornment:$,onEnterKeySubmit:D,disabled:O=!1,sx:M,...B},F)=>{const H=S(P,"EmailInput"),[K,R]=a([]),[z,G]=a(""),U=L.map((t=>t.email)),V=r((()=>L.some((t=>!t.valid))?H("Please enter a valid email address."):N&&(U.length>N||U.length===N&&z)?H("Maximum number of recipients: {{0}}",{0:N}):void 0),[z,N,U.length,L,H]);o((()=>{L.length<1&&(G(""),R([]))}),[L]);const W=t=>{switch(t.key){case y.ENTER:L.length>0&&!z&&(t.target.blur(),D?.());break;case y.TAB:case y.SPACE:case y.COMMA:if(t.preventDefault(),t.stopPropagation(),z.trim().length>0){const t=z.trim(),e=v.test(t);U.includes(t)||(T([...L,{email:t,valid:e}]),R([...K,z]),G(""))}}},q=t=>{t.preventDefault(),t.target.blur();const e=t.clipboardData.getData("text"),i=e.trim().split(/[;,\t\n\r]+/),a=[];i.forEach((t=>{const e=t.match(A),i=(e?e[0]:t).trim();U.includes(i)||a.push({email:i,valid:v.test(i)})})),a.length?(T([...L,...a]),R([...K,...a.map((t=>t.email))]),G("")):G(e)},J=l(((i,a)=>{const{key:r,...o}=i,{id:l,firstName:n,lastName:m,email:g,avatar:x,disabled:b=!1}=a,v=C(a)||g,y=`${g} (${H("Invite sent")})`;return t(s,{...o,"data-testid":`${E}-userInfo`,disableGutters:!0,sx:{cursor:b?"default":"pointer",pl:2},children:[e(p,{children:b?e(d,{sx:{bgcolor:t=>h(t.palette.text.primary,.3)},children:e(f,{sx:{color:"background.paper"},fontSize:"small"})}):e(I,{id:l,firstName:n,lastName:m,email:g,disabled:b,avatar:x})}),e(u,{primary:e(c,{variant:"body1",sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:a.disabled?"text.disabled":"text.primary"},children:b?y:v}),secondary:e(c,{variant:"body2",sx:{color:a.disabled?"text.disabled":"text.secondary"},children:g})})]},r)}),[H]);return e(m,{...B,id:`${E}-root`,"data-testid":`${E}-root`,className:`${E}-root`,ListboxProps:{sx:{maxHeight:342}},sx:[{"& .MuiInputBase-formControl":{pr:20}},...Array.isArray(M)?M:[M]],PaperComponent:t=>e(b,{...t,elevation:24}),multiple:!0,freeSolo:!0,disabled:O,disableClearable:!0,forcePopupIcon:!1,filterSelectedOptions:!0,options:i||[],loading:j,onInputChange:(t,e)=>{if(G(e),w&&w(e),e){const t=v.test(e);T(L,{email:e,valid:t})}else T(L)},onChange:(t,e)=>{if(e.length>L.length){const t=e[e.length-1],i="string"==typeof t?t:t.email,a="string"!=typeof t||v.test(t);T([...L,{email:i,valid:a}])}else{const t=e.map((t=>({email:"string"==typeof t?t:t.email,valid:"string"!=typeof t||v.test(t)})));T(t)}R(e),w&&w("")},getOptionLabel:t=>t.email,inputValue:z,value:K,renderInput:t=>e(n,{...t,variant:"outlined",fullWidth:!0,"data-testid":"email-input",error:!!V,helperText:V,onKeyDown:W,onPaste:q,autoFocus:!0,slotProps:{input:{...t.InputProps,sx:{minHeight:{xs:100,sm:44}},endAdornment:e(g,{sx:{position:"absolute",right:O?15:5},position:"end",children:$}),placeholder:k},inputLabel:{shrink:!1}}}),renderOption:J,renderTags:(t,i)=>t.map(((t,a)=>{const{key:r,...o}=i({index:a});return e(x,{variant:"filled",label:"string"==typeof t?t:t.email,color:"string"!=typeof t||v.test(t)?"default":"error",...o},r)})),ref:F})}));export{j as EmailAutoComplete};