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