openstack-uicore-foundation/lib/components/mui/bulk-edit-table.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={9299:(e,t,n)=>{var o=n(2015),r=n.n(o),l=n(9825),a=n.n(l),i=n(8619),c=n(8177),s=n.n(c),u=n(1519),d=n.n(u);const m=require("@mui/icons-material/Info");var p=n.n(m);const g=require("@mui/icons-material/Warning");var f=n.n(g);const b={warning:r().createElement(f(),{color:"warning"}),success:r().createElement(s(),{color:"success"}),error:r().createElement(d(),{color:"error"}),info:r().createElement(p(),{color:"info"})},y=({open:e,title:t,text:n,iconType:o="",onConfirm:l,onCancel:a,confirmButtonText:c="Confirm",confirmButtonColor:s="primary",cancelButtonText:u="Cancel",cancelButtonColor:d="primary"})=>r().createElement(i.Dialog,{open:e,onClose:a},r().createElement(i.DialogTitle,{sx:{p:2},component:"div"},r().createElement(i.Typography,{variant:"h5"},t)),r().createElement(i.Divider,null),r().createElement(i.DialogContent,{sx:{p:2}},r().createElement("div",{style:{display:"flex",alignItems:"center"}},b[o]&&r().createElement("div",{style:{marginRight:10}},b[o]),r().createElement(i.Typography,{variant:"body1"},n))),r().createElement(i.Divider,{sx:{margin:"10px 0px 10px 0px"}}),r().createElement(i.DialogActions,null,r().createElement(i.Button,{fullWidth:!0,onClick:a,color:d,variant:"outlined",sx:{whiteSpace:"nowrap",minWidth:100}},u),r().createElement(i.Button,{fullWidth:!0,onClick:l,color:s,variant:"contained",sx:{whiteSpace:"nowrap",minWidth:100}},c)));y.propTypes={open:a().bool,title:a().string.isRequired,text:a().string.isRequired,iconType:a().string,onConfirm:a().func.isRequired,onCancel:a().func.isRequired,confirmButtonText:a().string,confirmButtonColor:a().string,cancelButtonText:a().string,cancelButtonColor:a().string},y.defaultProps={open:!1,iconType:"warning",confirmButtonText:"Confirm",confirmButtonColor:"primary",cancelButtonText:"Cancel",cancelButtonColor:"default"}},6130:(e,t,n)=>{n.d(t,{default:()=>l});n(1116),n(2015),n(9299);const o="__oif_confirm_dialog_bridge__",r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:{},l=({title:e,text:t,iconType:n="",confirmButtonText:l="Confirm",cancelButtonText:a="Cancel",confirmButtonColor:i="primary",cancelButtonColor:c="primary"})=>{if(!r[o])throw new Error("[openstack-uicore-foundation] showConfirmDialog: <GlobalConfirmDialog /> is not mounted. Add <GlobalConfirmDialog /> to the root of your app.");return r[o]({title:e,text:t,iconType:n,confirmButtonText:l,cancelButtonText:a,confirmButtonColor:i,cancelButtonColor:c})}},5420:(e,t,n)=>{n.d(t,{default:()=>g});var o=n(2015),r=n(6842),l=n.n(r);const a=require("@mui/material/TablePagination");var i=n.n(a),c=n(9825),s=n.n(c),u=n(3209);const d={".MuiTablePagination-toolbar":{alignItems:"baseline",marginTop:"1.6rem"},".MuiTablePagination-selectLabel":{color:"rgba(0, 0, 0, 0.6)",fontSize:"12px",fontWeight:"normal"},".MuiTablePagination-select":{color:"rgba(0, 0, 0, 0.6)",fontSize:"12px",fontWeight:"normal"},".MuiTablePagination-spacer":{display:"none"},".MuiTablePagination-displayedRows":{marginLeft:"auto"}},m=[u.WU,u.k6,u.Lr],p=({totalRows:e,perPage:t,currentPage:n,onPageChange:r,onPerPageChange:a})=>{const c=o.useMemo((()=>a?m.includes(t)?m:[...m,t].sort(((e,t)=>e-t)):[t]),[t,a]);return o.createElement(i(),{component:"div",count:e??0,rowsPerPageOptions:c,rowsPerPage:t,page:n-1,onPageChange:(e,t)=>{r(t+1)},onRowsPerPageChange:a?e=>{a(parseInt(e.target.value,10))}:void 0,labelRowsPerPage:l().translate("mui_table.rows_per_page"),sx:d})};p.propTypes={totalRows:s().number,perPage:s().number.isRequired,currentPage:s().number.isRequired,onPageChange:s().func.isRequired,onPerPageChange:s().func};const g=p},3209:(e,t,n)=>{n.d(t,{Lr:()=>l,WU:()=>o,k6:()=>r});const o=10,r=20,l=50},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},8177:e=>{e.exports=require("@mui/icons-material/CheckCircle")},6084:e=>{e.exports=require("@mui/icons-material/Delete")},9247:e=>{e.exports=require("@mui/icons-material/Edit")},1519:e=>{e.exports=require("@mui/icons-material/Error")},8619:e=>{e.exports=require("@mui/material")},6989:e=>{e.exports=require("@mui/material/Box")},6368:e=>{e.exports=require("@mui/material/Button")},909:e=>{e.exports=require("@mui/material/IconButton")},270:e=>{e.exports=require("@mui/material/Paper")},9292:e=>{e.exports=require("@mui/material/Table")},9008:e=>{e.exports=require("@mui/material/TableBody")},5684:e=>{e.exports=require("@mui/material/TableCell")},5783:e=>{e.exports=require("@mui/material/TableContainer")},8202:e=>{e.exports=require("@mui/material/TableHead")},464:e=>{e.exports=require("@mui/material/TableRow")},38:e=>{e.exports=require("@mui/material/TableSortLabel")},7633:e=>{e.exports=require("@mui/material/TextField")},6831:e=>{e.exports=require("@mui/utils")},6842:e=>{e.exports=require("i18n-react/dist/i18n-react")},9825:e=>{e.exports=require("prop-types")},2015:e=>{e.exports=require("react")}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,n),l.exports}(()=>{n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t}})(),(()=>{n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})}})(),(()=>{n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var o={};n.r(o),n.d(o,{default:()=>me});var r=n(2015),l=n.n(r),a=n(9825),i=n.n(a),c=n(6842),s=n.n(c),u=n(6989),d=n.n(u),m=n(270),p=n.n(m),g=n(9292),f=n.n(g),b=n(9008),y=n.n(b),E=n(5684),h=n.n(E),x=n(5783),w=n.n(x),C=n(8202),P=n.n(C),v=n(464),T=n.n(v);const q=require("@mui/material/Checkbox");var D=n.n(q),R=n(6368),O=n.n(R);const S=({editEnabled:e,hasSelection:t,onEdit:n,onApply:o,onCancel:r})=>l().createElement(d(),{sx:{display:"flex",gap:1,mb:2}},e?l().createElement(l().Fragment,null,l().createElement(O(),{variant:"contained",onClick:o},s().translate("bulk_edit_table.apply_changes")),l().createElement(O(),{variant:"outlined",onClick:r},s().translate("general.cancel"))):l().createElement(O(),{variant:"contained",onClick:n,disabled:!t},s().translate("bulk_edit_table.edit_selected")));S.propTypes={editEnabled:i().bool,hasSelection:i().bool,onEdit:i().func,onApply:i().func,onCancel:i().func};const j=S;var _=n(38),B=n.n(_),k=n(6831);const K=e=>{const{editEnabled:t,sortable:n,sortDir:o,onSort:r,columnIndex:a,columnKey:i,width:c,children:u}=e,m=c?{width:c,minWidth:c,maxWidth:c}:{};return!n||t?l().createElement(h(),{sx:m},u):l().createElement(h(),{sx:m},l().createElement(B(),{active:!!o,direction:-1===o?"desc":"asc",onClick:()=>{r&&n&&!t&&r(a,i,o?-1*o:1)}},u,o?l().createElement(d(),{component:"span",sx:k.visuallyHidden},-1===o?s().translate("bulk_edit_table.sorted_desc"):s().translate("bulk_edit_table.sorted_asc")):null))};K.propTypes={editEnabled:i().bool,onSort:i().func,sortDir:i().number,columnIndex:i().number,columnKey:i().oneOfType([i().string,i().number]),sortable:i().bool,width:i().oneOfType([i().string,i().number]),children:i().node};const W=K;var F=n(1116),M=n.n(F),A=n(909),$=n.n(A),z=n(9247),N=n.n(z),I=n(6084),H=n.n(I),L=n(7633),U=n.n(L);const G=({col:e,row:t,editRow:n,isEditingRow:o,onChange:r})=>{return o&&!0===e.editableField?l().createElement(U(),{id:e.columnKey,placeholder:e.placeholder||s().translate("placeholders.text"),multiline:!0,minRows:2,fullWidth:!0,size:"small",onChange:r,value:n[e.columnKey]??""}):o&&e.editableField?e.editableField({value:(null===(a=n[e.columnKey])||void 0===a?void 0:a.id)??(null===(i=n[e.columnKey])||void 0===i?void 0:i.value)??n[e.columnKey],onChange:t=>r({target:{value:t.target.value,id:e.columnKey}}),row:n,rowData:n[e.columnKey]})??null:e.render?e.render(t[e.columnKey],t)??null:l().createElement("span",{style:{fontWeight:"normal"}},t[e.columnKey]??null);var a,i};G.propTypes={col:i().object.isRequired,row:i().object.isRequired,editRow:i().object.isRequired,isEditingRow:i().bool,onChange:i().func};const J=G,X="Xhu4_LGKTq3e40qfe5Wt",Y="_0CBHbvjBDEYwSThSUofl",Z="UloruHeHpGPH5R7sq1kU",V="MSifStCaXi3PkMXSJE_n",Q="LmYr4a7JbDJJhz4VmZZk",ee="OpMx28gG4w8RWw4ugfTz";function te(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function ne(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?te(Object(n),!0).forEach((function(t){M()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):te(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const oe=e=>ne(ne({},e.width?{width:e.width,minWidth:e.width,maxWidth:e.width}:{}),e.customStyle),re=e=>{const{row:t,columns:n,editEnabled:o,isSelected:r,editRow:a,onToggle:i,onFieldChange:c,onEdit:s,onDelete:u,idKey:m}=e,p=r&&o,g=e=>{const{value:t,id:n}=e.target;c(n,t)};return l().createElement(T(),{role:"row",hover:!0},l().createElement(h(),{align:"center",className:Z,sx:{backgroundColor:"#fff"}},l().createElement(D(),{checked:r,onChange:()=>{o||i()},disabled:o,slotProps:{input:{"aria-label":`Select row ${t[m]}`}}})),n.map((e=>l().createElement(h(),{key:`${t[m]}_${e.columnKey}`,className:p&&e.editableField?Q:Y,sx:{fontWeight:"normal"},style:oe(e)},l().createElement(J,{col:e,row:t,editRow:a,isEditingRow:p,onChange:g})))),(s||u)&&l().createElement(h(),{align:"center",className:`${V} ${ee}`,sx:{backgroundColor:"#fff"}},l().createElement(d(),{sx:{display:"flex",justifyContent:"center",gap:1}},s&&l().createElement($(),{size:"medium",onClick:()=>s(t),sx:{padding:0},"aria-label":`Edit row ${t[m]}`},l().createElement(N(),{fontSize:"large"})),u&&l().createElement($(),{size:"medium",onClick:()=>u(t),sx:{padding:0},"aria-label":`Delete row ${t[m]}`},l().createElement(H(),{fontSize:"large"})))))};re.propTypes={row:i().object.isRequired,columns:i().array.isRequired,editEnabled:i().bool,isSelected:i().bool,editRow:i().object.isRequired,onToggle:i().func,onFieldChange:i().func,onEdit:i().func,onDelete:i().func,idKey:i().string},re.defaultProps={idKey:"id",onEdit:null,onDelete:null};const le=re;function ae(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function ie(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ae(Object(n),!0).forEach((function(t){M()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ae(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const ce=(e="id")=>{const[t,n]=(0,r.useState)([]),[o,l]=(0,r.useState)(!1),a=n=>t.some((t=>t[e]===n)),i=()=>{n([]),l(!1)};return{selectedRows:t,isSelected:a,toggleRow:t=>{n((n=>n.some((n=>n[e]===t[e]))?n.filter((n=>n[e]!==t[e])):[...n,t]))},isAllSelected:t=>t.length>0&&t.every((t=>a(t[e]))),toggleAll:t=>{n((n=>t.length>0&&t.every((t=>n.some((n=>n[e]===t[e]))))?[]:t))},editField:(t,o,r)=>{n((n=>n.map((n=>n[e]===t?ie(ie({},n),{},{[o]:r}):n))))},editEnabled:o,enterEditMode:()=>l(!0),cancel:i,reset:i}};var se=n(5420),ue=n(6130);const de=({options:e,columns:t,data:n,onSort:o,onUpdate:a,totalRows:i,perPage:c,currentPage:u,onPageChange:m,onPerPageChange:g,idKey:b,onEdit:E,onDelete:x,getName:C,deleteDialogTitle:v,deleteDialogBody:q,deleteDialogConfirmText:R,confirmButtonColor:O})=>{const{selectedRows:S,isSelected:_,toggleRow:B,isAllSelected:k,toggleAll:K,editField:F,editEnabled:M,enterEditMode:A,cancel:$,reset:z}=ce(b),N=n.map((e=>e[b])).join(",");(0,r.useEffect)((()=>{z()}),[N]);const I=t=>t===e.sortCol?e.sortDir:null,H=async e=>{await(0,ue.default)({title:v||s().translate("general.are_you_sure"),text:"function"==typeof q?q(C(e)):q||`${s().translate("general.row_remove_warning")} ${C(e)}`,iconType:"warning",confirmButtonColor:O||"error",confirmButtonText:R||s().translate("general.yes_delete")})&&x(e[b])};return l().createElement(d(),{sx:{width:"100%"}},l().createElement(j,{editEnabled:M,hasSelection:S.length>0,onEdit:A,onApply:e=>{e.stopPropagation(),e.preventDefault(),Promise.resolve(a(S)).then((()=>z())).catch((e=>{console.error("Error updating events:",e)}))},onCancel:$}),l().createElement(p(),{elevation:0,sx:{width:"100%",mb:2}},l().createElement(w(),{component:p(),className:X,sx:{borderRadius:0,boxShadow:"none"}},l().createElement(f(),null,l().createElement(P(),{sx:{backgroundColor:"#EAEDF4"}},l().createElement(T(),null,l().createElement(h(),{align:"center",className:Z,sx:{backgroundColor:"#EAEDF4"}},l().createElement(D(),{checked:k(n),onChange:()=>{M||K(n)},disabled:M,slotProps:{input:{"aria-label":"select all"}}})),t.map(((e,t)=>{const n=!!e.sortable,r=e.width??"";return l().createElement(W,{editEnabled:M,onSort:o,sortDir:I(e.columnKey),sortable:n,columnIndex:t,columnKey:e.columnKey,width:r,key:`heading_${e.columnKey}`},e.header??e.label??e.value)})),(E||x)&&l().createElement(h(),{align:"center",className:V,sx:{backgroundColor:"#EAEDF4"}},e.actionsHeader||" "))),l().createElement(y(),null,t.length>0&&n.map((e=>l().createElement(le,{key:`row_${e[b]}`,row:e,idKey:b,editEnabled:M,isSelected:_(e[b]),editRow:S.find((t=>t[b]===e[b]))||e,onToggle:()=>B(e),onFieldChange:(t,n)=>F(e[b],t,n),columns:t,onEdit:E,onDelete:x?H:null})))))),c&&u&&m&&l().createElement(se.default,{totalRows:i,perPage:c,currentPage:u,onPageChange:m,onPerPageChange:g})))};de.propTypes={options:i().object.isRequired,columns:i().array.isRequired,data:i().array.isRequired,onSort:i().func.isRequired,onUpdate:i().func.isRequired,idKey:i().string,totalRows:i().number,perPage:i().number,currentPage:i().number,onPageChange:i().func,onPerPageChange:i().func,onEdit:i().func,onDelete:i().func,getName:i().func,deleteDialogTitle:i().string,deleteDialogBody:i().oneOfType([i().func,i().string]),deleteDialogConfirmText:i().string,confirmButtonColor:i().string},de.defaultProps={idKey:"id",onEdit:null,onDelete:null,getName:e=>e.name,deleteDialogTitle:null,deleteDialogBody:null,deleteDialogConfirmText:null,confirmButtonColor:null};const me=de;return o})()));
//# sourceMappingURL=bulk-edit-table.js.map