@amsterdam/bmi-component-library/es/common/src/DocumentTable/DocumentTable.js

A React component library based on ASC and Material-UI aimed at repurposing and sharing components across BMI projects

function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value}catch(error){reject(error);return}if(info.done){resolve(value)}else{Promise.resolve(value).then(_next,_throw)}}function _async_to_generator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(undefined)})}}function _define_property(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};var ownKeys=Object.keys(source);if(typeof Object.getOwnPropertySymbols==="function"){ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))}ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})}keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){source=source!=null?source:{};if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}return target}import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useCallback,useEffect,useMemo,useState}from"react";import{Button}from"@amsterdam/asc-ui";import{Close}from"@amsterdam/asc-assets";import Skeleton from"react-loading-skeleton";import{StyledPagination,StyledDataGrid}from"./DocumentTableStyle";import ColumnFilter from"./ColumnFilter";import"react-loading-skeleton/dist/skeleton.css";export function paginate(rows,pageSize,currentPage){return rows.slice((currentPage-1)*pageSize,currentPage*pageSize)}export function applyFilters(rows,filters){return Object.keys(filters).length===0?rows:rows.filter(row=>{let include=true;Object.keys(filters).some(filterKey=>{var _filters;if(((_filters=filters)===null||_filters===void 0?void 0:_filters[filterKey].length)&&!String(row[filterKey]).toLowerCase().includes(String(filters[filterKey]).toLowerCase())){include=false;return true}return false});return include})}const DocumentTable=({columns,rows,disableFilterRow=false,disableRemoval=false,page=1,pageSize=10,onRemove,onDownload,loading=false})=>{const tableColumns=useMemo(()=>{let cols=columns!==null&&columns!==void 0?columns:[{field:"filename",headerName:"Bestandsnaam",renderCell:function renderCell(params){if(loading)return _jsx(Skeleton,{});return onDownload?_jsxs("a",{href:"#",onClick:evt=>{evt.stopPropagation();evt.preventDefault();onDownload(params.row)},onDragStart:evt=>evt.preventDefault(),"data-testid":`document-table-download-${params.id}`,children:[_jsx("span",{className:"sr-only",children:"Download"}),params.value]}):_jsx(_Fragment,{children:params.value})},flex:1.5,sortable:false,resizable:false},{field:"documentDescription",headerName:"Documentomschrijving",flex:1.5,sortable:false,resizable:false},{field:"documentType",headerName:"Documenttype",flex:1.5,sortable:false,resizable:false},{field:"year",headerName:"Jaar",flex:.5,sortable:false,resizable:false}];if(!disableFilterRow){cols=cols.map(col=>_object_spread_props(_object_spread({},col),{renderCell:function renderCell(params){if(loading)return _jsx(Skeleton,{});if(params.id===0&&params.field==="id")return _jsx(_Fragment,{});if(params.id===0)return _jsx(ColumnFilter,{params:params,onFilter:value=>{onFilterChange(params.field,value)},onClear:()=>onClearFilter(params.field)});if(col.renderCell!==undefined)return col.renderCell(params);return _jsx(_Fragment,{children:params.formattedValue})}}))}else{cols=cols.map(col=>_object_spread_props(_object_spread({},col),{renderCell:function renderCell(params){if(loading)return _jsx(Skeleton,{});if(col.renderCell!==undefined)return col.renderCell(params);return _jsx(_Fragment,{children:params.formattedValue})}}))}if(!disableRemoval){cols.push({field:"id",headerName:" ",sortable:false,cellClassName:"remove",renderCell:function renderCell(params){if(loading)return _jsx(Skeleton,{});if(params.id===0&&params.field==="id")return _jsx(_Fragment,{});return _jsx(Button,{variant:"textButton",iconSize:14,iconLeft:_jsx(Close,{}),onClick:()=>handleRemoval(params.value),"data-testid":`document-table-remove-${params.id}`,children:"Wissen"})}})}return cols},[columns,disableFilterRow,disableRemoval,loading]);const[filteredRows,setFilteredRows]=useState(rows);const[tableRows,setTableRows]=useState(rows);const[currentPage,setCurrentPage]=useState(page);const[filters,setFilters]=useState({});const[deletedRowIds,setDeletedRowIds]=useState([]);const onFilterChange=useCallback((name,value)=>{setFilters(prevState=>_object_spread_props(_object_spread({},prevState),{[name]:value}))},[]);const onClearFilter=useCallback(key=>{delete filters[key];setFilters(_object_spread({},filters))},[]);const handleRemoval=useCallback(function(){var _ref=_async_to_generator(function*(id){if(onRemove){const removed=yield onRemove(id);if(removed!==false)setDeletedRowIds([...deletedRowIds,id])}});return function(id){return _ref.apply(this,arguments)}}(),[]);const skeletonRows=useMemo(()=>{const skeletonRow=tableColumns.reduce((acc,col,idx)=>{acc[col.field]="";return acc},{});return[...new Array(pageSize+(disableFilterRow?0:1))].map((n,idx)=>_object_spread_props(_object_spread({},skeletonRow),{id:idx+2}))},[tableColumns]);useEffect(()=>{const filteredRows=(disableFilterRow?rows:applyFilters(rows,filters)).filter(row=>!deletedRowIds.includes(row.id));setFilteredRows(filteredRows);setTableRows([...disableFilterRow?[]:[{id:0}],...paginate(filteredRows,pageSize,currentPage)])},[currentPage,filters,rows,deletedRowIds]);useEffect(()=>setCurrentPage(1),[filters]);useEffect(()=>setDeletedRowIds([]),[rows]);return _jsxs(_Fragment,{children:[_jsx(StyledDataGrid,{columns:tableColumns,rows:loading?skeletonRows:tableRows,disableColumnFilter:true,disableColumnMenu:true,autoHeight:true,hideFooter:true,hideFooterPagination:true,disableRowSelectionOnClick:true,rowHeight:42,columnHeaderHeight:42,columnBuffer:tableColumns.length,getRowHeight:()=>"auto"}),!loading&&_jsx(StyledPagination,{collectionSize:filteredRows.length,pageSize:pageSize,page:currentPage,onPageChange:setCurrentPage})]})};export default DocumentTable;
//# sourceMappingURL=DocumentTable.js.map