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={9299:(e,t,n)=>{var r=n(2015),o=n.n(r),a=n(9825),i=n.n(a),l=n(8619),c=n(8177),s=n.n(c),u=n(1519),m=n.n(u);const p=require("@mui/icons-material/Info");var d=n.n(p);const g=require("@mui/icons-material/Warning");var f=n.n(g);const h={warning:o().createElement(f(),{color:"warning"}),success:o().createElement(s(),{color:"success"}),error:o().createElement(m(),{color:"error"}),info:o().createElement(d(),{color:"info"})},y=({open:e,title:t,text:n,iconType:r="",onConfirm:a,onCancel:i,confirmButtonText:c="Confirm",confirmButtonColor:s="primary",cancelButtonText:u="Cancel",cancelButtonColor:m="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"}},h[r]&&o().createElement("div",{style:{marginRight:10}},h[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:m,variant:"outlined",sx:{whiteSpace:"nowrap",minWidth:100}},u),o().createElement(l.Button,{fullWidth:!0,onClick:a,color:s,variant:"contained",sx:{whiteSpace:"nowrap",minWidth:100}},c)));y.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},y.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(9299);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})}},5420:(e,t,n)=>{n.d(t,{default:()=>g});var r=n(2015),o=n(6842),a=n.n(o);const i=require("@mui/material/TablePagination");var l=n.n(i),c=n(9825),s=n.n(c),u=n(3209);const m={".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"}},p=[u.WU,u.k6,u.Lr],d=({totalRows:e,perPage:t,currentPage:n,onPageChange:o,onPerPageChange:i})=>{const c=r.useMemo((()=>i?p.includes(t)?p:[...p,t].sort(((e,t)=>e-t)):[t]),[t,i]);return r.createElement(l(),{component:"div",count:e??0,rowsPerPageOptions:c,rowsPerPage:t,page:n-1,onPageChange:(e,t)=>{o(t+1)},onRowsPerPageChange:i?e=>{i(parseInt(e.target.value,10))}:void 0,labelRowsPerPage:a().translate("mui_table.rows_per_page"),sx:m})};d.propTypes={totalRows:s().number,perPage:s().number.isRequired,currentPage:s().number.isRequired,onPageChange:s().func.isRequired,onPerPageChange:s().func};const g=d},9207:(e,t,n)=>{n.d(t,{A:()=>p});var r=n(2015),o=n(1570),a=n.n(o),i=n(1897),l=n.n(i),c=n(4325),s=n.n(c),u=n(5387);const m={fontWeight:"normal",overflowWrap:"break-word"},p=({row:e,col:t})=>r.createElement("span",{style:m},a()(e[t.columnKey])?e[t.columnKey]?r.createElement(l(),{fontSize:"large"}):r.createElement(s(),{fontSize:"large"}):t.render?t.render(e):t.truncateText?r.createElement(u.A,{charLimit:t.truncateText},e[t.columnKey]):e[t.columnKey])},5387:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(2015),o=n(9825),a=n.n(o),i=n(4603),l=n.n(i);const c=({children:e,charLimit:t})=>{const n=r.useRef(null),[o,a]=r.useState(!1),i="number"==typeof t,c=i&&e.length>t,s=c?e.slice(0,t)+"...":e,u=c||o?e:"";return r.createElement(l(),{title:u,placement:"top",componentsProps:{tooltip:{sx:{fontSize:"1.2rem"}}}},r.createElement("span",{ref:n,onMouseEnter:()=>{n.current&&!i&&a(n.current.scrollWidth>n.current.offsetWidth)},style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},r.createElement("span",{style:{fontWeight:"normal"}},s)))};c.propTypes={children:a().string,charLimit:a().oneOfType([a().bool,a().number])};const s=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")},1897:e=>{e.exports=require("@mui/icons-material/Check")},8177:e=>{e.exports=require("@mui/icons-material/CheckCircle")},4325:e=>{e.exports=require("@mui/icons-material/Close")},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")},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")},4603:e=>{e.exports=require("@mui/material/Tooltip")},6831:e=>{e.exports=require("@mui/utils")},6842:e=>{e.exports=require("i18n-react/dist/i18n-react")},1570:e=>{e.exports=require("lodash/isBoolean")},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:()=>F});var o=n(1116),a=n.n(o),i=n(2015),l=n(9825),c=n.n(l),s=n(6842),u=n.n(s),m=n(6989),p=n.n(m),d=n(6368),g=n.n(d),f=n(9292),h=n.n(f),y=n(9008),x=n.n(y),b=n(5684),E=n.n(b),v=n(5783),w=n.n(v),C=n(8202),P=n.n(C),T=n(38),B=n.n(T),q=n(464),O=n.n(q),S=n(270),W=n.n(S),k=n(8619),_=n(9247),D=n.n(_),j=n(6084),K=n.n(j),R=n(6831);const M="Z35249KJgMpoE1f5td0j";var z=n(6130),A=n(9207),I=n(5420);function L(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 N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){a()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const V={backgroundColor:"background.light",color:"text.disabled"},$=({value:e,isEditing:t,onBlur:n,validation:r})=>{const[o,a]=i.useState(e),[l,c]=i.useState(!1),[s,u]=i.useState(null);i.useEffect((()=>{a(e),u(null)}),[e]);const m=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?(u(null),n(e,!0)):u(o)},d=e=>{"Enter"===e.key&&(e.preventDefault(),m(o))};return t?i.createElement(k.TextField,{autoFocus:!0,value:o,onChange:e=>{a(e.target.value),s&&u(null)},onBlur:()=>{m(o)},onKeyDown:d,size:"small",fullWidth:!0,variant:"standard",error:!!s,helperText:s}):i.createElement(p(),{sx:{display:"flex",alignItems:"center",position:"relative",width:"100%",height:"100%"},onMouseEnter:()=>c(!0),onMouseLeave:()=>c(!1)},i.createElement("span",{style:{flex:1,fontWeight:"normal"}},e),l&&i.createElement(D(),{fontSize:"small",sx:{opacity:.5,position:"absolute",right:0,"&:hover":{opacity:1}}}))},H=({columns:e=[],data:t=[],totalRows:n,perPage:r,currentPage:o,onPageChange:a,onPerPageChange:l,onSort:c,options:s={sortCol:"",sortDir:1,disableProp:null},getName:m=e=>e.name,onEdit:d,onArchive:f,onDelete:y,onCellChange:b,deleteDialogBody:v,tableSx:C={}})=>{const[T,q]=i.useState(null),{sortCol:S,sortDir:_}=s,j=(e,t={})=>N(N({},t),(e=>s.disableProp&&e[s.disableProp]?V:null)(e)||{}),L=(e,t)=>"function"==typeof e.editable?e.editable(t):!!e.editable;return i.createElement(p(),{sx:{width:"100%"}},i.createElement(W(),{elevation:0,sx:{width:"100%",mb:2}},i.createElement(w(),{component:W(),sx:{borderRadius:0,boxShadow:"none"}},i.createElement(h(),{sx:C},i.createElement(P(),{sx:{backgroundColor:"#EAEAEA"}},i.createElement(O(),null,e.map((e=>i.createElement(E(),{key:e.columnKey,sx:{width:e.width,minWidth:e.width,maxWidth:e.width,fontWeight:"normal"},align:e.align??"left"},e.sortable?i.createElement(B(),{active:S===e.columnKey,direction:S===e.columnKey&&-1===_?"desc":"asc",onClick:()=>c(e.columnKey,-1*_),sx:{fontWeight:"normal"}},e.header,S===e.columnKey?i.createElement(p(),{component:"span",sx:R.visuallyHidden},-1===_?u().translate("mui_table.sorted_desc"):u().translate("mui_table.sorted_asc")):null):i.createElement("span",{style:{fontWeight:"normal"}},e.header)))),d&&i.createElement(E(),{sx:{width:40,fontWeight:"normal"}}),f&&i.createElement(E(),{sx:{width:80,fontWeight:"normal"}}),y&&i.createElement(E(),{sx:{width:40,fontWeight:"normal"}}))),i.createElement(x(),null,t.map((t=>i.createElement(O(),{key:t.id},e.map((n=>i.createElement(E(),{key:`${t.id}-${n.columnKey}`,onClick:()=>((t,n)=>{const r=e.find((e=>e.columnKey===n));r&&L(r,t)&&q({rowId:t.id,columnKey:n})})(t,n.columnKey),sx:j(t,{cursor:L(n,t)?"pointer":"default",padding:L(n,t)?"8px 16px":void 0})},L(n,t)?i.createElement($,{value:t[n.columnKey],isEditing:T&&T.rowId===t.id&&T.columnKey===n.columnKey,onBlur:(e,r)=>((e,t,n,r)=>{b&&r&&b(e,t,n),q(null)})(t.id,n.columnKey,e,r),validation:n.validation}):i.createElement(A.A,{row:t,col:n})))),d&&i.createElement(E(),{sx:j(t),className:M},i.createElement(k.IconButton,{onClick:()=>d(t),size:"small","aria-label":u().translate("general.edit")},i.createElement(D(),null))),f&&i.createElement(E(),{align:"center",sx:N({},j(t,{width:80,fontWeight:"normal"})),className:M},i.createElement(g(),{variant:"text",color:"inherit",size:"small",onClick:()=>f(t),sx:{fontSize:"1.3rem",fontWeight:"normal",lineHeight:"2.2rem",padding:"4px 5px",color:"rgba(0,0,0,0.56)"}},t.is_archived?u().translate("general.unarchive"):u().translate("general.archive"))),y&&i.createElement(E(),{sx:j(t),className:M},i.createElement(k.IconButton,{onClick:()=>(async e=>{await(0,z.default)({title:u().translate("general.are_you_sure"),text:v?v(m(e)):`${u().translate("general.row_remove_warning")} ${m(e)}`,type:"warning",showCancelButton:!0,confirmButtonColor:"warning",confirmButtonText:u().translate("general.yes_delete")})&&y(e.id)})(t),size:"small","aria-label":u().translate("general.delete")},i.createElement(K(),null))))))))),r&&o&&a&&i.createElement(I.default,{totalRows:n??t.length,perPage:r,currentPage:o,onPageChange:a,onPerPageChange:l})))};H.propTypes={columns:c().arrayOf(c().shape({columnKey:c().string.isRequired,header:c().node,width:c().oneOfType([c().string,c().number]),align:c().string,sortable:c().bool,editable:c().oneOfType([c().bool,c().func]),validation:c().shape({schema:c().object}),render:c().func})),data:c().arrayOf(c().object),totalRows:c().number,perPage:c().number,currentPage:c().number,onPageChange:c().func,onPerPageChange:c().func,onSort:c().func,options:c().shape({sortCol:c().string,sortDir:c().oneOf([1,-1]),disableProp:c().string}),getName:c().func,onEdit:c().func,onArchive:c().func,onDelete:c().func,onCellChange:c().func,deleteDialogBody:c().func};const F=H;return r})()));
//# sourceMappingURL=editable-table.js.map