@nexusui/components/core/Comments/CommentRichText/components/InsertLinkModal.js

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.

import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as i}from"react";import t from"@mui/material/Popper";import r from"@mui/material/Fade";import l from"@mui/material/Card";import n from"@mui/material/CardContent";import o from"@mui/material/Typography";import m from"@mui/material/CardActions";import s from"@mui/material/Button";import d from"@mui/material/TextField";import p from"@mui/material/Stack";import c from"@mui/material/ClickAwayListener";import{validateUrl as u}from"../utils/url.js";import{KeyCodes as h}from"../../../util/constants.js";const f="NexusInsertLink",b=({initialText:b="",initialUrl:x="",anchorEl:y,onCancel:C,onSave:k,t:g})=>{const[v,P]=i(b),[T,$]=i(x),L=u(T),W=T.length>0&&!L,N=e=>{e.key===h.ENTER&&v&&T&&L&&(k(v,T),e.preventDefault())},z=b!==v||x!==T;return e(c,{onClickAway:C,children:e(t,{sx:{zIndex:e=>e.zIndex.modal},open:!0,anchorEl:y,className:`${f}-root`,"data-testid":`${f}-root`,placement:"bottom-end",transition:!0,children:({TransitionProps:i})=>e(r,{...i,timeout:{appear:350,enter:350,exit:0},children:a(l,{sx:{minWidth:320,my:2},elevation:7,children:[a(n,{children:[e(o,{variant:"body1",sx:{fontWeight:700},children:g("insertLink")}),a(p,{children:[e(d,{value:v,onChange:e=>{P(e.target.value)},sx:{mt:4},fullWidth:!0,"aria-label":g("displayLabel"),label:g("displayLabel"),className:`${f}-displayLabel`,onKeyDown:N,required:!0,size:"small",slotProps:{input:{inputProps:{"data-testid":`${f}-displayLabel`}}}}),e(d,{value:T,onChange:e=>{$(e.target.value)},sx:{mt:4},fullWidth:!0,"aria-label":g("linkToWebPage"),label:g("linkToWebPage"),className:`${f}-linkToWebPage`,onKeyDown:N,required:!0,size:"small",error:W,helperText:W?g("invalidURL"):"",slotProps:{input:{inputProps:{"data-testid":`${f}-linkToWebPage`}}}})]})]}),a(m,{sx:{justifyContent:"flex-end"},children:[e(s,{"aria-label":"Cancel",size:"small",onClick:C,className:`${f}-cancel`,"data-testid":`${f}-cancel`,children:"Cancel"}),e(s,{"aria-label":g("Insert"),size:"small",disabled:!(v&&T&&L&&z),variant:"contained",className:`${f}-insert`,"data-testid":`${f}-insert`,onClick:()=>k(v,T),children:g(b||x?"Save":"Insert")})]})]})})})})};export{b as InsertLinkModal,f as prefix};