openstack-uicore-foundation/lib/components/mui/formik-inputs/additional-input-list.js

ui reactjs components for openstack marketing site

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("openstack-uicore-foundation",[],t):"object"==typeof exports?exports["openstack-uicore-foundation"]=t():e["openstack-uicore-foundation"]=t()}(this,(()=>(()=>{"use strict";var e={4574:(e,t,r)=>{var n=r(2015),a=r.n(n),l=r(9825),o=r.n(l),i=r(8619),s=r(5814);const d={warning:a().createElement(s.Warning,{color:"warning"}),success:a().createElement(s.CheckCircle,{color:"success"}),error:a().createElement(s.Error,{color:"error"}),info:a().createElement(s.Info,{color:"info"})},c=({open:e,title:t,text:r,iconType:n="",onConfirm:l,onCancel:o,confirmButtonText:s="Confirm",confirmButtonColor:c="primary",cancelButtonText:u="Cancel",cancelButtonColor:m="primary"})=>a().createElement(i.Dialog,{open:e,onClose:o},a().createElement(i.DialogTitle,{sx:{p:2},component:"div"},a().createElement(i.Typography,{variant:"h5"},t)),a().createElement(i.Divider,null),a().createElement(i.DialogContent,{sx:{p:2}},a().createElement("div",{style:{display:"flex",alignItems:"center"}},d[n]&&a().createElement("div",{style:{marginRight:10}},d[n]),a().createElement(i.Typography,{variant:"body1"},r))),a().createElement(i.Divider,{sx:{margin:"10px 0px 10px 0px"}}),a().createElement(i.DialogActions,null,a().createElement(i.Button,{fullWidth:!0,onClick:o,color:m,variant:"outlined",sx:{whiteSpace:"nowrap",minWidth:100}},u),a().createElement(i.Button,{fullWidth:!0,onClick:l,color:c,variant:"contained",sx:{whiteSpace:"nowrap",minWidth:100}},s)));c.propTypes={open:o().bool,title:o().string.isRequired,text:o().string.isRequired,iconType:o().string,onConfirm:o().func.isRequired,onCancel:o().func.isRequired,confirmButtonText:o().string,confirmButtonColor:o().string,cancelButtonText:o().string,cancelButtonColor:o().string},c.defaultProps={open:!1,iconType:"warning",confirmButtonText:"Confirm",confirmButtonColor:"primary",cancelButtonText:"Cancel",cancelButtonColor:"default"}},829:(e,t,r)=>{r.d(t,{default:()=>y});var n=r(6031),a=r.n(n),l=r(1116),o=r.n(l),i=r(2015),s=r.n(i),d=r(9825),c=r.n(d);const u=require("react-beautiful-dnd");var m=r(8619);function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function f(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){o()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}const g=({items:e,onReorder:t,renderItem:r,idKey:n,updateOrderKey:l,droppableId:o})=>s().createElement(u.DragDropContext,{onDragEnd:r=>{if(!r.destination)return;const n=((e,t,r,n)=>{const a=Array.from(e),[l]=a.splice(t,1);return a.splice(r,0,l),a.map(((e,t)=>f(f({},e),{},{[n]:t+1})))})(e,r.source.index,r.destination.index,l);t(n,r)}},s().createElement(u.Droppable,{droppableId:o},(t=>s().createElement(m.Box,a()({ref:t.innerRef},t.droppableProps,{sx:{width:"100%"}}),e.map(((e,t)=>s().createElement(u.Draggable,{key:String(e[n]||`new-${t}`),draggableId:String(e[n]||`new-${t}`),index:t},((n,l)=>s().createElement(m.Box,a()({ref:n.innerRef},n.draggableProps,n.dragHandleProps,{sx:{background:l.isDragging?"#f0f0f0":"inherit",transition:"background 0.2s ease"}}),r(e,t,n,l)))))),t.placeholder))));g.propTypes={items:c().array.isRequired,onReorder:c().func.isRequired,renderItem:c().func.isRequired,idKey:c().string,updateOrderKey:c().string,droppableId:c().string},g.defaultProps={idKey:"id",updateOrderKey:"order",droppableId:"droppable"};const y=g},1158:(e,t,r)=>{r.d(t,{default:()=>_});var n=r(2015),a=r.n(n),l=r(8619),o=r(3294);const i=require("i18n-react/dist/i18n-react");var s=r.n(i);const d=require("@mui/icons-material/Delete");var c=r.n(d);const u=require("@mui/icons-material/Add");var m=r.n(u);const p=require("@mui/icons-material/Close");var f=r.n(p),g=r(829),y=r(6130),b=r(9314),h=r(7994);const x=({field:e,fieldIndex:t,baseName:r="meta_fields",onMetaFieldTypeValueDeleted:n,entityId:i})=>{const{values:d,setFieldValue:c}=(0,o.useFormikContext)(),u=d[r]||[],p=[...e.values].sort(((e,t)=>e.order-t.order)),x=(e,n)=>`${r}[${t}].values[${e}].${n}`;return a().createElement(l.Box,null,a().createElement(g.default,{items:p,onReorder:e=>{const n=[...u];n[t].values=e,c(r,n)},renderItem:(o,d,m,p)=>{const g=e.values.findIndex((e=>e.id&&e.id===o.id||e===o)),v=-1!==g?g:d;return a().createElement(l.Box,{key:o.id||`value-${v}`},a().createElement(l.Grid2,{container:!0,spacing:2,sx:{alignItems:"start",background:null!=p&&p.isDragging?"#ebebeb":"inherit",boxShadow:null!=p&&p.isDragging?"0px 5px 15px rgba(0,0,0,0.3)":"none",transition:"transform 0.2s ease, box-shadow 0.2s ease",transform:null!=p&&p.isDragging?"scale(1.02)":"none",py:2}},a().createElement(l.Grid2,{size:4},a().createElement(b.default,{name:x(v,"name"),placeholder:s().translate("meta_fields.placeholders.name"),margin:"none",fullWidth:!0})),a().createElement(l.Grid2,{size:4},a().createElement(b.default,{name:x(v,"value"),placeholder:s().translate("meta_fields.placeholders.value"),margin:"none",fullWidth:!0,InputProps:{endAdornment:a().createElement(l.IconButton,{onClick:()=>(async(a,l)=>{if(!await(0,y.default)({title:s().translate("general.are_you_sure"),text:s().translate("meta_fields.delete_value_warning"),type:"warning",confirmButtonColor:"#DD6B55",confirmButtonText:s().translate("general.yes_delete")}))return;const o=()=>{const e=[...u];e[t].values=e[t].values.filter(((e,t)=>t!==l)),c(r,e)};e.id&&a.id&&n?n(i,e.id,a.id).then((()=>o())):o()})(o,v),"aria-label":"remove value"},a().createElement(f(),null))}})),a().createElement(l.Grid2,{size:4},a().createElement(h.default,{name:x(v,"is_default"),label:s().translate("meta_fields.is_default"),onChange:e=>((e,n)=>{const a=[...u];n&&a[t].values.forEach((e=>{e.is_default=!1})),a[t].values[e].is_default=n,c(r,a)})(v,e.target.checked)}))),a().createElement(l.Divider,null))},idKey:"id",updateOrderKey:"order",droppableId:`droppable-values-${t}`}),a().createElement(l.Grid2,{container:!0,spacing:2,sx:{mt:2},offset:4},a().createElement(l.Button,{startIcon:a().createElement(m(),null),disabled:(()=>e.values.length>0&&e.values.some((e=>{var t,r;return!(null!==(t=e.name)&&void 0!==t&&t.trim()&&null!==(r=e.value)&&void 0!==r&&r.trim())})))(),onClick:()=>{const e=[...u];e[t].values.push({value:"",name:"",is_default:!1}),c(r,e)},variant:"text"},s().translate("meta_fields.add_value"))))};var v=r(2359),E=r(3209);const _=({item:e,itemIdx:t,baseName:r,onAdd:n,onDelete:i,onDeleteValue:d,entityId:u,isAddDisabled:p})=>{const{errors:f,touched:g,values:y}=(0,o.useFormikContext)(),_=e=>`${r}[${t}].${e}`,C=(0,o.getIn)(y,_("type")),B=(0,o.getIn)(f,`${r}[${t}]`),D=(0,o.getIn)(g,`${r}[${t}]`),O=(null==D?void 0:D.values)&&(null==B?void 0:B.values)&&"string"==typeof B.values;return a().createElement(l.Grid2,{container:!0,spacing:2,sx:{alignItems:"center"}},a().createElement(l.Grid2,{size:11},a().createElement(l.Box,{sx:{border:"1px solid #0000001F",borderRadius:"4px",p:2,my:2}},a().createElement(l.Grid2,{container:!0,spacing:2,sx:{alignItems:"start"}},a().createElement(l.Grid2,{size:4},a().createElement(l.InputLabel,{htmlFor:_("name")},s().translate("additional_inputs.title")),a().createElement(b.default,{name:_("name"),margin:"none",placeholder:s().translate("additional_inputs.placeholders.title"),fullWidth:!0})),a().createElement(l.Grid2,{size:4},a().createElement(l.InputLabel,{htmlFor:_("type")},s().translate("additional_inputs.type")),a().createElement(v.default,{name:_("type"),placeholder:s().translate("additional_inputs.placeholders.type")},E.GV.map((e=>a().createElement(l.MenuItem,{key:e,value:e},e))))),a().createElement(l.Grid2,{size:4,sx:{alignSelf:"end"}},a().createElement(h.default,{name:_("is_required"),label:s().translate("additional_inputs.required")}))),E.in.includes(C)&&a().createElement(a().Fragment,null,a().createElement(l.Divider,{sx:{mt:2}}),a().createElement(x,{field:e,fieldIndex:t,baseName:r,onMetaFieldTypeValueDeleted:d,entityId:u}),O&&a().createElement(l.FormHelperText,{error:!0,sx:{mt:1}},B.values)),"Quantity"===C&&a().createElement(l.Grid2,{container:!0,spacing:2,sx:{alignItems:"start",mt:2}},a().createElement(l.Grid2,{size:4},a().createElement(b.default,{name:_("minimum_quantity"),placeholder:s().translate("additional_inputs.placeholders.minimum_quantity"),type:"number",margin:"none",fullWidth:!0})),a().createElement(l.Grid2,{size:4},a().createElement(b.default,{name:_("maximum_quantity"),placeholder:s().translate("additional_inputs.placeholders.maximum_quantity"),type:"number",margin:"none",fullWidth:!0}))))),a().createElement(l.Grid2,{size:1},a().createElement(l.Box,{sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:1}},a().createElement(l.Button,{variant:"outlined","aria-label":"delete",sx:{width:40,height:40,minWidth:"auto",borderRadius:"50%",padding:0},onClick:()=>i(e,t)},a().createElement(c(),null)),a().createElement(l.Button,{variant:"contained","aria-label":"add",disabled:p,sx:{width:40,height:40,minWidth:"auto",borderRadius:"50%",padding:0},onClick:n},a().createElement(m(),null)))))}},7994:(e,t,r)=>{r.d(t,{default:()=>g});var n=r(6031),a=r.n(n),l=r(2462),o=r.n(l),i=r(2015),s=r.n(i),d=r(9825),c=r.n(d),u=r(8619),m=r(3294);const p=["name","label"],f=e=>{let{name:t,label:r}=e,n=o()(e,p);const[l,i]=(0,m.useField)({name:t,type:"checkbox"});return s().createElement(u.FormControl,{fullWidth:!0,margin:"normal",error:i.touched&&Boolean(i.error)},s().createElement(u.FormControlLabel,{control:s().createElement(u.Checkbox,a()({name:t},l,{checked:l.value},n)),label:r}),i.touched&&i.error&&s().createElement(u.FormHelperText,null,i.error))};f.propTypes={name:c().string.isRequired,label:c().string.isRequired};const g=f},2359:(e,t,r)=>{r.d(t,{default:()=>b});var n=r(6031),a=r.n(n),l=r(2462),o=r.n(l),i=r(2015),s=r.n(i),d=r(9825),c=r.n(d),u=r(8619),m=r(692),p=r.n(m),f=r(3294);const g=["name","label","placeholder","children","isClearable"],y=e=>{let{name:t,label:r,placeholder:n,children:l,isClearable:i}=e,d=o()(e,g);const[c,m,y]=(0,f.useField)(t),b=(null==c?void 0:c.value)&&""!==c.value||Boolean(n);return s().createElement(u.FormControl,{fullWidth:!0,error:m.touched&&Boolean(m.error)},r&&s().createElement(u.InputLabel,{htmlFor:t,id:`${t}-label`,shrink:b},r),s().createElement(u.Select,a()({name:t,id:t},c,{labelId:`${t}-label`,label:r,notched:b,displayEmpty:!0,renderValue:e=>e&&""!==e?e:s().createElement("span",{style:{color:"#aaa"}},n),endAdornment:i&&c.value?s().createElement(u.InputAdornment,{position:"end",sx:{mr:2}},s().createElement(u.IconButton,{size:"small",onClick:e=>{e.stopPropagation(),y.setValue("")}},s().createElement(p(),{fontSize:"small"}))):null},d),l),m.touched&&m.error&&s().createElement(u.FormHelperText,null,m.error))};y.propTypes={name:c().string.isRequired,children:c().node.isRequired,placeholder:c().string,isClearable:c().bool};const b=y},9314:(e,t,r)=>{r.d(t,{default:()=>g});var n=r(6031),a=r.n(n),l=r(2462),o=r.n(l),i=r(2015),s=r.n(i),d=r(9825),c=r.n(d),u=r(8619),m=r(3294);const p=["name","label","maxLength","required"],f=e=>{var t;let{name:r,label:n,maxLength:l,required:i=!1}=e,d=o()(e,p);const[c,f]=(0,m.useField)(r),g=(null===(t=c.value)||void 0===t?void 0:t.length)||0;let y="";return n&&(y=i?`${n} *`:n),s().createElement(u.Box,null,s().createElement(u.TextField,a()({name:r,label:y},c,{onBlur:c.onBlur,margin:"normal",error:f.touched&&Boolean(f.error),helperText:f.touched&&f.error,slotProps:{htmlInput:{maxLength:l}}},d)),l&&s().createElement(u.Typography,{sx:{fontSize:"1.2rem",color:"#00000099",pl:2}},l-g+" characters left"))};f.propTypes={name:c().string.isRequired,label:c().string,maxLength:c().number,required:c().bool};const g=f},6130:(e,t,r)=>{r.d(t,{default:()=>l});r(1116),r(2015),r(4574);const n="__oif_confirm_dialog_bridge__",a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:{},l=({title:e,text:t,iconType:r="",confirmButtonText:l="Confirm",cancelButtonText:o="Cancel",confirmButtonColor:i="primary",cancelButtonColor:s="primary"})=>{if(!a[n])throw new Error("[openstack-uicore-foundation] showConfirmDialog: <GlobalConfirmDialog /> is not mounted. Add <GlobalConfirmDialog /> to the root of your app.");return a[n]({title:e,text:t,iconType:r,confirmButtonText:l,cancelButtonText:o,confirmButtonColor:i,cancelButtonColor:s})}},3209:(e,t,r)=>{r.d(t,{GV:()=>a,in:()=>n});const n=["CheckBoxList","ComboBox","RadioButtonList"],a=["CheckBox",...n,"Text","TextArea","Quantity","DateTime","Time"]},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},6031:e=>{e.exports=require("@babel/runtime/helpers/extends")},2462:e=>{e.exports=require("@babel/runtime/helpers/objectWithoutProperties")},5814:e=>{e.exports=require("@mui/icons-material")},692:e=>{e.exports=require("@mui/icons-material/Clear")},8619:e=>{e.exports=require("@mui/material")},3294:e=>{e.exports=require("formik")},9825:e=>{e.exports=require("prop-types")},2015:e=>{e.exports=require("react")}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var n={};r.r(n),r.d(n,{default:()=>b});var a=r(1116),l=r.n(a),o=r(2015),i=r.n(o),s=r(3294);const d=require("i18n-react");var c=r.n(d),u=r(1158),m=r(6130),p=r(3209);function f(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?f(Object(r),!0).forEach((function(t){l()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}const y={name:"",type:"",is_required:!1,minimum_quantity:0,maximum_quantity:0,values:[]},b=({name:e,onDelete:t,onDeleteValue:r,entityId:n})=>{const{values:a,setFieldValue:l,errors:d,setFieldTouched:f}=(0,s.useFormikContext)(),b=a[e]||[];(0,o.useEffect)((()=>{0===b.length&&l(e,[g(g({},y),{},{_key:`draft_${Date.now()}`})])}),[b.length]);const h=()=>{l(e,[...b,g(g({},y),{},{_key:`draft_${Date.now()}`})])},x=async(r,a)=>{if(!await(0,m.default)({title:c().translate("general.are_you_sure"),text:`${c().translate("additional_inputs.delete_warning")} ${r.name}`,type:"warning",confirmButtonColor:"#DD6B55",confirmButtonText:c().translate("general.yes_delete")}))return;const o=()=>{const t=b.filter(((e,t)=>t!==a));0===t.length&&t.push(g(g({},y),{},{_key:`draft_${Date.now()}`})),l(e,t),f(e,[],!1)};r.id&&t?t(n,r.id).then((()=>o())).catch((e=>console.error("Error deleting field from API",e))):o()},v=()=>{const t=(0,s.getIn)(d,e);if(t&&Array.isArray(t)){if(t.some((e=>e&&Object.keys(e).length>0)))return!0}return b.some((e=>{var t;if(null===(t=e.name)||void 0===t||!t.trim()||!e.type)return!0;if(p.in.includes(e.type)){if(!e.values||0===e.values.length)return!0;if(e.values.some((e=>{var t,r;return!(null!==(t=e.name)&&void 0!==t&&t.trim()&&null!==(r=e.value)&&void 0!==r&&r.trim())})))return!0}return!1}))};return i().createElement(i().Fragment,null,b.map(((t,a)=>i().createElement(u.default,{key:t.id||t._key,item:t,itemIdx:a,baseName:e,onAdd:h,onDelete:x,onDeleteValue:r,entityId:n,isAddDisabled:v()}))))};return n})()));
//# sourceMappingURL=additional-input-list.js.map