visual-blueprint-builder/build/steps/set-site-options/index.js

(()=>{"use strict";const e=window.wp.i18n,n=window.wp.element,i=window.wp.blocks,t=window.wp.primitives,l=window.ReactJSXRuntime,r=(0,l.jsx)(t.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,l.jsx)(t.Path,{d:"M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"})}),s=(0,l.jsx)(t.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,l.jsx)(t.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"})}),d=(0,l.jsxs)(t.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:[(0,l.jsx)(t.Path,{d:"m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"}),(0,l.jsx)(t.Path,{d:"m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"})]}),a=window.wp.blockEditor,o=window.wp.components,h=JSON.parse('{"UU":"playground-step/set-site-options","DD":"Set Site Options"}');function p(e,n=""){const i=[];return Object.entries(e).forEach((([e,t])=>{const l=n?`${n}.${e}`:e,r="object"==typeof t&&null!==t&&!Array.isArray(t);i.push({id:l,key:e,value:r?"":t,type:r?"object":"string",path:l,hasChildren:r,children:r?p(t,l):[]})})),i}function c(e){const n={};return e.forEach((e=>{e.hasChildren&&e.children.length>0?n[e.key]=c(e.children):n[e.key]=e.value})),n}function x({item:n,level:i=1,positionInSet:t,setSize:d,onUpdate:a,onDelete:h,onTypeChange:p,onAddChild:c}){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(o.__experimentalTreeGridRow,{level:i,positionInSet:t,setSize:d,isExpanded:!!n.hasChildren||void 0,children:[(0,l.jsx)(o.__experimentalTreeGridCell,{children:t=>(0,l.jsxs)(o.__experimentalHStack,{className:"vpb-tree-children-key",children:[i>1&&(0,l.jsx)("span",{"aria-hidden":"true",style:{display:"flex"},children:"    ├ "}),(0,l.jsx)(o.__experimentalInputControl,{...t,value:n.key,placeholder:(0,e.__)("Name","wp-playground-blueprint-editor"),onChange:e=>a(n.id,"key",e),__next40pxDefaultSize:!0})]})}),(0,l.jsx)(o.__experimentalTreeGridCell,{children:e=>(0,l.jsx)(o.SelectControl,{...e,value:n.type,options:[{label:"String",value:"string"},{label:"Object",value:"object"}],onChange:e=>p(n.id,e),__next40pxDefaultSize:!0,__nextHasNoMarginBottom:!0})}),(0,l.jsx)(o.__experimentalTreeGridCell,{children:i=>"string"===n.type?(0,l.jsx)(o.__experimentalInputControl,{...i,value:n.value,placeholder:(0,e.__)("Value","wp-playground-blueprint-editor"),onChange:e=>a(n.id,"value",e),__next40pxDefaultSize:!0}):(0,l.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[(0,l.jsxs)("span",{...i,style:{color:"#666"},children:[n.children.length," ",1===n.children.length?"item":"items"]}),(0,l.jsx)(o.Button,{variant:"tertiary",size:"small",icon:r,onClick:()=>c(n.id),label:(0,e.__)("Add Child","wp-playground-blueprint-editor")})]})}),(0,l.jsx)(o.__experimentalTreeGridCell,{style:{width:"40px"},children:i=>(0,l.jsx)(o.Button,{...i,isDestructive:!0,variant:"tertiary",label:(0,e.__)("Delete Option","wp-playground-blueprint-editor"),icon:s,onClick:()=>h(n.id)})})]}),n.hasChildren&&n.children.map(((e,t)=>(0,l.jsx)(x,{item:e,level:i+1,positionInSet:t+1,setSize:n.children.length,onUpdate:a,onDelete:h,onTypeChange:p,onAddChild:c},e.id)))]})}(0,i.registerBlockType)(h.UU,{icon:d,edit:function({attributes:i,setAttributes:t,isSelected:s}){const{options:_}=i,[u,w]=(0,n.useState)(!1),[g,m]=(0,n.useState)((()=>p(_||{}))),[j,y]=(0,n.useState)(null);(0,n.useEffect)((()=>{const e=c(g);t({options:e})}),[g,t]);const v=(e,n,i)=>{const t=l=>l.map((l=>l.id===e?{...l,[n]:i}:l.children.length>0?{...l,children:t(l.children)}:l));m(t(g))},C=(e,n)=>{const i=t=>t.map((t=>t.id===e?"object"===n?{...t,type:"object",hasChildren:!0,value:"",children:0===t.children.length?[{id:`${e}.new_${Date.now()}`,key:"",value:"",type:"string",path:`${e}.new_${Date.now()}`,hasChildren:!1,children:[]}]:t.children}:{...t,type:"string",hasChildren:!1,children:[],value:t.value||""}:t.children.length>0?{...t,children:i(t.children)}:t));m(i(g))},S=e=>{const n=i=>i.map((i=>{if(i.id===e){const n={id:`${e}.new_${Date.now()}`,key:"",value:"",type:"string",path:`${e}.new_${Date.now()}`,hasChildren:!1,children:[]};return{...i,children:[...i.children,n]}}return i.children.length>0?{...i,children:n(i.children)}:i}));m(n(g))};return(0,l.jsxs)("div",{...(0,a.useBlockProps)(),children:[(0,l.jsx)(o.Placeholder,{preview:(0,l.jsxs)(o.__experimentalVStack,{style:{width:"100%"},children:[(0,l.jsxs)(o.__experimentalHStack,{justify:"left",align:"center",spacing:3,children:[(0,l.jsx)(o.Icon,{icon:d,size:28,className:"step-icon"}),(0,l.jsxs)(o.__experimentalVStack,{spacing:1,children:[(0,l.jsx)(o.__experimentalText,{upperCase:!0,size:12,weight:500,color:"#949494",children:h.DD}),!s&&(0,l.jsx)(o.__experimentalText,{weight:600,children:(0,l.jsx)("pre",{style:{whiteSpace:"pre-wrap"},children:JSON.stringify(_,null,2)})})]})]}),s&&(0,l.jsxs)(o.__experimentalVStack,{spacing:4,children:[(0,l.jsxs)(o.__experimentalTreeGrid,{style:{width:"100%"},className:"vpb-object-tree",children:[(0,l.jsxs)(o.__experimentalTreeGridRow,{level:1,positionInSet:1,setSize:g.length+1,children:[(0,l.jsx)(o.__experimentalTreeGridCell,{children:n=>(0,l.jsx)(o.__experimentalText,{...n,weight:600,children:(0,e.__)("Name","wp-playground-blueprint-editor")})}),(0,l.jsx)(o.__experimentalTreeGridCell,{children:n=>(0,l.jsx)(o.__experimentalText,{...n,weight:600,children:(0,e.__)("Type","wp-playground-blueprint-editor")})}),(0,l.jsx)(o.__experimentalTreeGridCell,{children:n=>(0,l.jsx)(o.__experimentalText,{...n,weight:600,children:(0,e.__)("Value","wp-playground-blueprint-editor")})}),(0,l.jsx)(o.__experimentalTreeGridCell,{children:e=>(0,l.jsx)("span",{...e})})]}),g.map(((e,n)=>(0,l.jsx)(x,{item:e,level:1,positionInSet:n+1,setSize:g.length,onUpdate:v,onDelete:e=>{y(e),w(!0)},onTypeChange:C,onAddChild:S},e.id)))]}),(0,l.jsx)(o.Button,{icon:r,variant:"secondary",label:(0,e.__)("Add Option","wp-playground-blueprint-editor"),onClick:()=>{const e={id:`new_${Date.now()}`,key:"",value:"",type:"string",path:`new_${Date.now()}`,hasChildren:!1,children:[]};m([...g,e])}})]})]})}),(0,l.jsx)(o.__experimentalConfirmDialog,{isOpen:u,onConfirm:()=>{(e=>{const n=i=>i.filter((i=>i.id!==e&&(i.children.length>0&&(i.children=n(i.children)),!0)));m(n(g))})(j),w(!1)},onCancel:()=>w(!1),children:(0,e.__)("Delete this item?","wp-playground-blueprint-editor")})]})}})})();