openstack-uicore-foundation/lib/components/mui/sortable-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,r)=>{var n=r(2015),o=r.n(n),a=r(9825),i=r.n(a),l=r(8619),c=r(8177),s=r.n(c),u=r(1519),m=r.n(u);const d=require("@mui/icons-material/Info");var p=r.n(d);const g=require("@mui/icons-material/Warning");var f=r.n(g);const b={warning:o().createElement(f(),{color:"warning"}),success:o().createElement(s(),{color:"success"}),error:o().createElement(m(),{color:"error"}),info:o().createElement(p(),{color:"info"})},y=({open:e,title:t,text:r,iconType:n="",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"}},b[n]&&o().createElement("div",{style:{marginRight:10}},b[n]),o().createElement(l.Typography,{variant:"body1"},r))),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,r)=>{r.d(t,{default:()=>a});r(1116),r(2015),r(9299);const n="__oif_confirm_dialog_bridge__",o="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:{},a=({title:e,text:t,iconType:r="",confirmButtonText:a="Confirm",cancelButtonText:i="Cancel",confirmButtonColor:l="primary",cancelButtonColor:c="primary"})=>{if(!o[n])throw new Error("[openstack-uicore-foundation] showConfirmDialog: <GlobalConfirmDialog /> is not mounted. Add <GlobalConfirmDialog /> to the root of your app.");return o[n]({title:e,text:t,iconType:r,confirmButtonText:a,cancelButtonText:i,confirmButtonColor:l,cancelButtonColor:c})}},5420:(e,t,r)=>{r.d(t,{default:()=>g});var n=r(2015),o=r(6842),a=r.n(o);const i=require("@mui/material/TablePagination");var l=r.n(i),c=r(9825),s=r.n(c),u=r(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"}},d=[u.WU,u.k6,u.Lr],p=({totalRows:e,perPage:t,currentPage:r,onPageChange:o,onPerPageChange:i})=>{const c=n.useMemo((()=>i?d.includes(t)?d:[...d,t].sort(((e,t)=>e-t)):[t]),[t,i]);return n.createElement(l(),{component:"div",count:e??0,rowsPerPageOptions:c,rowsPerPage:t,page:r-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})};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,r)=>{r.d(t,{Lr:()=>a,WU:()=>n,k6:()=>o});const n=10,o=20,a=50},1116:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},8177:e=>{e.exports=require("@mui/icons-material/CheckCircle")},1519:e=>{e.exports=require("@mui/icons-material/Error")},8619:e=>{e.exports=require("@mui/material")},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 r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.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:()=>ne});const o=require("@babel/runtime/helpers/extends");var a=r.n(o),i=r(1116),l=r.n(i),c=r(2015),s=r(6842),u=r.n(s);const m=require("@mui/material/Box");var d=r.n(m);const p=require("@mui/material/Table");var g=r.n(p);const f=require("@mui/material/TableBody");var b=r.n(f);const y=require("@mui/material/TableCell");var x=r.n(y);const h=require("@mui/material/TableContainer");var E=r.n(h);const w=require("@mui/material/TableHead");var v=r.n(w);const P=require("@mui/material/TableSortLabel");var C=r.n(P);const T=require("@mui/material/TableRow");var q=r.n(T);const B=require("@mui/material/Paper");var D=r.n(B);const O=require("@mui/icons-material/UnfoldMore");var S=r.n(O),_=r(8619);const k=require("@mui/icons-material/Edit");var R=r.n(k);const j=require("@mui/icons-material/Delete");var W=r.n(j);const K=require("react-beautiful-dnd"),z=require("@mui/utils"),M="pAjoKOwibtPxYWEmjS7g";var I=r(6130);const L=require("lodash/isBoolean");var A=r.n(L);const N=require("@mui/icons-material/Check");var $=r.n(N);const H=require("@mui/icons-material/Close");var U=r.n(H),G=r(9825),Y=r.n(G);const F=require("@mui/material/Tooltip");var J=r.n(F);const Q=({children:e,charLimit:t})=>{const r=c.useRef(null),[n,o]=c.useState(!1),a="number"==typeof t,i=a&&e.length>t,l=i?e.slice(0,t)+"...":e,s=i||n?e:"";return c.createElement(J(),{title:s,placement:"top",componentsProps:{tooltip:{sx:{fontSize:"1.2rem"}}}},c.createElement("span",{ref:r,onMouseEnter:()=>{r.current&&!a&&o(r.current.scrollWidth>r.current.offsetWidth)},style:{display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},c.createElement("span",{style:{fontWeight:"normal"}},l)))};Q.propTypes={children:Y().string,charLimit:Y().oneOfType([Y().bool,Y().number])};const V=Q,X={fontWeight:"normal",overflowWrap:"break-word"},Z=({row:e,col:t})=>c.createElement("span",{style:X},A()(e[t.columnKey])?e[t.columnKey]?c.createElement($(),{fontSize:"large"}):c.createElement(U(),{fontSize:"large"}):t.render?t.render(e):t.truncateText?c.createElement(V,{charLimit:t.truncateText},e[t.columnKey]):e[t.columnKey]);var ee=r(5420);function te(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 re(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?te(Object(r),!0).forEach((function(t){l()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):te(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}const ne=({columns:e=[],data:t=[],totalRows:r,perPage:n,currentPage:o,onPageChange:i,onPerPageChange:l,onSort:s,options:m={sortCol:"",sortDir:1},getName:p=e=>e.name,onEdit:f,onDelete:y,deleteDialogTitle:h=null,deleteDialogBody:w=null,onReorder:P,idKey:T="id",updateOrderKey:B="order",tableSx:O={}})=>{const{sortCol:k,sortDir:j}=m;return c.createElement(d(),{sx:{width:"100%"}},c.createElement(D(),{elevation:0,sx:{width:"100%",mb:2}},c.createElement(E(),{component:D(),sx:{borderRadius:0,boxShadow:"none"}},c.createElement(g(),{sx:O},c.createElement(v(),{sx:{backgroundColor:"#EAEAEA"}},c.createElement(q(),null,e.map((e=>c.createElement(x(),{key:e.columnKey,sx:{width:e.width,minWidth:e.width,maxWidth:e.width},align:e.align??"left"},e.sortable?c.createElement(C(),{active:k===e.columnKey,direction:k===e.columnKey&&-1===j?"desc":"asc",onClick:()=>s(e.columnKey,-1*j)},e.header,k===e.columnKey?c.createElement(d(),{component:"span",sx:z.visuallyHidden},-1===j?u().translate("mui_table.sorted_desc"):u().translate("mui_table.sorted_asc")):null):e.header))),f&&c.createElement(x(),{sx:{width:40}}),y&&c.createElement(x(),{sx:{width:40}}),P&&c.createElement(x(),{sx:{width:40}}))),c.createElement(K.DragDropContext,{onDragEnd:e=>{var r;if(!e.destination||e.source.index===e.destination.index)return;const n=[...t],[o]=n.splice(e.source.index,1);n.splice(e.destination.index,0,o),B&&n.forEach(((e,t)=>{e[B]=t+1}));const a=o.id,i=null===(r=n.find((e=>e[T||"id"]===a)))||void 0===r?void 0:r[B];null==P||P(n,a,i)}},c.createElement(K.Droppable,{droppableId:"mui-table-droppable"},(r=>c.createElement(b(),a()({ref:r.innerRef},r.droppableProps),t.map(((t,r)=>c.createElement(K.Draggable,{key:t[T]||r,draggableId:String(t[T]||r),index:r},((r,n)=>c.createElement(q(),a()({ref:r.innerRef},r.draggableProps,{sx:re({},n.isDragging?{display:"table",width:"100%",tableLayout:"fixed",backgroundColor:"#f0f0f0",transform:"scale(1.01)",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",zIndex:1,position:"relative",transition:"transform 0.2s ease, background-color 0.2s ease"}:{transition:"background-color 0.2s ease"})}),e.map((e=>c.createElement(x(),{key:e.columnKey,align:e.align??"left",className:`${e.dottedBorder&&M} ${e.className}`},c.createElement(Z,{row:t,col:e})))),f&&c.createElement(x(),{align:"center",sx:{width:40},className:M},c.createElement(_.IconButton,{size:"large",onClick:()=>f(t),sx:{padding:0}},c.createElement(R(),{fontSize:"large"}))),y&&c.createElement(x(),{align:"center",sx:{width:40},className:M},c.createElement(_.IconButton,{size:"large",onClick:()=>(async e=>{await(0,I.default)({title:h||u().translate("general.are_you_sure"),text:"function"==typeof w?w(p(e)):w||`${u().translate("general.row_remove_warning")} ${p(e)}`,type:"warning",showCancelButton:!0,confirmButtonColor:"#DD6B55",confirmButtonText:u().translate("general.yes_delete")})&&y(e.id)})(t),sx:{padding:0}},c.createElement(W(),{fontSize:"large"}))),P&&c.createElement(x(),a()({align:"center",sx:{width:40},className:M},r.dragHandleProps),c.createElement(_.IconButton,{size:"large"},c.createElement(S(),{fontSize:"large"})))))))),r.placeholder,0===t.length&&c.createElement(q(),null,c.createElement(x(),{colSpan:e.length,align:"center"},u().translate("mui_table.no_items"))))))))),n&&o&&i&&c.createElement(ee.default,{totalRows:r,perPage:n,currentPage:o,onPageChange:i,onPerPageChange:l})))};return n})()));
//# sourceMappingURL=sortable-table.js.map