beta-parity-react
Version:
Beta Parity React Components
1 lines • 19.9 kB
JavaScript
;function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}Object.defineProperty(exports,"__esModule",{value:true});exports.TablePagination=exports.Table=void 0;var _react=_interopRequireDefault(require("react"));var _classnames=_interopRequireDefault(require("classnames"));var _lucideReact=require("lucide-react");require("./index.css");var _Button=require("../Button");var _Checkbox=require("../Checkbox");var _Select=require("../Select");var _useCombinedRefs=_interopRequireDefault(require("../hooks/useCombinedRefs"));var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _createForOfIteratorHelper(o,allowArrayLike){var it=typeof Symbol!=="undefined"&&o[Symbol.iterator]||o["@@iterator"];if(!it){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]}},e:function e(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var normalCompletion=true,didErr=false,err;return{s:function s(){it=it.call(o)},n:function n(){var step=it.next();normalCompletion=step.done;return step},e:function e(_e2){didErr=true;err=_e2},f:function f(){try{if(!normalCompletion&&it["return"]!=null)it["return"]()}finally{if(didErr)throw err}}}}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(obj,key,value){key=_toPropertyKey(key);if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true})}else{obj[key]=value}return obj}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}var TablePagination=exports.TablePagination=function TablePagination(_ref){var _ref$currentPage=_ref.currentPage,currentPage=_ref$currentPage===void 0?1:_ref$currentPage,_ref$pageSize=_ref.pageSize,pageSize=_ref$pageSize===void 0?10:_ref$pageSize,total=_ref.total,_onChange=_ref.onChange,_ref$pageSizeOptions=_ref.pageSizeOptions,pageSizeOptions=_ref$pageSizeOptions===void 0?[10,20,50,100]:_ref$pageSizeOptions,onPageSizeChange=_ref.onPageSizeChange;var totalPages=Math.ceil(total/pageSize);var start=(currentPage-1)*pageSize+1;var end=Math.min(currentPage*pageSize,total);var handlePrev=function handlePrev(){if(currentPage>1){_onChange===null||_onChange===void 0||_onChange(currentPage-1)}};var handleNext=function handleNext(){if(currentPage<totalPages){_onChange===null||_onChange===void 0||_onChange(currentPage+1)}};return(0,_jsxRuntime.jsxs)("div",{className:"table-pagination",children:[_onChange&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_Button.Button,{iconOnly:true,kind:"ghost",disabled:currentPage===1,onClick:handlePrev,"aria-label":"Previous page",children:(0,_jsxRuntime.jsx)(_lucideReact.ChevronLeft,{})}),(0,_jsxRuntime.jsx)(_Button.Button,{disabled:currentPage===totalPages,onClick:handleNext,iconOnly:true,kind:"ghost","aria-label":"Next page",children:(0,_jsxRuntime.jsx)(_lucideReact.ChevronRight,{})})]}),onPageSizeChange&&(0,_jsxRuntime.jsxs)("div",{className:"table-row-per-page",children:[(0,_jsxRuntime.jsx)("span",{children:"Rows per page:"}),(0,_jsxRuntime.jsx)(_Select.Select,{"native":true,theme:"alternative",defaultValue:pageSize.toString(),value:pageSize.toString(),options:pageSizeOptions.map(function(option){return{value:option.toString(),label:option.toString()}}),selectSize:"sm",onChange:function onChange(e){onPageSizeChange===null||onPageSizeChange===void 0||onPageSizeChange(Number(e.target.value));_onChange===null||_onChange===void 0||_onChange(1)}}),(0,_jsxRuntime.jsxs)("span",{className:"table-pagination-info",children:[start,"-",end," of ",total]})]})]})};var Table=exports.Table=_react["default"].forwardRef(function(_ref2,ref){var data=_ref2.data,columns=_ref2.columns,title=_ref2.title,description=_ref2.description,actions=_ref2.actions,batchActions=_ref2.batchActions,_ref2$selectable=_ref2.selectable,selectable=_ref2$selectable===void 0?false:_ref2$selectable,_ref2$selectOnRowClic=_ref2.selectOnRowClick,selectOnRowClick=_ref2$selectOnRowClic===void 0?false:_ref2$selectOnRowClic,maxHeight=_ref2.maxHeight,emptyState=_ref2.emptyState,_ref2$selectedRows=_ref2.selectedRows,selectedRows=_ref2$selectedRows===void 0?[]:_ref2$selectedRows,onSelect=_ref2.onSelect,onSort=_ref2.onSort,_ref2$countDescriptio=_ref2.countDescription,countDescription=_ref2$countDescriptio===void 0?"selected":_ref2$countDescriptio,sortKey=_ref2.sortKey,sortDirection=_ref2.sortDirection,footer=_ref2.footer,_ref2$showRowCount=_ref2.showRowCount,showRowCount=_ref2$showRowCount===void 0?true:_ref2$showRowCount,onRowClick=_ref2.onRowClick,_ref2$className=_ref2.className,className=_ref2$className===void 0?"":_ref2$className,_ref2$freezeColumns=_ref2.freezeColumns,freezeColumns=_ref2$freezeColumns===void 0?-1:_ref2$freezeColumns,_ref2$color=_ref2.color,color=_ref2$color===void 0?"neutral":_ref2$color;var defaultSelectedRows=new Set(selectedRows.map(function(item){return item.id}));var _React$useState=_react["default"].useState(defaultSelectedRows),_React$useState2=_slicedToArray(_React$useState,2),currentSelected=_React$useState2[0],setCurrentSelected=_React$useState2[1];var _React$useState3=_react["default"].useState({}),_React$useState4=_slicedToArray(_React$useState3,2),columnWidths=_React$useState4[0],setColumnWidths=_React$useState4[1];var _React$useState5=_react["default"].useState({}),_React$useState6=_slicedToArray(_React$useState5,2),frozenPositions=_React$useState6[0],setFrozenPositions=_React$useState6[1];var wrapperTableRef=_react["default"].useRef(null);var tableRef=_react["default"].useRef(null);var combinedRef=(0,_useCombinedRefs["default"])(ref,tableRef);var startXRef=_react["default"].useRef(0);var startWidthRef=_react["default"].useRef(0);var handleResizeStart=function handleResizeStart(e,key){var _tableRef$current,_target$querySelector;e.preventDefault();e.stopPropagation();var target=(_tableRef$current=tableRef.current)===null||_tableRef$current===void 0?void 0:_tableRef$current.querySelector("th[data-key=\"".concat(key,"\"]"));var targetColumn=columns.find(function(column){return column.key===key});var contentWidth=(((_target$querySelector=target.querySelector(".table-head-cell-content"))===null||_target$querySelector===void 0?void 0:_target$querySelector.getBoundingClientRect().width)||50)+32;if(target&&targetColumn){startXRef.current=e.clientX;startWidthRef.current=target.getBoundingClientRect().width;target.style.cursor="col-resize";var handleMouseMove=function handleMouseMove(e){var minWidth=targetColumn.width||contentWidth;var gap=e.clientX-startXRef.current;var width=Math.max(minWidth,startWidthRef.current+gap);var newColumnWidths=_objectSpread(_objectSpread({},columnWidths),{},_defineProperty({},key,Math.floor(width)));setColumnWidths(newColumnWidths);getFrozenColumnWidths("freeze")};var handleMouseUp=function handleMouseUp(e){getFrozenColumnWidths("freeze");target.style.cursor="pointer";document.removeEventListener("mousemove",handleMouseMove);document.removeEventListener("mouseup",handleMouseUp)};document.addEventListener("mousemove",handleMouseMove);document.addEventListener("mouseup",handleMouseUp)}};var handleSelectRow=function handleSelectRow(id,checked){var newSelectedRows=new Set(currentSelected);if(checked){newSelectedRows.add(id)}else{newSelectedRows["delete"](id)}setCurrentSelected(newSelectedRows);if(onSelect){var selectedData=data.filter(function(item){return newSelectedRows.has(item.id)});onSelect(selectedData)}};var handleSelectAll=function handleSelectAll(checked){var newSelectedRows=new Set(currentSelected);if(checked){data.forEach(function(item){newSelectedRows.add(item.id)})}else{data.forEach(function(item){newSelectedRows["delete"](item.id)})}setCurrentSelected(newSelectedRows);if(onSelect){var selectedData=data.filter(function(item){return newSelectedRows.has(item.id)});onSelect(selectedData)}};var handleRowClick=function handleRowClick(record,id){if(selectable&&selectOnRowClick){handleSelectRow(record.id,!currentSelected.has(record.id))}if(onRowClick){onRowClick(record,id)}};var handleSortClick=function handleSortClick(key){if(onSort){var newDirection=sortKey===key&&sortDirection==="asc"?"desc":"asc";onSort(key,newDirection)}};var tableWrapperStyle=function tableWrapperStyle(){if(maxHeight){return{"--par-table-max-height":typeof maxHeight==="number"?"".concat(maxHeight,"px"):maxHeight}}return{}};function getFrozenColumnWidths(){var action=arguments.length>0&&arguments[0]!==undefined?arguments[0]:"freeze";if(action==="defrost"){setFrozenPositions(function(pre){var newFrozenPositions=_objectSpread({},pre);Object.keys(newFrozenPositions).forEach(function(key){newFrozenPositions[key]=undefined});return newFrozenPositions});return}if(freezeColumns<=0)return;var frozenColumnWidths=[];var allColumns=selectable?[{key:"checkbox",title:""}].concat(_toConsumableArray(columns)):_toConsumableArray(columns);var actualFreezeCount=Math.min(freezeColumns,allColumns.length);for(var i=0;i<actualFreezeCount;i++){var _tableRef$current2;var column=allColumns[i];var target=(_tableRef$current2=tableRef.current)===null||_tableRef$current2===void 0?void 0:_tableRef$current2.querySelector("th[data-key=\"".concat(column.key,"\"]"));var targetWidth=(target===null||target===void 0?void 0:target.getBoundingClientRect().width)||column.width||50;frozenColumnWidths.push(Math.round(targetWidth))}setFrozenPositions(function(prev){var newFrozenPositions=_objectSpread({},prev);for(var index=0;index<actualFreezeCount;index++){var _column=allColumns[index];if(index===0){newFrozenPositions[_column.key]=0;continue}var cumulativeWidth=frozenColumnWidths.slice(0,index).reduce(function(acc,w){return Math.floor(acc+w)},0);newFrozenPositions[_column.key]=cumulativeWidth}return newFrozenPositions})}_react["default"].useEffect(function(){getFrozenColumnWidths();var watchFrozenWidth=function watchFrozenWidth(){return getFrozenColumnWidths()};window.addEventListener("resize",watchFrozenWidth);var tableElement=tableRef.current;tableElement===null||tableElement===void 0||tableElement.addEventListener("scroll",watchFrozenWidth);return function(){window.removeEventListener("resize",watchFrozenWidth);tableElement===null||tableElement===void 0||tableElement.removeEventListener("scroll",watchFrozenWidth)}},[freezeColumns]);_react["default"].useEffect(function(){var areSetsEqual=function areSetsEqual(setA,setB){if(setA.size!==setB.size)return false;var _iterator=_createForOfIteratorHelper(setA),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var item=_step.value;if(!setB.has(item))return false}}catch(err){_iterator.e(err)}finally{_iterator.f()}return true};setCurrentSelected(function(prev){var newSelectedRows=new Set(selectedRows.map(function(item){return item.id}));if(areSetsEqual(prev,newSelectedRows)){return prev}return newSelectedRows})},[selectedRows]);return(0,_jsxRuntime.jsxs)("div",{className:(0,_classnames["default"])("table-container",className,_defineProperty({},"par-table-".concat(color),color)),children:[(title||description)&&(0,_jsxRuntime.jsxs)("div",{className:"table-header-section",children:[title&&(0,_jsxRuntime.jsx)("h3",{className:"table-title",children:title}),description&&(0,_jsxRuntime.jsx)("div",{className:"table-description",children:description})]}),selectable&&batchActions&¤tSelected.size?(0,_jsxRuntime.jsxs)("div",{className:"table-batch-actions",children:[(0,_jsxRuntime.jsxs)("span",{className:"table-batch-actions-count",children:[currentSelected.size," ",countDescription]}),batchActions]}):actions&&(0,_jsxRuntime.jsx)("div",{className:"table-actions-section",children:actions}),(0,_jsxRuntime.jsxs)("div",{ref:wrapperTableRef,className:"table-wrapper",style:tableWrapperStyle(),children:[(0,_jsxRuntime.jsxs)("table",{className:"par-table",ref:combinedRef,children:[(0,_jsxRuntime.jsx)("thead",{className:"table-head",children:(0,_jsxRuntime.jsxs)("tr",{className:"table-head-row",children:[selectable&&(0,_jsxRuntime.jsx)("th",{className:"table-head-cell table-checkbox frozen","data-key":"checkbox",style:{left:frozenPositions["checkbox"]!==undefined?"".concat(frozenPositions["checkbox"],"px"):undefined},children:(0,_jsxRuntime.jsx)("div",{className:"table-head-cell-wrapper",children:(0,_jsxRuntime.jsx)("div",{className:"table-head-cell-content",children:(0,_jsxRuntime.jsx)(_Checkbox.Checkbox,{color:color,checked:data.length>0&&data.every(function(item){return currentSelected.has(item.id)}),indeterminate:data.length>0&¤tSelected.size>0&&data.some(function(item){return currentSelected.has(item.id)}),onChange:function onChange(e){return handleSelectAll(e.target.checked)}})})})}),columns.map(function(column,index){var _tableRef$current3;var shouldFreeze=selectable?index<freezeColumns-1:index<freezeColumns;return(0,_jsxRuntime.jsx)("th",{className:(0,_classnames["default"])("table-head-cell",{frozen:shouldFreeze,sortable:column.sortable,"last-column-frozen":selectable?index===freezeColumns-2:index===freezeColumns-1}),style:_objectSpread({width:columnWidths[column.key]!==undefined?"".concat(columnWidths[column.key],"px"):column.width,minWidth:columnWidths[column.key]!==undefined?"".concat(columnWidths[column.key],"px"):column.width,left:frozenPositions[column.key]!==undefined?"".concat(frozenPositions[column.key],"px"):undefined},{"--par-table-height":"".concat((_tableRef$current3=tableRef.current)===null||_tableRef$current3===void 0?void 0:_tableRef$current3.getBoundingClientRect().height,"px")}),"data-key":column.key,onMouseDown:function onMouseDown(){return column.sortable&&handleSortClick(column.key)},children:(0,_jsxRuntime.jsxs)("div",{className:"table-head-cell-wrapper",children:[(0,_jsxRuntime.jsx)("div",{className:"table-head-cell-content",children:column.title}),column.sortable&&(0,_jsxRuntime.jsxs)("span",{className:"table-sort-icon",style:{visibility:sortKey===column.key?"visible":"hidden"},children:[(0,_jsxRuntime.jsx)(_lucideReact.ChevronUp,{className:sortDirection=="asc"?"active":""}),(0,_jsxRuntime.jsx)(_lucideReact.ChevronDown,{className:sortDirection=="desc"?"active":""})]}),column.resizable&&(0,_jsxRuntime.jsx)("button",{type:"button",className:"table-resize-handle",onMouseDown:function onMouseDown(e){return handleResizeStart(e,column.key)}})]})},column.key)})]})}),(0,_jsxRuntime.jsx)("tbody",{className:"table-body",children:data.map(function(record,rowIndex){return(0,_jsxRuntime.jsxs)("tr",{className:"table-body-row ".concat(selectable?"selectable":""," ").concat(currentSelected.has(record.id)?"selected":""),onClick:function onClick(){return handleRowClick(record,record.id)},children:[selectable&&(0,_jsxRuntime.jsx)("td",{className:"table-body-cell table-checkbox frozen",onClick:function onClick(e){e.stopPropagation()},style:{left:frozenPositions["checkbox"]!==undefined?"".concat(frozenPositions["checkbox"],"px"):undefined},children:(0,_jsxRuntime.jsx)("div",{className:"table-body-cell-wrapper",children:(0,_jsxRuntime.jsx)("div",{className:"table-body-cell-content",children:(0,_jsxRuntime.jsx)(_Checkbox.Checkbox,{color:color,checked:currentSelected.has(record.id),onChange:function onChange(e){return handleSelectRow(record.id,e.target.checked)}})})})}),columns.map(function(column,index){var shouldFreeze=selectable?index<freezeColumns-1:index<freezeColumns;return(0,_jsxRuntime.jsx)("td",{className:(0,_classnames["default"])("table-body-cell",{frozen:shouldFreeze,"last-column-frozen":selectable?index===freezeColumns-2:index===freezeColumns-1}),style:{width:columnWidths[column.key]!==undefined?"".concat(columnWidths[column.key]):column.width,minWidth:columnWidths[column.key]!==undefined?"".concat(columnWidths[column.key]):column.width,left:frozenPositions[column.key]!==undefined?"".concat(frozenPositions[column.key],"px"):undefined},children:(0,_jsxRuntime.jsx)("div",{className:"table-body-cell-wrapper",children:(0,_jsxRuntime.jsx)("div",{className:"table-body-cell-content",children:column.render?column.render(record[column.key],record,rowIndex):record[column.key]})})},"".concat(rowIndex,"-").concat(column.key))})]},rowIndex)})})]}),data.length===0&&(0,_jsxRuntime.jsx)("div",{className:"table-empty-state-wrapper",children:emptyState?emptyState:(0,_jsxRuntime.jsxs)("div",{className:"table-empty-state",children:[(0,_jsxRuntime.jsx)(_lucideReact.Database,{className:"table-empty-state-icon"}),(0,_jsxRuntime.jsx)("div",{className:"table-empty-state-text",children:"No data"})]})})]}),(footer||showRowCount)&&(0,_jsxRuntime.jsx)("div",{className:"table-footer",children:footer?footer:(0,_jsxRuntime.jsxs)("div",{className:"table-row-count",children:[data.length," items"]})})]})});Table.displayName="Table";