@nexusui/components/cjs/core/NewProperty/NewProperty.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.

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Box"),a=require("@mui/material/Grid2"),i=require("@mui/material/MenuItem"),n=require("@mui/material/Select"),s=require("@mui/material/Typography"),l=require("@mui/material/TextField"),u=require("@mui/material/Button"),o=require("@mui/material/ListSubheader"),d=require("@mui/material/Popper"),c=require("@mui/material/Paper"),p=require("@mui/material/Fade"),m=require("@mui/icons-material/AccountTree"),f=require("@mui/icons-material/Star"),x=require("@mui/icons-material/Link"),y=require("@mui/icons-material/RadioButtonUncheckedSharp"),j=require("@mui/icons-material/ViewArray"),h=require("@mui/icons-material/List"),g=require("@mui/icons-material/ToggleOn"),P=require("@mui/icons-material/Tag"),q=require("./NewProperty.styles.js"),S=require("../locales/index.js"),v=require("./locale.json.js");function C(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function N(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var T=N(t),b=C(r),$=C(a),I=C(i),M=C(n),O=C(s),w=C(l),L=C(u),k=C(o),A=C(d),B=C(c),E=C(p),R=C(m),W=C(f),F=C(x),V=C(y),_=C(j),U=C(h),D=C(g),z=C(P);const G="NexusNewProperty";exports.NewProperty=t=>{const{nodeData:r,nameChange:a,placement:i,singleProperty:n,isArray:s,getButtonContent:l}=t,[u,o]=T.useState(""),[d,c]=T.useState([]),[p,m]=T.useState([]),[f,x]=T.useState(!1),[y,j]=T.useState(null),[h,g]=T.useState(n[0].name),P=S.useTranslate(v.default),[C,N]=T.useState(r[0][1][0].name),H=P("Name of the "),J=T.useRef(H+r[0][1][0].name),K=(t,r)=>{if("CUSTOM"===t)return e.jsx(R.default,{sx:{color:"info.700"}});if("PRIMITIVES"===t)return"NodeProperty"===r?e.jsx(R.default,{sx:{color:"info.700"}}):e.jsx(z.default,{sx:{color:"info.600"}});if("SingleProperty"===t)switch(r){case"Single Property":default:return e.jsx(V.default,{sx:{color:"info.700"}});case"Array":return e.jsx(_.default,{});case"Map":return e.jsx(U.default,{});case"Toggle":return e.jsx(D.default,{});case"Value":return e.jsx(z.default,{});case"Text":return e.jsx(W.default,{});case"URL":return e.jsx(F.default,{})}},Q=[["PRIMITIVES",[{id:1,name:"NodeProperty"}]]];T.useEffect((()=>{const e=(s?Q:r).map((e=>{const t=e[1].map((t=>{const r=K(e[0],t.name);return{...t,icon:r}}));return[e[0],t]}));c(e);const t=(s?n.filter((e=>e.isArray!==s)):n).map((e=>({...e,icon:K("SingleProperty",e.name)})));m(t)}),[]);const X=e=>{o(e.target.value),a(e.target.value)},Y=e=>{g(e.target.value),J.current=H+e.target.value},Z=e=>{N(e.target.value),J.current=H+e.target.value};return e.jsxs(e.Fragment,{children:[e.jsx("div",{onClick:e=>{j(e.currentTarget),x(!0)},children:l()}),e.jsx(A.default,{className:`${G}-popper`,"data-testid":`${G}-popper`,open:f,anchorEl:y,placement:i,transition:!0,children:({TransitionProps:t})=>e.jsx(E.default,{...t,children:e.jsx(B.default,{sx:q.styles.paper,children:e.jsxs(b.default,{children:[e.jsx($.default,{container:!0,children:e.jsx(O.default,{children:P("New Property")})}),e.jsx($.default,{container:!0,sx:q.styles.gridContainerStyle,children:e.jsx(w.default,{type:"text",placeholder:J.current,value:u,name:"name",onChange:X,variant:"outlined",sx:q.styles.nameTextField,fullWidth:!0,slotProps:{input:{inputProps:{"data-testid":"name"}}}})}),e.jsx($.default,{container:!0,sx:q.styles.gridContainerStyle,children:e.jsx(M.default,{"data-testid":"nodeProperty",className:`${G}-nodeProperty`,fullWidth:!0,value:C,onChange:Z,inputProps:{"data-testid":"nodeProperty-input"},MenuProps:{classes:{paper:q.styles.menuPaper}},children:d?.map((t=>(t=>{const r=t[1].map((t=>e.jsxs(I.default,{value:t.name,className:`${G}-nodePropertyItem`,"data-testid":`${G}-nodePropertyItem`,children:[e.jsx("span",{style:{position:"absolute"},children:t.icon}),e.jsx("span",{style:{marginLeft:"25px"},children:t.name})]},t.id)));return[e.jsx(k.default,{children:t[0]}),r]})(t)))})}),e.jsx($.default,{container:!0,sx:q.styles.gridContainerStyleSingleProperty,children:e.jsx(M.default,{id:"singleProperty",fullWidth:!0,"data-testid":"singleProperty",className:`${G}-singleProperty`,inputProps:{"data-testid":"singleProperty-input"},onChange:Y,value:h,MenuProps:{classes:{paper:q.styles.menuPaper}},children:p.map(((t,r)=>e.jsxs(I.default,{value:t.name,className:`${G}-singlePropertyItem`,"data-testid":`${G}-singlePropertyItem`,children:[e.jsx("span",{style:{position:"absolute"},children:t.icon}),e.jsx("span",{style:{marginLeft:"25px"},children:t.name})]},r)))})}),e.jsx($.default,{container:!0,sx:q.styles.gridContainerStyle,children:e.jsx(L.default,{className:`${G}-create`,"data-testid":`${G}-create`,fullWidth:!0,variant:"contained",disabled:0===u.length,children:e.jsx(O.default,{children:P("Create")})})}),e.jsx($.default,{container:!0,sx:q.styles.gridContainerStyle,children:e.jsx(L.default,{className:`${G}-cancel`,"data-testid":`${G}-cancel`,fullWidth:!0,variant:"outlined",onClick:()=>x(!1),children:e.jsx("span",{children:P("Cancel")})})}),e.jsx($.default,{container:!0,style:{marginBottom:"10px"}})]})})})})]})};