@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) • 1.93 kB
JavaScript
"use client";
import{jsx as e}from"react/jsx-runtime";import t,{useState as i,useMemo as a,useEffect as n}from"react";import l from"@mui/material/TextField";import{EmailRegex as s,EmailIncludedRegex as o,KeyCodes as r}from"../../util/constants.js";import{useTranslate as m}from"../../locales/index.js";import p from"../locale.json.js";import{CustomInputComponent as c}from"./CustomInputComponent.js";const u=t.forwardRef(((t,u)=>{const{emails:d=[],emailLimit:f,onEmailsChange:h,InputProps:E={},InputLabelProps:g={},onEnterKeySubmit:v,...x}=t,C=m(p,"EmailInput"),[P,b]=i(""),j=d.map((e=>e.email)),D=a((()=>d.some((e=>!e.valid))?C("Please enter a valid email address."):f&&(j.length>f||j.length===f&&P)?C("Maximum number of recipients: {{0}}",{0:f}):void 0),[P,f,j.length,d,C]);n((()=>{d.length<1&&b("")}),[d]);return e(l,{fullWidth:!0,"data-testid":"email-input",error:!!D,helperText:D,...x,value:P,onChange:e=>{const t=e.target.value;if(b(t),t){const e=s.test(t);h(d,{email:t,valid:e})}else h(d)},onKeyDown:e=>{switch(e.key){case r.BACKSPACE:if(!P.length){const e=[...d];e.splice(d.length-1,1),h(e)}break;case r.ENTER:case r.TAB:case r.SPACE:case r.COMMA:e.preventDefault(),(()=>{if(P){const e=s.test(P);j.includes(P)||h([...d,{email:P,valid:e}]),b("")}})(),d.length>0&&e.key===r.ENTER&&!P&&v?.()}},onPaste:e=>{e.preventDefault();const t=e.clipboardData.getData("text"),i=t.trim().split(/[;,\t\n\r]+/),a=[];i.forEach((e=>{const t=e.match(o),i=(t?t[0]:e).trim();j.includes(i)||a.push({email:i,valid:s.test(i)})})),a.length?(h([...d,...a]),b("")):b(t)},ref:u,slotProps:{input:{...E,inputComponent:c,inputProps:{emails:d,onDelete:e=>{const t=[...d];t.splice(t.findIndex((t=>t.email===e.email)),1),h(t)},onEmailEdited:(e,t)=>{const i=[...d];i.splice(e,1,{email:t,valid:s.test(t)}),h(i)},"data-testid":"NexusEmailInput-input","aria-label":"Enter email"}},inputLabel:{...d.length?{shrink:!0}:{},...g}}})}));export{u as EmailInput};