@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) • 4.06 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Typography"),r=require("@mui/material/Grid2"),l=require("react-hook-form"),o=require("@mui/icons-material/RadioButtonCheckedOutlined"),i=require("@mui/icons-material/RadioButtonUncheckedOutlined"),n=require("@mui/material/Box"),s=require("../locales/index.js"),u=require("./locale.json.js"),c=require("../util/constants.js"),d=require("../Dialog/Dialog.container.js"),m=require("../common/FormInput/FormInput.js"),h=require("../common/FormSelect/FormSelect.js"),p=require("../common/FormRadio/FormRadio.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=x(a),b=x(r),f=x(o),g=x(i),C=x(n);const q="NexusCreateDocument";exports.CreateDocumentComponent=({title:a,initialDocumentName:r="",documentNameLabel:o,projectLabel:i,projectOptions:n=[],initialProject:x="",disableProject:v=!1,solutionOptions:y=[],initialSolution:N="",solutionConnectLabel:F="",hideSolutionIfSingleOption:$=!1,onCancel:D,onCreate:P,sx:S,...k})=>{const L=s.useTranslate(u.default),R={name:r||L("Untitled"),project:x||n[0]?.value||"",solution:N||y[0]?.value||""},z=l.useForm({defaultValues:R,mode:"onChange"}),{handleSubmit:O,formState:I,getValues:M}=z,W=e=>{P(e)},{isValid:w}=I,A=t.useMemo((()=>((t,a)=>{const r=[];return t.forEach((t=>{const l={value:t.value,labelPlacement:"start",disabled:t.disabled,sx:e=>({height:"74px",mr:0,ml:0,mt:4,border:"1px solid",borderColor:"grey.100",bgcolor:a("solution")===t.value?e=>`rgba(${e.vars.palette.primary.mainChannel} / 0.12)`:"unset",borderRadius:2,p:4,...e.applyStyles("dark",{borderColor:"grey.600"}),".MuiFormControlLabel-label":{width:"100%"},...a("solution")===t.value&&{".NexusCreateDocument-solutionLabel":{fontWeight:700}}}),label:e.jsx(b.default,{container:!0,size:12,sx:{ml:0,mt:0},children:e.jsx(b.default,{container:!0,size:12,direction:"column",children:e.jsx(j.default,{className:`${q}-solutionLabel`,children:t.label})})})};r.push(l)})),r})(y,M)),[y,M]),B=y.length>1||1===y.length&&!$;return e.jsx(d.Dialog,{onClose:D,maxWidth:"lg",sx:[{"& .MuiPaper-root":{width:"448px",maxHeight:{xs:"calc(100% - 32px)",sm:"calc(100% - 64px)"}}},...Array.isArray(S)?S:[S]],className:`${q}-root`,title:a||L("Create Document"),rightActions:[{"data-testid":`${q}-cancel`,className:`${q}-cancel`,"aria-label":L("Cancel"),children:L("Cancel"),onClick:D},{"data-testid":`${q}-create`,className:`${q}-create`,"aria-label":L("Create"),children:L("Create"),variant:"contained",onClick:O(W),disabled:!w}],...k,children:e.jsx(C.default,{sx:{mt:4},children:e.jsxs(l.FormProvider,{...z,children:[e.jsxs(b.default,{container:!0,spacing:6,children:[e.jsx(b.default,{className:`${q}-name`,size:12,children:e.jsx(m.FormInput,{fullWidth:!0,name:"name",rules:{required:L("{{0}} is required",{0:o||L("Document Name")})},label:o||L("Document Name"),"aria-label":o||L("Document Name"),"data-testid":`${q}-name`,onFocus:e=>{(e.target.value&&e.target.value===L("Untitled")||e.target.value===r)&&e.target.select()},autoFocus:!0,onKeyDown:e=>{e.key===c.KeyCodes.ENTER&&(e.stopPropagation(),e.preventDefault(),O(W)())}})}),n.length>0&&e.jsx(b.default,{className:`${q}-project`,size:12,children:e.jsx(h.FormSelect,{MenuProps:{PaperProps:{style:{maxHeight:"200px"}}},rules:{required:!0},disabled:v,fullWidth:!0,name:"project",label:i||L("Project"),"aria-label":i||L("Project"),"data-testid":`${q}-project`,options:n})})]}),B&&e.jsxs(e.Fragment,{children:[e.jsx(b.default,{className:`${q}-solutionConnectLabel`,container:!0,spacing:4,sx:{mt:8},children:e.jsx(b.default,{size:12,children:e.jsx(j.default,{variant:"body2",sx:{fontWeight:700},children:F||L("Connect with Solution")})})}),e.jsx(b.default,{container:!0,spacing:4,children:e.jsx(b.default,{className:`${q}-solution`,size:12,children:e.jsx(p.FormRadio,{rules:{required:!0},name:"solution",options:A,radioProps:{checkedIcon:e.jsx(f.default,{}),icon:e.jsx(g.default,{})},"aria-label":"Solution","data-testid":`${q}-solution`})})})]})]})})})};