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