openstack-uicore-foundation/lib/components/mui/editable-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={4574:(e,t,n)=>{var r=n(2015),o=n.n(r),a=n(9825),i=n.n(a),l=n(8619),c=n(5814);const s={warning:o().createElement(c.Warning,{color:"warning"}),success:o().createElement(c.CheckCircle,{color:"success"}),error:o().createElement(c.Error,{color:"error"}),info:o().createElement(c.Info,{color:"info"})},u=({open:e,title:t,text:n,iconType:r="",onConfirm:a,onCancel:i,confirmButtonText:c="Confirm",confirmButtonColor:u="primary",cancelButtonText:m="Cancel",cancelButtonColor:d="primary"})=>o().createElement(l.Dialog,{open:e,onClose:i},o().createElement(l.DialogTitle,{sx:{p:2},component:"div"},o().createElement(l.Typography,{variant:"h5"},t)),o().createElement(l.Divider,null),o().createElement(l.DialogContent,{sx:{p:2}},o().createElement("div",{style:{display:"flex",alignItems:"center"}},s[r]&&o().createElement("div",{style:{marginRight:10}},s[r]),o().createElement(l.Typography,{variant:"body1"},n))),o().createElement(l.Divider,{sx:{margin:"10px 0px 10px 0px"}}),o().createElement(l.DialogActions,null,o().createElement(l.Button,{fullWidth:!0,onClick:i,color:d,variant:"outlined",sx:{whiteSpace:"nowrap",minWidth:100}},m),o().createElement(l.Button,{fullWidth:!0,onClick:a,color:u,variant:"contained",sx:{whiteSpace:"nowrap",minWidth:100}},c)));u.propTypes={open:i().bool,title:i().string.isRequired,text:i().string.isRequired,iconType:i().string,onConfirm:i().func.isRequired,onCancel:i().func.isRequired,confirmButtonText:i().string,confirmButtonColor:i().string,cancelButtonText:i().string,cancelButtonColor:i().string},u.defaultProps={open:!1,iconType:"warning",confirmButtonText:"Confirm",confirmButtonColor:"primary",cancelButtonText:"Cancel",cancelButtonColor:"default"}},6130:(e,t,n)=>{n.d(t,{default:()=>a});n(1116),n(2015),n(4574);const r="__oif_confirm_dialog_bridge__",o="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:{},a=({title:e,text:t,iconType:n="",confirmButtonText:a="Confirm",cancelButtonText:i="Cancel",confirmButtonColor:l="primary",cancelButtonColor:c="primary"})=>{if(!o[r])throw new Error("[openstack-uicore-foundation] showConfirmDialog: <GlobalConfirmDialog /> is not mounted. Add <GlobalConfirmDialog /> to the root of your app.");return o[r]({title:e,text:t,iconType:n,confirmButtonText:a,cancelButtonText:i,confirmButtonColor:l,cancelButtonColor:c})}},3209:(e,t,n)=>{n.d(t,{Lr:()=>a,WU:()=>r,k6:()=>o});const r=10,o=20,a=50},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},5814:e=>{e.exports=require("@mui/icons-material")},6084:e=>{e.exports=require("@mui/icons-material/Delete")},9247:e=>{e.exports=require("@mui/icons-material/Edit")},8619:e=>{e.exports=require("@mui/material")},6989:e=>{e.exports=require("@mui/material/Box")},6368:e=>{e.exports=require("@mui/material/Button")},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")},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(r){var o=t[r];if(void 0!==o)return o.exports;var a=t[r]={exports:{}};return e[r](a,a.exports,n),a.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 r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}})(),(()=>{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 r={};n.r(r),n.d(r,{default:()=>$});var o=n(1116),a=n.n(o),i=n(2015),l=n(6842),c=n.n(l),s=n(6989),u=n.n(s),m=n(6368),d=n.n(m),p=n(9292),g=n.n(p),f=n(9008),y=n.n(f),x=n(5684),b=n.n(x),h=n(5783),E=n.n(h),v=n(8202),w=n.n(v);const C=require("@mui/material/TablePagination");var T=n.n(C),P=n(38),B=n.n(P),q=n(464),_=n.n(q),O=n(270),k=n.n(O),D=n(8619),S=n(9247),j=n.n(S),K=n(6084),R=n.n(K),W=n(6831),I=n(3209),M=n(6130);function z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function A(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?z(Object(n),!0).forEach((function(t){a()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const L={backgroundColor:"background.light",color:"text.disabled"},V=({value:e,isEditing:t,onBlur:n,validation:r})=>{const[o,a]=i.useState(e),[l,c]=i.useState(!1),[s,m]=i.useState(null);i.useEffect((()=>{a(e),m(null)}),[e]);const d=e=>{const{isValid:t,message:o}=((e,t)=>{if(!t)return{isValid:!0};if(t.schema&&"function"==typeof t.schema.validateSync)try{return t.schema.validateSync(e),{isValid:!0,message:null}}catch(e){return{isValid:!1,message:e.message}}return{isValid:!0}})(e,r);t?(m(null),n(e,!0)):m(o)},p=e=>{"Enter"===e.key&&(e.preventDefault(),d(o))};return t?i.createElement(D.TextField,{autoFocus:!0,value:o,onChange:e=>{a(e.target.value),s&&m(null)},onBlur:()=>{d(o)},onKeyDown:p,size:"small",fullWidth:!0,variant:"standard",error:!!s,helperText:s}):i.createElement(u(),{sx:{display:"flex",alignItems:"center",position:"relative",width:"100%",height:"100%"},onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1)},i.createElement("span",{style:{flex:1}},e),l&&i.createElement(j(),{fontSize:"small",sx:{opacity:.5,position:"absolute",right:0,"&:hover":{opacity:1}}}))},$=({columns:e=[],data:t=[],totalRows:n,perPage:r,currentPage:o,onPageChange:a,onPerPageChange:l,onSort:s,options:m={sortCol:"",sortDir:1,disableProp:null},getName:p=e=>e.name,onEdit:f,onArchive:x,onDelete:h,onCellChange:v,deleteDialogBody:C})=>{const[P,q]=i.useState(null),O=[I.WU,I.k6,I.Lr],S=O.includes(r)?O:[...O,r].sort(((e,t)=>e-t)),{sortCol:K,sortDir:z}=m,$=(e,t={})=>A(A({},t),(e=>m.disableProp&&e[m.disableProp]?L:null)(e)||{}),H=(e,t)=>"function"==typeof e.editable?e.editable(t):!!e.editable;return i.createElement(u(),{sx:{width:"100%"}},i.createElement(k(),{elevation:0,sx:{width:"100%",mb:2}},i.createElement(E(),{component:k(),sx:{borderRadius:0,boxShadow:"none"}},i.createElement(g(),null,i.createElement(w(),{sx:{backgroundColor:"#EAEAEA"}},i.createElement(_(),null,e.map((e=>i.createElement(b(),{key:e.columnKey,sx:{width:e.width,minWidth:e.width,maxWidth:e.width},align:e.align??"left"},e.sortable?i.createElement(B(),{active:K===e.columnKey,direction:K===e.columnKey&&-1===z?"desc":"asc",onClick:()=>s(e.columnKey,-1*z)},e.header,K===e.columnKey?i.createElement(u(),{component:"span",sx:W.visuallyHidden},-1===z?c().translate("mui_table.sorted_desc"):c().translate("mui_table.sorted_asc")):null):e.header))),f&&i.createElement(b(),{sx:{width:40}}),x&&i.createElement(b(),{sx:{width:80}}),h&&i.createElement(b(),{sx:{width:40}}))),i.createElement(y(),null,t.map((t=>i.createElement(_(),{key:t.id},e.map((n=>i.createElement(b(),{key:`${t.id}-${n.columnKey}`,onClick:()=>((t,n)=>{const r=e.find((e=>e.columnKey===n));r&&H(r,t)&&q({rowId:t.id,columnKey:n})})(t,n.columnKey),sx:$(t,{cursor:H(n,t)?"pointer":"default",padding:H(n,t)?"8px 16px":void 0})},H(n,t)?i.createElement(V,{value:t[n.columnKey],isEditing:P&&P.rowId===t.id&&P.columnKey===n.columnKey,onBlur:(e,r)=>((e,t,n,r)=>{v&&r&&v(e,t,n),q(null)})(t.id,n.columnKey,e,r),validation:n.validation}):n.render?n.render(t):t[n.columnKey]))),f&&i.createElement(b(),{sx:$(t)},i.createElement(D.IconButton,{onClick:()=>f(t),size:"small","aria-label":c().translate("general.edit")},i.createElement(j(),null))),x&&i.createElement(b(),{align:"center",sx:{width:80}},i.createElement(d(),{variant:"text",color:"inherit",size:"small",onClick:()=>x(t),sx:{fontSize:"1.3rem",fontWeight:500,lineHeight:"2.2rem",padding:"4px 5px"}},t.is_archived?c().translate("general.unarchive"):c().translate("general.archive"))),h&&i.createElement(b(),{sx:$(t)},i.createElement(D.IconButton,{onClick:()=>(async e=>{await(0,M.default)({title:c().translate("general.are_you_sure"),text:C?C(p(e)):`${c().translate("general.row_remove_warning")} ${p(e)}`,type:"warning",showCancelButton:!0,confirmButtonColor:"#DD6B55",confirmButtonText:c().translate("general.yes_delete")})&&h(e.id)})(t),size:"small","aria-label":c().translate("general.delete")},i.createElement(R(),null))))))))),i.createElement(T(),{rowsPerPageOptions:S,component:"div",count:n??t.length,rowsPerPage:r,page:o-1,onPageChange:(e,t)=>{a(t+1)},onRowsPerPageChange:e=>{l(e.target.value)},labelRowsPerPage:c().translate("mui_table.rows_per_page"),sx:{".MuiTablePagination-toolbar":{alignItems:"baseline",marginTop:"1.6rem"},".MuiTablePagination-spacer":{display:"none"},".MuiTablePagination-displayedRows":{marginLeft:"auto"}}})))};return r})()));
//# sourceMappingURL=editable-table.js.map