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