@nexusui/components/core/Comments/CommentField/CommentInput/CommentTextField.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{jsxs as t,jsx as e,Fragment as i}from"react/jsx-runtime";import a,{useState as o,useRef as n,useEffect as r}from"react";import l from"@mui/icons-material/Send";import s from"@mui/material/TextField";import m from"clsx";import d from"@mui/material/IconButton";import c from"@mui/material/Divider";import u from"@mui/material/Stack";import p from"@mui/material/Box";import f from"@mui/material/Button";import{KeyCodes as h}from"../../../util/constants.js";import{useTranslate as x}from"../../../locales/index.js";import C from"../../locale.json.js";const v="NexusCommentInput",g=a.forwardRef((({onSave:a,onCancel:s,value:h,initialComment:x,state:C,isWrap:g,t:b,...S},y)=>{const[B,I]=o(1),$=n();return r((()=>{if(!h||!$.current)return I(1);{const t=$.current.scrollHeight;I(Math.ceil(t/16))}}),[h]),t(u,{sx:{width:1,"& .MuiInputBase-input":{height:"auto",lineHeight:"16px"}},children:[e(p,{sx:{p:3,width:1},children:e(p,{component:"textarea",ref:$,value:h,...S,rows:B})}),g&&t(i,{children:[e(c,{}),"add"===C?e(d,{"data-testid":`${v}-sendButton`,className:m(`${v}-sendButton`,"button-text-field"),sx:{alignSelf:"end",p:"10px"},color:"primary","aria-label":"send",size:"small",onClick:a,children:e(l,{fontSize:"small","data-testid":`${v}-sendIcon`})}):t(u,{direction:"row",justifyContent:"flex-end",sx:{py:1,px:2},children:[e(f,{size:"small","aria-label":b("Cancel"),"data-testid":`${v}-cancelButton`,color:"primary",onClick:s,children:b("Cancel")}),e(f,{sx:{ml:2},size:"small",variant:"contained","aria-label":b("Save"),"data-testid":`${v}-saveButton`,disabled:x===h||!h,onClick:a,children:b("Save")})]})]})]})})),b=t=>{const{initialComment:i,onSave:a,onCommentChange:n,onCancel:r,state:m,placeholder:d,autoFocus:c,disabled:u}=t,[f,b]=o(i||""),S=f?.trim().length>0||"edit"===m,y=x(C);return e(s,{multiline:!0,fullWidth:!0,size:"small",disabled:u,onChange:t=>{b(t.target.value),n?.(t.target.value)},onClick:t=>{t.stopPropagation()},onKeyDown:t=>{t.key!==h.ENTER||t.shiftKey||(t.preventDefault(),f.trim()&&i!==f.trim()&&(a?.(f),b("")))},value:f,sx:{ml:4,"& .MuiInputBase-root":{p:0}},placeholder:d??"",autoFocus:c,slotProps:{input:{inputProps:{"data-testid":`${v}-input`,style:{fontSize:12},onSave:t=>{t.stopPropagation(),a?.(f),b("")},onCancel:r,initialComment:i,state:m,isWrap:S,t:y,disabled:u,"aria-label":"Comment text field"},inputComponent:g,endAdornment:!S&&e(p,{sx:{display:"flex",alignItems:"center",mr:3},children:e(l,{sx:{color:"action.disabled","&:hover":{cursor:"pointer"}},"data-testid":`${v}-sendIcon`})})}}})};export{b as CommentTextField};