openstack-uicore-foundation/lib/components/mui/formik-inputs/additional-input.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),d=r(5814);const s={warning:a().createElement(d.Warning,{color:"warning"}),success:a().createElement(d.CheckCircle,{color:"success"}),error:a().createElement(d.Error,{color:"error"}),info:a().createElement(d.Info,{color:"info"})},c=({open:e,title:t,text:r,iconType:n="",onConfirm:l,onCancel:o,confirmButtonText:d="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"}},s[n]&&a().createElement("div",{style:{marginRight:10}},s[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}},d)));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:()=>b});var n=r(6031),a=r.n(n),l=r(1116),o=r.n(l),i=r(2015),d=r.n(i),s=r(9825),c=r.n(s);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})=>d().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)}},d().createElement(u.Droppable,{droppableId:o},(t=>d().createElement(m.Box,a()({ref:t.innerRef},t.droppableProps,{sx:{width:"100%"}}),e.map(((e,t)=>d().createElement(u.Draggable,{key:String(e[n]||`new-${t}`),draggableId:String(e[n]||`new-${t}`),index:t},((n,l)=>d().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 b=g},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),d=r.n(i),s=r(9825),c=r.n(s),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 d().createElement(u.FormControl,{fullWidth:!0,margin:"normal",error:i.touched&&Boolean(i.error)},d().createElement(u.FormControlLabel,{control:d().createElement(u.Checkbox,a()({name:t},l,{checked:l.value},n)),label:r}),i.touched&&i.error&&d().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:()=>x});var n=r(6031),a=r.n(n),l=r(2462),o=r.n(l),i=r(2015),d=r.n(i),s=r(9825),c=r.n(s),u=r(8619),m=r(692),p=r.n(m),f=r(3294);const g=["name","label","placeholder","children","isClearable"],b=e=>{let{name:t,label:r,placeholder:n,children:l,isClearable:i}=e,s=o()(e,g);const[c,m,b]=(0,f.useField)(t),x=(null==c?void 0:c.value)&&""!==c.value||Boolean(n);return d().createElement(u.FormControl,{fullWidth:!0,error:m.touched&&Boolean(m.error)},r&&d().createElement(u.InputLabel,{htmlFor:t,id:`${t}-label`,shrink:x},r),d().createElement(u.Select,a()({name:t,id:t},c,{labelId:`${t}-label`,label:r,notched:x,displayEmpty:!0,renderValue:e=>e&&""!==e?e:d().createElement("span",{style:{color:"#aaa"}},n),endAdornment:i&&c.value?d().createElement(u.InputAdornment,{position:"end",sx:{mr:2}},d().createElement(u.IconButton,{size:"small",onClick:e=>{e.stopPropagation(),b.setValue("")}},d().createElement(p(),{fontSize:"small"}))):null},s),l),m.touched&&m.error&&d().createElement(u.FormHelperText,null,m.error))};b.propTypes={name:c().string.isRequired,children:c().node.isRequired,placeholder:c().string,isClearable:c().bool};const x=b},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),d=r.n(i),s=r(9825),c=r.n(s),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,s=o()(e,p);const[c,f]=(0,m.useField)(r),g=(null===(t=c.value)||void 0===t?void 0:t.length)||0;let b="";return n&&(b=i?`${n} *`:n),d().createElement(u.Box,null,d().createElement(u.TextField,a()({name:r,label:b},c,{onBlur:c.onBlur,margin:"normal",error:f.touched&&Boolean(f.error),helperText:f.touched&&f.error,slotProps:{htmlInput:{maxLength:l}}},s)),l&&d().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:d="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:d})}},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(2015),l=r.n(a),o=r(8619),i=r(3294);const d=require("i18n-react/dist/i18n-react");var s=r.n(d);const c=require("@mui/icons-material/Delete");var u=r.n(c);const m=require("@mui/icons-material/Add");var p=r.n(m);const f=require("@mui/icons-material/Close");var g=r.n(f),b=r(829),x=r(6130),h=r(9314),y=r(7994);const E=({field:e,fieldIndex:t,baseName:r="meta_fields",onMetaFieldTypeValueDeleted:n,entityId:a})=>{const{values:d,setFieldValue:c}=(0,i.useFormikContext)(),u=d[r]||[],m=[...e.values].sort(((e,t)=>e.order-t.order)),f=(e,n)=>`${r}[${t}].values[${e}].${n}`;return l().createElement(o.Box,null,l().createElement(b.default,{items:m,onReorder:e=>{const n=[...u];n[t].values=e,c(r,n)},renderItem:(i,d,m,p)=>{const b=e.values.findIndex((e=>e.id&&e.id===i.id||e===i)),E=-1!==b?b:d;return l().createElement(o.Box,{key:i.id||`value-${E}`},l().createElement(o.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}},l().createElement(o.Grid2,{size:4},l().createElement(h.default,{name:f(E,"name"),placeholder:s().translate("meta_fields.placeholders.name"),margin:"none",fullWidth:!0})),l().createElement(o.Grid2,{size:4},l().createElement(h.default,{name:f(E,"value"),placeholder:s().translate("meta_fields.placeholders.value"),margin:"none",fullWidth:!0,InputProps:{endAdornment:l().createElement(o.IconButton,{onClick:()=>(async(l,o)=>{if(!await(0,x.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 i=()=>{const e=[...u];e[t].values=e[t].values.filter(((e,t)=>t!==o)),c(r,e)};e.id&&l.id&&n?n(a,e.id,l.id).then((()=>i())):i()})(i,E),"aria-label":"remove value"},l().createElement(g(),null))}})),l().createElement(o.Grid2,{size:4},l().createElement(y.default,{name:f(E,"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)})(E,e.target.checked)}))),l().createElement(o.Divider,null))},idKey:"id",updateOrderKey:"order",droppableId:`droppable-values-${t}`}),l().createElement(o.Grid2,{container:!0,spacing:2,sx:{mt:2},offset:4},l().createElement(o.Button,{startIcon:l().createElement(p(),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),C=r(3209);const B=({item:e,itemIdx:t,baseName:r,onAdd:n,onDelete:a,onDeleteValue:d,entityId:c,isAddDisabled:m})=>{const{errors:f,touched:g,values:b}=(0,i.useFormikContext)(),x=e=>`${r}[${t}].${e}`,B=(0,i.getIn)(b,x("type")),T=(0,i.getIn)(f,`${r}[${t}]`),_=(0,i.getIn)(g,`${r}[${t}]`),I=(null==_?void 0:_.values)&&(null==T?void 0:T.values)&&"string"==typeof T.values;return l().createElement(o.Grid2,{container:!0,spacing:2,sx:{alignItems:"center"}},l().createElement(o.Grid2,{size:11},l().createElement(o.Box,{sx:{border:"1px solid #0000001F",borderRadius:"4px",p:2,my:2}},l().createElement(o.Grid2,{container:!0,spacing:2,sx:{alignItems:"start"}},l().createElement(o.Grid2,{size:4},l().createElement(o.InputLabel,{htmlFor:x("name")},s().translate("additional_inputs.title")),l().createElement(h.default,{name:x("name"),margin:"none",placeholder:s().translate("additional_inputs.placeholders.title"),fullWidth:!0})),l().createElement(o.Grid2,{size:4},l().createElement(o.InputLabel,{htmlFor:x("type")},s().translate("additional_inputs.type")),l().createElement(v.default,{name:x("type"),placeholder:s().translate("additional_inputs.placeholders.type")},C.GV.map((e=>l().createElement(o.MenuItem,{key:e,value:e},e))))),l().createElement(o.Grid2,{size:4,sx:{alignSelf:"end"}},l().createElement(y.default,{name:x("is_required"),label:s().translate("additional_inputs.required")}))),C.in.includes(B)&&l().createElement(l().Fragment,null,l().createElement(o.Divider,{sx:{mt:2}}),l().createElement(E,{field:e,fieldIndex:t,baseName:r,onMetaFieldTypeValueDeleted:d,entityId:c}),I&&l().createElement(o.FormHelperText,{error:!0,sx:{mt:1}},T.values)),"Quantity"===B&&l().createElement(o.Grid2,{container:!0,spacing:2,sx:{alignItems:"start",mt:2}},l().createElement(o.Grid2,{size:4},l().createElement(h.default,{name:x("minimum_quantity"),placeholder:s().translate("additional_inputs.placeholders.minimum_quantity"),type:"number",margin:"none",fullWidth:!0})),l().createElement(o.Grid2,{size:4},l().createElement(h.default,{name:x("maximum_quantity"),placeholder:s().translate("additional_inputs.placeholders.maximum_quantity"),type:"number",margin:"none",fullWidth:!0}))))),l().createElement(o.Grid2,{size:1},l().createElement(o.Box,{sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:1}},l().createElement(o.Button,{variant:"outlined","aria-label":"delete",sx:{width:40,height:40,minWidth:"auto",borderRadius:"50%",padding:0},onClick:()=>a(e,t)},l().createElement(u(),null)),l().createElement(o.Button,{variant:"contained","aria-label":"add",disabled:m,sx:{width:40,height:40,minWidth:"auto",borderRadius:"50%",padding:0},onClick:n},l().createElement(p(),null)))))};return n})()));
//# sourceMappingURL=additional-input.js.map