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